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";
import WarningDetailComponent from "@/components/warningDetail.component.vue";



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

    public currentLayers = [] as any;

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

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

    dialogVisibleForBigPop = false;

    bigPopTitle = '人员信息卡'
    //默认打开的折叠面板
    activeNames = ['1']
    //展示告警详情右侧
    waringRightShow = false
    //显示展示隐藏按钮
    showPlay = false
    // 是否隐藏除地图外所有板块
    public hideAllPanel = false;
    public viewRightData = {};
    //告警详情
    public info = {};
    public showLoading = true

    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.showLoading = 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) {
        console.log(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)
            }
            if (data.GroupID === "video") {
                // this.openVideo(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();
        }
        this.waringRightShow = false
        this.viewRightShow = false
    }


    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.showPlay = false
            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)

        this.info = item
        if (this.waringRightShow) {
            this.waringRightShow = false
            setTimeout(() => {
                this.waringRightShow = true
            })
        } else {
            this.waringRightShow = true
        }
        const position = item.position
        this.player.api.camera.lookAt(
            position[0],
            position[1],
            position[2],
            0,
            position[3], //pitch
            position[4], //yaw
            2
        )

    }

    //定位坐标
    changePoint(item) {
        this.addWarnning(item)
    }

    //关闭告警详情
    changeClose() {
        this.waringRightShow = false
        this.player.api.customObject.delete(this.currentWanning.id)
    }

    //进入自由导览
    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(2);
            this.player.api.settings.setMainUIVisibility(false)
        }, 2000)

        //todo 进入自由导览
    }

    //展开导览右侧
    showViewRight(data) {
        if (data.area) {
            this.addArea(data)
        }
        if (data.camera) {
            this.player.api.camera.lookAt(...data.camera)
        }
        this.viewRightData = data;
        this.viewRightShow = false
        setTimeout(() => {
            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 (item.type === 'video') {
            const currentData = (this.layerData.find(item => item.value === "video") as any).data.find(items => items.remark === item.title)
            this.openVideo(currentData ?? item)
        } else {
            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],
                            rotation: item.rotation || [0, 90, 0],
                            hasPop: item.hasPop && i === 1,
                        })
                    }
                } else {
                    data.push({
                        id: item.id,
                        position: item.position,
                        rotation: item.rotation || [0, 90, 0],
                        hasPop: item.hasPop
                    })
                }
                this.viewLayer[item.id] = {
                    type: "moveMarker",
                    assetPath: item.assetPath || "/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_10",
                    value: "fire",
                    popData: item,
                    selected: true,
                    scale: item.scale || [1, 1, 1],
                    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], item.hasPop);
        }

        if (item.needFocus) {
            if (item.look) {
                this.player.api.camera.lookAt(
                    item.look[0],
                    item.look[1],
                    item.look[2],
                    0,
                    item.look[4], //pitch
                    item.look[5], //yaw
                    2
                )
            } else {
                this.player.api.customObject.focus(item.id, item.distance, 2)
            }

        }
    }

    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.layerData.forEach(item => {
            if (item.selected) {
                this.toggleLayer(item)
            }
        })
        this.showPlay = true
        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;
        }
    }

    //暂停继续
    playAction(type) {
        this.player.api.cameraTour[type]()
    }

    // 打开摄像头
    openVideo(item) {
        // this.resetMap();
        setTimeout(() => {
            // this.player.api.marker.focus(item.id,20,2)
            if (item.model === 'video') {
                setTimeout(() => {
                    layer.open({
                        type: 1,
                        shade: 0,
                        title: item.remark,
                        content: `<div class="customClass">
                      <video src="${item.info}" controls style="width:100%" autoplay></video>
                    </div>`
                    })
                }, 500)
            } else {
                setTimeout(() => {
                    layer.open({
                        type: 1,
                        shade: 0,
                        title: item.remark,
                        content: `<div class="customClass"><div
                                style="
                                    background: #0000008c;
                                    color: #ffffff;
                                    font-size: 12px;
                                    padding: 10px;
                                    line-height: 2;
                                    white-space: pre-wrap;
                                "
                                >${item.info}</div></div>`

                    })
                }, 1000)
            }

        }, 100)
    }

    deactivated() {
        //
    }

    beforeDestory() {
        if (this.player) {
            this.player = null
        }
        clearInterval(this.timer)
    }
}