<template>
    <div>
        <div style="width:100%;height: calc( 100vh - 80px);" >
            <Map :workPlanFormShow="workPlanFormShow" :airRoute="airRoute" @exitDraw="exitDraw" @flyToThere="flyToThere" :wayline="wayline" :waylineInfo="waylineInfo"></Map>
        </div>

        <!-- 工作计划列表 -->
        <div v-show="planListShow" style="width:360px;background:#0d0e15c1 ;position:absolute;top:0px;left:0px;z-index:1;height: calc( 100vh - 104px);overflow-y:hidden;">
            <planList :planListShow="planListShow" @planDetail="planDetail" @createWorkPlan="toCreateWorkPlan" ></planList>
        </div>

        <!-- 创建计划弹窗 -->
        <div v-if="workPlanFormShow" style="width:380px;background:#0d0e15ce ;position:absolute;top:30px;left:30px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
            <createWorkPlan :formData="formData" @successCreatePlan="successCreatePlan" @cancleCraete="cancleCraete" @selectAircraft="selectAircraft" @selectAriLine="selectAriLine" :checkedAriLine="checkedAriLine" :checkedDronePort="checkedDronePort"></createWorkPlan>
        </div>

        <!-- 航线库 -->
        <div v-if="ariLineShow" style="width:566px;background:#0d0e15c1 ;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
            <airLineList @checkAriLine="checkAriLine" @previewAirLine="previewAirLine" @createAirLine="handlerCreateAirLine"></airLineList>
        </div>

        <!-- 飞行器 -->
        <div v-if="aircraftShow" style="width:340px;background:#0d0e15c1 ;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
            <aircraft @checkAriLine="checkDronePort" ></aircraft>
        </div>

        <!-- 新建航线 -->
        <div v-if="createAirLineShow" style="width:566px;background:#0d0e15c1 ;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
            <createAirLine @createAirLine="handlerCreateAirRoute"  @cancle="cancleCreateAirLine"></createAirLine>
        </div>

    </div>
</template>
<script lang="ts" setup>
import {ref,watch} from 'vue';
import planList from './components/planList.vue';
import airLineList from './components/airLineList.vue';
import aircraft from './components/aircraft.vue';
import createWorkPlan from './components/createWorkPlan.vue';
import createAirLine from './components/createAirLine.vue'
import Map from './components/map.vue'
import AirPolygon from './components/airPolygon.vue';
import {getAirLine} from '@/api/sys/workplan';

import JSZip from 'jszip';
import axios from 'axios';

import { XMLParser, XMLBuilder } from 'fast-xml-parser';

const airRoute = ref({})

const flyToTherePosition = ref({
    lng:null,
    lat:null,
    alt:null,
})


const flyToThere = (e)=>{
    console.log(e);
}
const planListShow = ref(true);
const workPlanFormShow = ref(false);
const ariLineShow = ref(false);
const aircraftShow = ref(false);
const createAirLineShow = ref(false);

const selectAriLine = ()=> {
    ariLineShow.value = true;
    aircraftShow.value = false;
}

const selectAircraft = ()=>{
    aircraftShow.value = true;
    ariLineShow.value = false;
}

const cancleCraete = ()=>{
    workPlanFormShow.value = false;
    ariLineShow.value = false;
    aircraftShow.value = false;
    planListShow.value = true;
}

const checkedAriLine = ref({});

const checkAriLine = (item)=>{
    if(item){
        ariLineShow.value = false;
        checkedAriLine.value = item;
    }
}

const checkedDronePort = ref({});

const checkDronePort = (item)=>{
    if(item){
        aircraftShow.value = false;
        checkedDronePort.value = item;
    }
}

const formData = ref(null);

const toCreateWorkPlan = (data)=> {
    formData.value = data;
    planListShow.value = false;
    workPlanFormShow.value = true;
}

// 创建航线
const handlerCreateAirLine = ()=>{
    createAirLineShow.value = true;
}

const cancleCreateAirLine = ()=>{
    createAirLineShow.value = false;
}

const handlerCreateAirRoute = (info)=>{
    console.log("info",info);
    workPlanFormShow.value = false;
    ariLineShow.value = false;
    aircraftShow.value = false;
    planListShow.value = false;
    createAirLineShow.value = false;
    airRoute.value = info
}


const successCreatePlan = ()=>{
    workPlanFormShow.value = false;
    ariLineShow.value = false;
    aircraftShow.value = false;
    planListShow.value = true;
}



// 保存航线后退出
const exitDraw = ()=>{
    planListShow.value = false;
    workPlanFormShow.value = true;
    ariLineShow.value = true;
}




// 预览航线
const wayline = ref({});
const waylineInfo = ref(null)
const previewAirLine =async (line,type) => {
    let info =await getAirLine({airLineId:type.value?.id});
    if(info){
        wayline.value = line;
        waylineInfo.value = info;
    }
}

// 查看航线详情
const planDetail =async (item) => {
    formData.value = item;
    console.log("formData",formData.value?.airLineId);

    let info =await getAirLine({airLineId : formData.value?.airLineId});
    if(info){
        // wayline.value = line;
        waylineInfo.value = info;
        wayline.value = await airLineDetail(info);
    }

    workPlanFormShow.value =  true;
}


// 获取wpml文件

const currentPreviewWayLine = ref(null);

const airLineDetail =async (item) => {

    currentPreviewWayLine.value = item;

    try{
        let response  =  await axios.get(item.wpml,{responseType: 'arraybuffer'});
        // 解压kmz文件
        let xmlStr =await extractKmz(response.data);
        let xmlData = xmlStr.replace(/wpml:/g,"");
        const parser = new XMLParser();
        const jsonObj = parser.parse(xmlData);
        return jsonObj.kml.Document;
        
    }catch(e){
        console.error(e);
    }

    
}

// 解压航线文件
const extractKmz = async (kmzBlob)=>{

    const zip = new JSZip();

    const contents = await zip.loadAsync(kmzBlob);
    
    // 查找.wmpl文件
    for (const [filename, file] of Object.entries(contents.files)) {
        if (filename.toLowerCase().endsWith('.wpml')) {
            return await file.async('text');
        }
    }
    
    throw new Error('KMZ文件中未找到WMPL文件');
}


</script>
