<template>
  <setting-panel :scrollbar="false">
    <ul class="view-setting">
            <li app-border dir-bottom :class="{disable:$justview}">
                <button class="ui-button submit"  :class="{disable:vrlist.length<=0}" @click="open(null)">添加热点</button>
            </li>
            <li app-border class="list">
                <div class="tips">当前场景热点（{{someData.hotspots.length}}）</div>
                <div class="hots">
                    <ul v-if="someData.hotspots.length>0">
                        <li v-for="(item,key) in someData.hotspots" :key="key" @click="open(item)">
                            <div>
                                <i
                                    class="style"
                                    :class="{default:true}"
                                >
                                    <em :style="{'background-image':require('@/assets/images/img_panorama_dot.png')}" v-show="item.styleId == null" ></em>
                                </i>
                                <span>{{item.hotspotTitle}}</span>
                            </div>
                            <i class="iconfont icon_delete" :class="{disable:$justview}" @click.stop="deleIndex=key"></i>
                            <a
                                href="javascript:;"
                                v-clickoutside="clickoutside"
                                :class="{active:deleIndex==key}"
                                @click.stop="deleteHot(item)"
                            >确定删除</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    <eidt-panel v-if="showPanel" :editTitle="editTitle" @save="save" @select="data=>{$emit('select',data)}" :show="showPanel" :data="editData" @close="close"></eidt-panel>
  </setting-panel>
</template>
<script>
import EidtPanel from "./EditPanel";
import { saveSomeData,saveUseHots } from "@/api";
import { mapGetters } from "vuex";

