<template>
    <div>
        <div style="width:100%;height: calc( 100vh - 80px);" >
            <Map :airRoute="airRoute" @exitDraw="exitDraw" @flyToThere="flyToThere"></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 @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" @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} 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';

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;
}
</script>
