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

import("./overview.component.scss")
import template from "./overview.component.html"
import HeaderComponent from "@/components/header.component.vue"
import MapComponent from "@/components/map.component.vue"
import {getRandNumBetween} from "@/utils/utils"
import layerData from "@/mock/layer"
import boundsData from "@/mock/bounds"
import ParkFileService from '@/service/park.service';
import CloseService from '@/service/close.service';
import * as turf from "@turf/turf"
import path from '@/mock/path';




enum COLOR{
    // 围栏
    BOUNDS="#F669FF",
    // 实控线
    REALLINE="#00C8FF",
    // 规划线
    PLANLINE="#FFA900",
    // 安全线
    SAFELINE="#80ED30",
    // 四色图-绿
    GREEN="#80ED30",
    // 四色图-蓝
    BLUE="#7DAEFF",
    // 四色图-黄
    YELLOW="#FFA900",
    // 四色图-红
    RED="#FF5959"
}
@Component({
    template,
    components: {
        MapComponent,
        // MapComponent: () => import("common/map"),
        HeaderComponent,

    }
})
export default class BaseComponent extends Vue {
    public player!: any;
    public layerData = layerData;

    public lock = true;
    public tourPathData = path;

    public timerList = {} as any;
    public pakFilePath =  "@path:DTS_Library_V5.4.pak";
    public warnAssets = "/JC_CustomAssets/EffectLibrary/Exhibition/Point/Point_Y_2";
    public currentWanning:any = null;
    public currentEvent:any = null;

    public currentAreaId:any = null;

    // dataList
    public dataList = {} as any;
    // service
    public parkService = new ParkFileService()
    public closeService = new CloseService()

    public  addWarnning(item){
        if(this.currentWanning){
            this.player.api.customObject.delete(this.currentWanning.id)
        }
        this.currentWanning = {
            id:item.id+"",
            groupId:"warning",
            pakFilePath:this.pakFilePath,
            assetPath:this.warnAssets,
            // coordinateType:1,
            location:[...item.position],
            rotation:[0,90,0]

        }
        this.player.api.customObject.add(this.currentWanning,()=>{
            this.player.api.customObject.focus(this.currentWanning.id,15,2)
        })
    }



    // 重置视角
    public async resetMap(time:number=1) {
        if(this.lock){
            this.$message.error("视口未加载完成")
            return
        }
        this.player.api.settings.setInteractiveMode(0)
        this.player.api.camera.lookAt(
            11660869.788125,
            3692656.110371,
            194.028672,
            0,
            -59.638443,
            63.604168
        )
    }

    public addArea(data){
        if(this.currentAreaId){
            this.player.api.polygon3d.delete(this.currentAreaId);
        }
        this.player.api.polygon3d.add({
            id:data.id,
            coordinates:data.area,
            style:1,
            height:20,
            color:data.color,
            generateTop:true,
        },(res)=>{
            this.currentAreaId = data.id;
            this.player.api.polygon3d.focus(data.id,40)
        })
    }

    // 添加电子围栏 // 安全线  // 实控线 // 规划线
    public async toggleArea(layer){
        if(!layer.ids.length){
            const result = layer.data.map(item=>{
                return {
                    id:item.id,
                    groupId:layer.value,
                    coordinates:item.area,
                    height:20,
                    color:layer.color,
                    style:4,
                    generateTop:false,
                    generateBottom:false
                }
            });
            this.player.api.polygon3d.add(result,(data)=>{
                if(data.resultMessage==="OK"){
                    layer.ids = result.map(item=>item.id)
                }
            })
        }else{
            if(layer.selected){
                this.player.api.polygon3d.show(layer.ids)
            }else{
                this.player.api.polygon3d.hide(layer.ids)
            }
        }
    }

    public async addMarker(layer,trackCustom?){
        if(!layer.ids.length){
            const options = layer.data.map((item,index)=>{
                const option = {} as any
                if(item.hasPop && !item.model){
                    const path = process.env.NODE_ENV === 'production'? process.env.PUB_PATH : '/'
                    option.popupURL = "http://192.168.1.66"+path+"#/popup?"+new URLSearchParams(layer.popData)
                }
                return Object.assign(option,{
                    id:item.id,
                    groupId:layer.value,
                    coordinate:item.position,
                    coordinateType:layer.coordinateType?layer.coordinateType:0,
                    displayMode:2,
                    imagePath:layer.url || layer.urls[item.type],
                    imageSize:item.model?[30,30]:[48,48],
                    popupSize:[480,388],
                    popupOffset:[50,0],
                    autoHidePopupWindow:false,
                    // popupURL:,
                    lineSize:item.hasPop?[0,0]:[2,40],
                    useTextAnimation: false,
                    lineOffset:item.hasPop?[0,0]:[24,0],
                    autoHeight:true,
                })
            })
            this.player.api.marker.add(options,(data)=>{
                if(data.resultMessage==="OK"){
                    if(trackCustom){
                        this.player.api.marker.setAttachCustomObject(layer.data.map(item=>{
                            return{
                                markerId: item.id, //标注id
                                objectId: item.id, //自定义对象id
                                offset: [0, 0, 0] //偏移量
                            }
                        }),(res)=>{
                            console.log(res)
                        });
                    }
                    layer.ids = options.map(item=>item.id);
                    this.player.api.marker.showPopupWindow(layer.ids)
                    this.player.api.marker.focus(layer.ids,50,2)

                }
            })
        }else{
            if(layer.selected){
                this.player.api.marker.showPopupWindow(layer.ids)
                this.player.api.marker.focus(layer.ids,50,2)
                this.player.api.marker.show(layer.ids)
            }else{
                this.player.api.marker.hidePopupWindow(layer.ids)
                this.player.api.marker.hide(layer.ids)
            }
        }
    }

    public addCustom(layer,needMarker?){
        if(!layer.ids.length){
            const options = layer.data.map((item,index)=>{
                console.log(item)
                return {
                    id:item.id,
                    groupId:layer.value,
                    pakFilePath:this.pakFilePath,
                    assetPath:layer.assetPath,
                    location:item.position,
                    smoothMotion:1,
                    scale:layer.scale,
                    rotation:item.rotation
                }
            })
            this.player.api.customObject.add(options,(data)=>{
                if(data.resultMessage==="OK"){
                    if(needMarker){
                        this.addMarker(layer,needMarker)
                    }else{
                        layer.ids = options.map(item=>item.id)
                    }
                }
            })
        }else{
            if(layer.selected){
                if(needMarker){
                    this.addMarker(layer,needMarker)
                }
                this.player.api.customObject.show(layer.ids)
            }else{
                if(needMarker){
                    this.addMarker(layer,needMarker)
                }
                this.player.api.customObject.hide(layer.ids)
            }
        }

    }


    public onFocus(data){
        this.player.api[data.type].focus(data.id)
    }



    // 组件渲染完成
    mounted() {
        //
    }
    beforeDestory(){
        //
    }
    destroyed(){
        this.layerData.forEach(item=>{
            if(this.timerList[item.value]){
                clearInterval(this.timerList[item.value]);
                this.timerList[item.value] = null;
            }

        })
    }


}