<template>
    <div>
        <div class="map-out-container">
            <div class="map-inner-container">
                <Map :workPlanFormShow="workPlanFormShow" :airRoute="airRoute" @exitDraw="exitDraw" @flyToThere="flyToThere" :wayline="wayline" :waylineInfo="waylineInfo"></Map>
            </div>
        </div>

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

        <!-- 新建航线 -->
        <div v-if="createAirLineShow" style="width:566px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);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,onMounted} from 'vue';
import airLineList from '../workplan/components/airLineList.vue';
import createAirLine from '../workplan/components/createAirLine.vue'
import Map from '../workplan/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)=>{
    
}
const planListShow = ref(true);
const workPlanFormShow = ref(false);
const ariLineShow = ref(true);
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 = (data)=>{
    console.log("data123",data);
    createAirLineShow.value = true;
}

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

const handlerCreateAirRoute = (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文件');
}

onMounted(()=>{

let element = window.document.getElementsByClassName("mars3d-locationbar")[0]  as HTMLElement;
element.style.bottom = '40px';

})
</script>
<style scoped>
.map-out-container{
    width: 100%;
    height: calc( 100vh - 80px);
    overflow: hidden;
}

.map-inner-container{
    width: calc( 100% + 80px);
    height: calc( 100% + 80px);
    position: relative;
    top:-40px;
    left:-40px;
}
</style>