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";



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

    public currentLayers = [] as any;

    // 是否展开图层
    public openLayerDrawer = false;
    //展示导览右侧
    viewRightShow = false

    // 是否隐藏除地图外所有板块
    public hideAllPanel = false;
    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.customObject.clear();
        this.player.api.polygon3d.clear();
        this.player.api.marker.clear();
        this.player.api.marker3d.clear();
        this.player.api.polyline.clear();
        this.player.api.heatmap.clear();
        this.currentLayers = this.getCurrentLayers();

    }

    public handleChange(data) {
        console.log(data)
        if(data.GroupID){
        }
    }

    public navChange(data: string) {
        this.currentNav = data;
        if(this.player){
            this.currentLayers = this.getCurrentLayers()
            this.resetMap();
        }
        console.log('当前点击导航', data)
    }


    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 = true;
        this.drawerChange(false)
    }

    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)
        }
    }
    //进入自由导览
    showView(){
        //todo 进入自由导览
    }
    //展开导览右侧
    showViewRight(){
        if (this.viewRightShow){
            this.viewRightShow = false
            setTimeout(()=>{
                this.viewRightShow = true
            })
        }else{
            this.viewRightShow = true
        }
    }
    //右侧详情点击事件
    showDetail(item){
        console.log('右侧详情点击事件')
    }
    mounted() {
        console.log(2)
    }
    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)
                }
            }
         })
         console.log(layers)
        return layers
    }




    destroyed() {
        if (this.player) {
            this.player = null
        }
    }
}