// import ConfirmPanel from "./ConfirmPanel";
export default {
    components: {
        EidtPanel,
        // ConfirmPanel
    },
    computed: {
        ...mapGetters({
            vrlist:'vrlist',
            activeItem:'activeItem'
        })
    },
    data(){
        return {
            editData:'',
            editLink:'',
            showPanel:false,
            someData:{hotspots:[]},
            deleIndex:-1,
            editTitle:'新增'
        }
    },
    watch:{
        '$route.name':function () {
            this.showPanel = false
        },
        activeItem:{
            immediate:true,
            handler:function (newVal) {
                this.someData = newVal.someData||'';
                this.someData = this.someData ? JSON.parse(this.someData) : {hotspots:[]}
            }
        },
        showPanel(newVal){
            this.$bus.emit('canEdit',!newVal)
        }
    },
    mounted(){
        this.$bus.on('openHotspot',data=>{
            let idx = this.someData.hotspots.findIndex(item=>item.name == data)
            this.open(this.someData.hotspots[idx])
        })
    },
    methods:{
        close(data){
            if (data) {
                if (data.type == 'edit') {
                    this.$deleteKRHotspot(data.data)
                    this.$bus.emit('addhotspot',data.data)
                    let idx = this.someData.hotspots.findIndex(item=>item.name == data.data.name)
                    this.someData.hotspots[idx] =data.data 
                }
                else{
                    this.$deleteKRHotspot(data.data)
                }
            }
            this.showPanel = false;
        },
        save(data){
            var krpano = document.getElementById('krpanoSWFObject');
            let HV = window.__krfn.utils.getHotspotHV(krpano,data.name);
            data.ath = HV.ath
            data.atv = HV.atv
            let type = 'edit'
            if (this.someData.hotspots.findIndex(item => item.name === data.name)<=-1) {
                type = 'add'
                this.someData.hotspots.push(data)
            }
            saveSomeData({
                id:this.activeItem.id,
                sceneTitle: this.activeItem.sceneTitle,
                someData:this.someData
            },()=>{
                this.activeItem.someData = JSON.stringify(this.someData)
                this.$tips({content:this.editTitle+'成功',icon:'ok'})

                let tmp = JSON.parse(this.activeItem.useHots || '{"data":[]}')
                if (type=='add') {
                    tmp.data.push(data.link)
                }else{
                    let idx = tmp.data.findIndex(item => item == this.editLink)
                    if (idx>-1) {
                        tmp.data[idx] = data.link
                    }
                }

                saveUseHots({
                    id:this.activeItem.id,
                    sceneCodes: tmp.data
                },()=>{
                    this.activeItem.useHots = JSON.stringify(tmp)
                })
            })
        },
        deleteHot(data){
            this.someData.hotspots.splice(this.someData.hotspots.findIndex(item => item.name === data.name), 1)
            saveSomeData({
                id:this.activeItem.id,
                sceneTitle: this.activeItem.sceneTitle,
                someData:this.someData
            },()=>{
                this.$deleteKRHotspot(data)
                this.activeItem.someData = JSON.stringify(this.someData)
                this.$tips({content:'删除成功',icon:'ok'})

                
                let tmp = JSON.parse(this.activeItem.useHots || '{"data":[]}')
                let idx = tmp.data.findIndex(item=>item==data.link)
                tmp.data.splice(idx,1);

                saveUseHots({
                    id:this.activeItem.id,
                    sceneCodes: tmp.data
                },()=>{
                    this.activeItem.useHots = JSON.stringify(tmp)
                })
            })
        },
        open(data){
            this.showPanel = true;
            this.editTitle = '新增'
            this.editData = data

            if (data) {
                this.editLink = data.link
                this.editTitle = '编辑'
                var krpano = document.getElementById('krpanoSWFObject');
                window.__krfn.utils.looktohotspot(krpano,data.name);
            }
        },
        clickoutside() {
            if (this.deleIndex > -1) {
                this.deleIndex = -1;
            }
        }
    }
}
</script>
<style lang="less" scoped>
.view-setting {
    height: 100%;
    display: flex;
    flex-direction: column;
    li {
        display: flex;
        &.list {
            position: relative;
            flex: 1;
            padding: 0;
            width: 100%;
            flex-direction: column;
            > div {
                margin: 0;
                display: block;
            }
        }
    }

    .tips {
        padding: 10px;
    }

    .hots {
        padding-top: 40px;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        ul {
            width: 100%;
            max-height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }
        li {
            cursor: pointer;
            position: relative;
            height: 40px;
            line-height: 40px;
            padding: 0 10px;
            background: #373938;
            margin-bottom: 10px;
            &::after {
                display: none;
                content: "";
                position: absolute;
                width: 4px;
                height: 100%;
                right: 0;
                top: 0;
                background-color: @color;
            }
            &:hover {
                &::after {
                    display: block;
                }
            }

            > div {
                position: relative;
                width: 100%;
                height: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-left: 25px;
                padding-right: 5px;
            }
            a {
                position: absolute;
                top: 0;
                right: -100%;
                width: 82px;
                height: 100%;
                line-height: 40px;
                color: #fff;
                text-align: center;
                text-decoration: none;
                background-color: @color;
                box-shadow: -5px 0px 20px rgba(0, 0, 0, 0.5);
                z-index: 10;
                opacity: 0;
                transition: right 0.3s, opacity 0.1s;
                &.active {
                    right: 0px;
                    opacity: 1;
                }
            }
            .style {
                position: absolute;
                left: 0;
                top: 50%;
                width: 20px;
                height: 20px;
                transform: translateY(-50%);
                background-position: center center;
                background-size: contain;
                background-repeat: no-repeat;
                border-radius: 50%;
                &.default {
                    border: solid 1px rgba(255, 255, 255, 0.1);
                    em {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%,-50%);
                        width: 80%;
                        height: 80%;
                        border: solid 0.5px #fff;
                        background: #05c8ae url('~@/assets/images/img_panorama_dot.png') no-repeat;
                        background-size: 80% 80%;
                        background-position: center center;
                        border-radius: 50%;
                    }
                }
            }
            .icon_delete {
                font-size: 25px;
                padding: 0 5px;
                color: #999;
                &:hover {
                    color: #fff;
                }
            }
        }
    }

    .ui-button {
        width: 100%;
    }
}
</style>