import {Component} from 'vue-property-decorator';

import {MockData} from "@/mock";

import layer from "layui-layer"
import BaseComponent from "./base.component"
import HomeLeftComponent from "@/components/home/left/homeLeft.component";
import HomeRightComponent from "@/components/home/right/homeRight.component";
import ViewLeftComponent from "@/components/view/left/viewLeft.component";
import ViewRightComponent from "@/components/view/right/viewRight.component";
import ManageLeftComponent from "@/components/manage/left/manageLeft.component";
import ManageRightComponent from "@/components/manage/right/manageRight.component";
import PermitPopUpComponent from "@/components/permitPopUp.component.vue";



@Component({
    components: {
        HomeLeftComponent,
        HomeRightComponent,
        ViewLeftComponent,
        ViewRightComponent,
        ManageLeftComponent,
        ManageRightComponent,
        PermitPopUpComponent
    }
})
export default class OverViewComponent extends BaseComponent {
    //当前菜单
    public currentNav = 'home';
    // 当前图层
    public warnTimer = {};

    public currentLayers = [] as any;

    // 是否展开图层
    public openLayerDrawer = false;

    public currentCarPeople:any = {};
    //展示导览右侧
    viewRightShow = false;

    dialogVisibleForBigPop = false;

    bigPopTitle = '人员信息卡'
    //默认打开的折叠面板
    activeNames = ['1']

    // 是否隐藏除地图外所有板块
    public hideAllPanel = false;
    public viewRightData = {};


    public viewLayer = {} as any;
    async created(){
        // this.currentLayers = this.getCurrentLayers();
    }
    public upDateEventList(){
        const eventList = MockData.getEventList().data
        this.$store.commit("upDateEventList",eventList)
    }
    public getHiddenDangrous(){
        this.parkService.getHiddenDangrous().then((res:any)=>{
            this.dataList["hidden-dangrous"] = res.data;
            this.$store.commit("setHiddenDangrousList",res.data)
        })
    }
    // 地图初始化后
    public getMap(store: any) {
        this.player = store;
        this.lock = false
        this.resetMap();
        this.player.api.cameraTour.delete("1");
        this.player.api.cameraTour.delete("2");
        this.player.api.customObject.clear();
        this.player.api.polygon3d.clear();
        this.player.api.marker.clear();
        this.player.api.marker3d.clear();
        this.player.api.settings.setInteractiveMode(0);
        this.player.api.polyline.clear();
        this.player.api.heatmap.clear();
        this.currentLayers = this.getCurrentLayers();
        this.player.api.cameraTour.add(this.tourPathData)
        // this.tourPathData.forEach((item)=>{
        // })

    }

    public handleChange(data) {
        if(data.GroupID){
            const currentData = (this.layerData.find(item=>item.value === data.GroupID)as any).data.find(item=>item.id === data.Id)
            if(data.GroupID==="peo"){
                this.emitPersonPop(currentData)
            }
            if(data.GroupID==="car"){
                this.emitCarPop(currentData)
            }
        }
    }


    //展示人员详情
    emitPersonPop(item){
        this.resetMap();
        setTimeout(()=>{
            this.currentCarPeople = item;
            this.player.api.marker.focus(item.id,50,2);
            setTimeout(()=>{
                this.bigPopTitle = '人员信息卡';
                this.dialogVisibleForBigPop = true
            },2000)
        },1000)
    }
    //展示车辆详情
    emitCarPop(item){
        this.resetMap();
        setTimeout(()=>{
            this.currentCarPeople = item;
            this.player.api.marker.focus(item.id,50,2);
            setTimeout(()=>{
                this.bigPopTitle = '车辆信息卡';
                this.dialogVisibleForBigPop = true
            },2000)
        },1000)
    }
    closeCarPersonPop(){
        this.currentCarPeople = null;
    }

    public navChange(data: string) {
        this.currentNav = data;
        if(this.player){
            this.currentLayers = this.getCurrentLayers()
            if(this.currentEvent ){
                this.viewLayer[this.currentEvent.id].selected = false;
                this.addCustom(this.viewLayer[this.currentEvent.id],true);
                this.currentEvent = null;
            }
            if(this.currentWanning){
                this.player.api.customObject.delete(this.currentWanning.id)
            }
            this.resetMap();
        }
    }


