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"

@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 timerList = {} as any;
    public pakFilePath =  "@path:DTS_Library_V5.4.pak";
    public currentWanning:any = null;
    public currentEvent:any = null;

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



    // 重置视角
    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 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)=>{
                return {
                    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:[48,48],
                    // popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(item),
                    lineSize:[2,40],
                    useTextAnimation: false,
                    lineOffset:[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);
                }
            })
        }else{
            if(layer.selected){
                this.player.api.marker.show(layer.ids)
            }else{
                this.player.api.marker.hide(layer.ids)
            }
        }
    }

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

    }


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



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

        })
    }


}