    public drawerChange(data) {
        const fixedbtn = document.querySelector(".fixed-btn") as any;
        const layerBth = document.querySelector(".layer-btn-box") as any;
        const leftEl = document.querySelector(".left") as any;
        const rightEl = document.querySelectorAll(".right") as any;
        if (data) {
            leftEl.classList.remove("animate__slideOutLeft");
            // rightEl.classList.remove("animate__slideOutRight");
            leftEl.classList.add("animate__slideInLeft");
            fixedbtn.style.right = "540px";
            layerBth.style.right = "440px";
            // rightEl.classList.add("animate__slideInRight");
            rightEl.forEach(item=>{
                item.classList.remove("animate__slideOutRight");
                item.classList.add("animate__slideInRight");
            })
        } else {
            leftEl.classList.remove("animate__slideInLeft");
            // rightEl.classList.remove("animate__slideInRight");
            leftEl.classList.add("animate__slideOutLeft");
            fixedbtn.style.right = "140px";
            layerBth.style.right = "40px";
            // rightEl.classList.add("animate__slideOutRight");
            rightEl.forEach(item=>{
                item.classList.remove("animate__slideInRight");
                item.classList.add("animate__slideOutRight");
            })
        }
    }

    public toggleAllPanel(){
        this.hideAllPanel = !this.hideAllPanel;
        this.drawerChange(!this.hideAllPanel)
        if(!this.hideAllPanel){
            this.player.api.cameraTour.stop();
            this.player.api.settings.setInteractiveMode(0)
        }
    }

    public toggleHeight(){
        this.openLayerDrawer = !this.openLayerDrawer;
    }

    public toggleLayer(layer){
        if(this.lock){
            this.$message.error("视口未加载完成")
            return
        }
        layer.selected = !layer.selected;
        if(layer.type === "moveMarker"){
            this.addMarker(layer,true)
        }else{
            this.toggleArea(layer)
        }
    }

    //获取点击的信息
    getItem(item) {
        this.addWarnning(item)
    }
    //进入自由导览
    async showView (){
        this.toggleAllPanel();
        await this.player.api.camera.lookAt(
            11660670.518125,
            3692632.854824,
            15.530475,
            0,
            9.213877,
            85.199608,
            2
        )
        setTimeout(()=>{
            this.player.api.settings.setInteractiveMode(1);
            this.player.api.settings.setMainUIVisibility(false)
        },2000)

        //todo 进入自由导览
    }
    //展开导览右侧
    showViewRight(data){
        this.viewRightData = data
        if (this.viewRightShow){
            this.viewRightShow = false
            setTimeout(()=>{
                this.viewRightShow = true
            })
        }else{
            this.viewRightShow = true

        }
    }
    //右侧详情点击事件
    showDetail(item){
        if(this.currentEvent){
            if(this.currentEvent.id === item.id){
                return
            }else{
                this.viewLayer[this.currentEvent.id].selected = false;
                this.addCustom(this.viewLayer[this.currentEvent.id],true);
                this.currentEvent = null;
            }
        }
        if(!this.viewLayer[item.id]){
            const data = [] as any;
            if(item.point>1){
                for(let i = 0;i<item.point;i++){
                    data.push({
                        id:item.id+'_'+i,
                        position:item.position[i],
                        hasPop:i===1,
                    })
                }
            }else{
                data.push({
                    id:item.id,
                    position:item.position,
                    hasPop:true
                })
            }
            this.viewLayer[item.id] = {
                type:"moveMarker",
                assetPath:"/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_10",
                value:"fire",
                popData:item,
                showPop:true,
                selected:true,
                scale:[3,3,3],
                urls:[],
                ids:[],
                data,

            }
            this.currentEvent = item;
        }else{
            this.viewLayer[item.id].selected = !this.viewLayer[item.id].selected;
            if(this.viewLayer[item.id].selected){
                this.currentEvent = item;
            }
        }
        this.addCustom(this.viewLayer[item.id],true);
    }
    mounted() {
    }
    get showBackGround(){
        let flag = this.currentNav === 'view' && !this.viewRightShow
        return flag?'none':''
    }


    public getCurrentLayers(){
        const layers =  [] as any;
         this.layerData.forEach(async (item:any)=>{
            if(!item.data){
                item.data = (await item.init()).data
            }
            if(item.pages.includes(this.currentNav)){
                if(!item.selected){
                    this.toggleLayer(item)
                }
                layers.push(item)
            }else{
                if(item.selected){
                    this.toggleLayer(item)
                }
            }
         })
        return layers
    }

    //进入路线导览
    playView(item){
        this.toggleAllPanel()
        this.player.api.cameraTour.play(item.id)
    }
    closeRight(){
        this.viewRightShow = false;
        const dom = document.querySelector('div.is-current') as any;
        if (dom){
            dom.classList.remove('is-current')
        }
        if(this.currentEvent ){
            this.viewLayer[this.currentEvent.id].selected = false;
            this.addCustom(this.viewLayer[this.currentEvent.id],true);
            this.currentEvent = null;
        }
    }

    deactivated(){
        //
    }
    beforeDestory() {
        if (this.player) {
            this.player = null
        }
    }
}