<template>
    <div class="container">
        <div class="title">
            <span @click="closeAirLine()">
                <LeftOutlined  v-show="props.title=='选择航线'" />  {{props.title}}
            </span>
            
        </div>
        <div class="filter-container">
            <div>
                <a-select
                        ref="select"
                        style="width: 185px"
                        v-model:value="pageQuery.UavTypeId"
                        placeholder="全部机型"
                        @change="getAirList"
                    >
                    <a-select-option :value="null">全部机型</a-select-option>
                    <a-select-option :value="'M30'">经纬 M30 系列</a-select-option>
                    <a-select-option :value="'Mavic 3'">Mavic 3 系列</a-select-option>
                    <a-select-option :value="'Mavic 3D'">Mavic 3D 系列</a-select-option>
                    <a-select-option :value="'Matrce 4TD'">Matrce 4TD 系列</a-select-option>
                </a-select>
            </div>

            <div>
                <a-select
                        ref="select"
                        style="width: 185px"
                        placeholder="时间排序"
                        v-model:value="pageQuery.Ascending"
                        @change="getAirList"
                    >
                    <a-select-option :value="true">时间正序</a-select-option>
                    <a-select-option :value="false">时间倒序</a-select-option>
                </a-select>
            </div>

            <div class="filter-buttons" >
                <div class="filter-button" @click="pageQuery.AirLineType = 'waypoint';getAirList();">
                    <svg t="1749104723424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7226" width="24" height="24"><path d="M784 454.4c-28.8 0-54.4 12.8-70.4 35.2L326.4 352l188.8-134.4c12.8 6.4 25.6 12.8 41.6 12.8 48 0 86.4-38.4 86.4-86.4S608 64 560 64s-86.4 38.4-86.4 86.4c0 9.6 3.2 16 3.2 25.6l-179.2 128c-12.8-19.2-35.2-28.8-57.6-28.8-48 0-86.4 38.4-86.4 86.4S192 448 240 448c25.6 0 51.2-12.8 67.2-32l352 124.8L320 608c-12.8-32-41.6-57.6-80-57.6-48 0-86.4 38.4-86.4 86.4s38.4 86.4 86.4 86.4c35.2 0 64-19.2 76.8-51.2l396.8-83.2c16 22.4 41.6 38.4 70.4 38.4 48 0 86.4-38.4 86.4-86.4 0-48-38.4-86.4-86.4-86.4z m-224-342.4c19.2 0 35.2 16 35.2 35.2s-16 35.2-35.2 35.2c-19.2 0-35.2-16-35.2-35.2s16-35.2 35.2-35.2z m-320 284.8c-19.2 0-35.2-16-35.2-35.2s16-35.2 35.2-35.2 35.2 16 35.2 35.2-16 35.2-35.2 35.2z m0 275.2c-19.2 0-35.2-16-35.2-35.2s16-35.2 35.2-35.2 35.2 16 35.2 35.2S259.2 672 240 672z m544-92.8c-19.2 0-35.2-16-35.2-35.2 0-19.2 16-35.2 35.2-35.2 19.2 0 35.2 16 35.2 35.2 0 16-16 35.2-35.2 35.2z m-246.4 182.4l-150.4-51.2c-35.2-12.8-67.2 22.4-57.6 57.6l51.2 150.4c12.8 38.4 67.2 41.6 83.2 3.2l25.6-54.4 54.4-25.6c35.2-16 35.2-67.2-6.4-80z m-76.8 57.6c-9.6 3.2-19.2 12.8-22.4 22.4l-12.8 32-35.2-102.4 102.4 35.2-32 12.8z" p-id="7227" fill="#ffffff"></path></svg>
                </div>
                <div class="filter-button" @click="pageQuery.AirLineType = 'mapping2d';getAirList();">
                    <svg t="1749104746320" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7498" width="24" height="24"><path d="M918.485333 261.930667L857.813333 208.64a20.992 20.992 0 0 0-27.008 0L770.133333 261.973333a15.36 15.36 0 0 0 0 23.68 20.48 20.48 0 0 0 13.482667 4.906667 20.48 20.48 0 0 0 13.525333-4.906667l15.36-13.482666v141.994666c0 15.402667 14.250667 27.904 31.786667 27.904 17.578667 0 31.829333-12.501333 31.829333-27.904V272.128l15.36 13.482667a20.48 20.48 0 0 0 13.482667 4.906666 20.48 20.48 0 0 0 13.525333-4.906666 15.36 15.36 0 0 0 0-23.68z m-277.461333 159.146666c0 15.445333 14.250667 27.946667 31.829333 27.946667s31.829333-12.501333 31.829334-27.946667V346.325333c0-31.786667-11.349333-61.952-31.914667-84.906666a115.328 115.328 0 0 0-85.632-38.698667c-32.426667 0-63.573333 14.08-85.632 38.698667a126.848 126.848 0 0 0-31.914667 84.906666v335.530667c0 36.693333-24.704 67.754667-53.888 67.754667-29.226667 0-53.930667-31.061333-53.930666-67.754667V355.498667l0.469333-7.68 0.042667-1.493334c0-31.786667-11.306667-61.952-31.914667-84.906666a115.328 115.328 0 0 0-85.632-38.698667c-32.384 0-63.573333 14.08-85.632 38.698667a126.848 126.848 0 0 0-31.914667 84.906666v138.496c0 15.402667 14.250667 27.904 31.829334 27.904s31.829333-12.501333 31.829333-27.904V346.325333c0-36.693333 24.704-67.754667 53.888-67.754666 29.013333 0 53.589333 30.634667 53.930667 67.072l-0.512 8.405333v327.808c0 31.786667 11.306667 61.952 31.914666 84.906667a115.328 115.328 0 0 0 85.632 38.698666c32.384 0 63.573333-14.08 85.632-38.698666a126.848 126.848 0 0 0 31.914667-84.906667V346.325333c0-36.693333 24.661333-67.754667 53.888-67.754666 29.226667 0 53.888 31.018667 53.888 67.754666V421.12z" p-id="7499" fill="#ffffff"></path><path d="M858.453333 786.432l72.106667-122.624a27.861333 27.861333 0 0 0 0-28.288l-72.106667-122.624a28.928 28.928 0 0 0-24.96-14.165333h-144.128a28.928 28.928 0 0 0-24.96 14.165333l-72.106666 122.624a27.861333 27.861333 0 0 0 0 28.288l72.106666 122.624c5.12 8.746667 14.634667 14.165333 24.96 14.165333h144.128a28.928 28.928 0 0 0 24.96-14.165333z m-152.32-231.04h110.805334l55.466666 94.293333-55.466666 94.293334H706.133333l-55.424-94.293334 55.466667-94.293333z" p-id="7500" fill="#ffffff"></path><path d="M703.786667 650.410667a57.173333 57.173333 0 0 0 57.642666 56.618666 57.173333 57.173333 0 0 0 57.642667-56.618666 57.173333 57.173333 0 0 0-57.642667-56.618667 57.173333 57.173333 0 0 0-57.642666 56.618667z m57.6 14.165333q1.408 0 2.816-0.298667 1.408-0.256 2.688-0.810666 1.322667-0.512 2.517333-1.28 1.194667-0.768 2.176-1.749334 1.024-1.024 1.792-2.133333 0.810667-1.194667 1.322667-2.474667 0.554667-1.28 0.853333-2.645333 0.256-1.365333 0.256-2.773333t-0.256-2.773334q-0.298667-1.365333-0.853333-2.645333-0.512-1.28-1.28-2.432-0.853333-1.194667-1.834667-2.133333-0.981333-1.024-2.176-1.792-1.194667-0.768-2.517333-1.28-1.28-0.554667-2.688-0.853334-1.408-0.256-2.816-0.256t-2.816 0.256q-1.365333 0.298667-2.688 0.853334-1.28 0.512-2.517334 1.28-1.152 0.768-2.133333 1.749333-1.024 0.981333-1.834667 2.133333-0.768 1.194667-1.322666 2.474667-0.554667 1.28-0.853334 2.645333-0.256 1.365333-0.256 2.773334t0.298667 2.773333q0.256 1.365333 0.810667 2.645333t1.322666 2.432q0.810667 1.152 1.792 2.133334 1.024 1.024 2.176 1.792 1.194667 0.768 2.517334 1.28 1.28 0.554667 2.688 0.853333 1.408 0.256 2.816 0.256z" p-id="7501" fill="#ffffff"></path><path d="M162.389333 510.464a43.690667 43.690667 0 1 1 0 87.381333 43.690667 43.690667 0 0 1 0-87.381333z m0-37.632c-44.8 0-81.322667 36.48-81.322666 81.322667 0 44.8 36.48 81.322667 81.322666 81.322666s81.322667-36.48 81.322667-81.322666-36.48-81.322667-81.322667-81.322667z" p-id="7502" fill="#ffffff"></path><path d="M234.112 554.154667q0-29.653333-21.034667-50.688t-50.688-21.034667q-29.653333 0-50.688 21.034667-20.992 21.034667-20.992 50.688t20.992 50.645333q21.034667 21.034667 50.688 21.034667t50.688-21.034667q21.034667-20.992 21.034667-50.645333z m19.2 0q0 37.589333-26.666667 64.256-26.624 26.666667-64.256 26.666666-37.589333 0-64.256-26.666666t-26.666666-64.256q0-37.632 26.666666-64.256 26.666667-26.666667 64.256-26.666667 37.632 0 64.256 26.666667 26.666667 26.624 26.666667 64.256z m-144.213333 0q0-22.101333 15.616-37.717334t37.674666-15.616q22.101333 0 37.717334 15.616t15.616 37.717334q0 22.058667-15.616 37.674666t-37.717334 15.616q-22.058667 0-37.674666-15.616t-15.616-37.674666z m19.2 0q0 14.08 9.984 24.106666 9.984 9.984 24.106666 9.984 14.122667 0 24.106667-9.984 9.984-9.984 9.984-24.106666 0-14.122667-9.984-24.106667-9.984-9.984-24.106667-9.984-14.08 0-24.106666 9.984-9.984 9.984-9.984 24.106667z" p-id="7503" fill="#ffffff"></path></svg>
                </div>
                <div class="filter-button" @click="resetQueryList();">
                    <svg t="1753254001002" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4469" width="24" height="24"><path d="M867.89 574.16a30.73 30.73 0 0 0-37.52 21.92c-38 144.83-169.31 246-319.25 246a330.71 330.71 0 0 1-306.27-206.82h60.29l-92.78-123.5-91.82 123.5h58.88q1.23 3.72 2.53 7.4A391.65 391.65 0 0 0 511.12 903.5c177.86 0 333.58-120 378.69-291.82a30.73 30.73 0 0 0-21.92-37.52zM153.88 452.57a30.69 30.69 0 0 0 37.35-22.2A329.68 329.68 0 0 1 511.12 182c136.8 0 256.58 82 306.4 207h-60.66l92.78 123.5L941.46 389h-58.58a391.63 391.63 0 0 0-751.2 26.24 30.73 30.73 0 0 0 22.2 37.33z" fill="#ffffff" p-id="4470"></path></svg>
                </div>
                <div class="filter-button" @click="showSearchInput = !showSearchInput;getAirList();">
                    <svg t="1753254065144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5562" width="24" height="24"><path d="M434.04236287 44.20741074c47.51347314 0 92.96927639 9.25951509 136.27387809 27.87207697 43.30460299 18.61256188 80.62325584 43.49166377 111.95595854 74.73083609 31.23917361 31.23917361 56.21180589 68.55782644 74.73083736 111.95595983 18.5190302 43.30460299 27.87207697 88.76040496 27.87207569 136.27387809 0 40.77927987-6.64066288 79.87501141-19.92198734 117.19366425-13.28132575 37.31865285-32.26800789 71.27020906-56.77298824 101.66760914l221.38659525 221.10600408c7.48243639 7.48243639 11.22365458 16.74195148 11.22365587 27.6850149 0 11.13012418-3.74121819 20.48317098-11.13012549 27.87207696-7.38890599 7.38890599-16.64842109 11.13012418-27.87207567 11.1301242-10.94306341 0-20.2025785-3.74121819-27.68501619-11.22365458L652.99716667 669.08440543c-30.49092918 24.59851073-64.34895501 43.49166377-101.66760914 56.77298822-37.31865285 13.28132575-76.41438439 19.92198734-117.19366426 19.92198733-47.51347314 0-92.96927639-9.25951509-136.2738781-27.87207695-43.30460299-18.61256188-80.62325584-43.49166377-111.95595853-74.73083608-31.23917361-31.23917361-56.21180589-68.55782644-74.73083738-111.95595854-18.5190302-43.30460299-27.87207697-88.76040496-27.87207697-136.27387808 0-47.51347314 9.25951509-92.87574599 27.87207697-136.2738781 18.61256188-43.30460299 43.49166377-80.62325584 74.73083738-111.95595983 31.23917361-31.23917361 68.55782644-56.21180589 111.95595853-74.73083607 43.30460299-18.5190302 88.66687456-27.77854658 136.1803477-27.77854659z m0 77.91087195c-36.94453129 0-72.29904465 7.20184522-105.97000969 21.60553694-33.67096505 14.40369044-62.75893838 33.85802582-87.07685663 58.17594537s-43.77225494 53.40589159-58.17594537 87.07685663c-14.40369044 33.67096505-21.60553565 69.02547839-21.60553566 105.9700097s7.20184522 72.29904465 21.60553566 105.97000967c14.40369044 33.67096505 33.85802582 62.75893838 58.17594537 87.07685663 24.41144995 24.31791956 53.40589159 43.77225494 87.07685663 58.17594539 33.67096505 14.40369044 69.02547839 21.60553565 105.97000969 21.60553566s72.29904465-7.20184522 105.97000967-21.60553566c33.67096505-14.40369044 62.75893838-33.85802582 87.07685665-58.17594539 24.41144995-24.41144995 43.77225494-53.40589159 58.17594537-87.07685663 14.40369044-33.67096505 21.60553565-69.02547839 21.60553566-105.97000967s-7.20184522-72.29904465-21.60553566-105.9700097c-14.40369044-33.67096505-33.85802582-62.75893838-58.17594537-87.07685663-24.31791956-24.41144995-53.40589159-43.77225494-87.07685665-58.17594537-33.67096505-14.40369044-69.02547839-21.60553565-105.97000967-21.60553694z m0 0" fill="#ffffff" p-id="5563"></path></svg>
                </div>
            </div>
        </div>
 
        <div class="search-container" v-show="showSearchInput">
            <a-input-search
                v-model:value="pageQuery.AirLineName"
                @search="getAirList"
                placeholder="输入航线名称"
            />
        </div>

        <div class="routers-container">
            <div class="file-container">
                <div class="tip">
                    <div class="info">文件夹</div>

                    <a-tooltip trigger="click" placement="bottom">
                        <template #title>
                            <div class="create-folder-contatiner">
                                <a-input size="small" v-model:value="createFolderForm.folderName" placeholder="请输入文件名称" style="background:red;"></a-input>
                                <a-button type="primary" size="small" @click="createFolder">创建</a-button>
                            </div>
                        </template>
                        <div  v-show="props.title != '选择航线'">
                            <FileAddOutlined />
                        </div>
                      </a-tooltip>

                    
                </div>
                <div>
                    <a-directory-tree
                            multiple
                            :tree-data="treeData"
                            :defaultExpandAll="true"
                            :autoExpandParent="true"
                            :field-names="fieldNames"
                            :expandedKeys="expandedKeys"
                        
                        >
                        <template #title="{ data }">
                            <span  @click="folderClick(data)">{{ data.path }}</span>
                            <span class="tree-node-actions" @click="deleteFolder(data)" v-show="props.title != '选择航线'">
                                <DeleteOutlined />
                            </span>
                        </template>
                    </a-directory-tree>
                </div>
            </div>
            <div class="routers-list">
                <div class="tip">
                    <div class="info">航线（{{ariLineCount}}）</div>
                    <div v-show="props.title != '选择航线'">
                        <ImportOutlined @click="importAirLine" />
                        &nbsp;
                        <PlusOutlined @click="createAirLine" />
                    </div>
                </div>
                <div class="slide-container">
                    <div class="ari-line" v-for="(item,index) in ariLineList" :key="index" >
                        <div class="title">
                            <div style="flex:1;">
                                {{item.airLineName}}
                            </div>
                            <div style="">
                                <!-- <EditOutlined @click="editLine" /> -->
                                &nbsp;
                                <a-dropdown >
                                    <MoreOutlined />
                                    <template #overlay>
                                        <a-menu>
                                            <a-menu-item  @click="checkAriLine(item)" v-if="props.title == '选择航线'">
                                                <a href="javascript:;">选择</a>
                                            </a-menu-item>
                                            <a-menu-item  @click="toEditAirLine(item,'edit')" v-if="props.title != '选择航线'">
                                                <a href="javascript:;">预览</a>
                                            </a-menu-item>
                                            <a-menu-item @click="toEditAirLine(item,'edit')" v-if="props.title != '选择航线'">
                                                <a href="javascript:;">编辑</a>
                                            </a-menu-item>
                                            <a-menu-item @click="downloadAirLine(item)" >
                                                <a href="javascript:;">下载</a>
                                            </a-menu-item>
                                            <a-menu-item @click="deletePlan(item.id)" v-if="props.title != '选择航线'">
                                                <a href="javascript:;">删除</a>
                                            </a-menu-item>
                                        </a-menu>
                                    </template>
                                </a-dropdown>
                            </div>
                        </div>
                        <div class="type" >
                            <img src="/public/iocn/uav.png" alt="">
                            Matrice 4TD
                        </div>
                        <div class="time">
                            <div>
                                更新时间：{{item.createTime}}
                            </div>
                        </div>
                        
                    </div> 
                </div>
            </div>
        </div>

        <!-- 导入航线弹窗 -->
        <div class="import-airline" v-if="importAirLineShow">
            <div class="import-airline-title">
                导入航线
            </div>
            <div class="import-airline-box">
                <a-form
                    ref="formRef"
                    :layout="'vertical'"
                    :model="submitForm"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    :size="'middle'"
                >
                        <a-form-item ref="name" label="计划名称" name="taskName">
                            <a-input v-model:value="submitForm.airLineName" placeholder="请输入航线名称" />
                        </a-form-item>

                        <a-form-item ref="outOfContact" label="航线类型" name="lossOfControlAction">
                            <div class="radio-box">
                                <div v-for="(item,index) in templateTypeOptions" :key="index"
                                    :class=" submitForm.airLineType == item.value ? 'radio-item-active':'radio-item'" 
                                    @click="submitForm.airLineType = item.value"
                                    >
                                    {{item.label}}
                                </div>
                            </div>
                       
                        </a-form-item>
                </a-form>

                <a-upload-dragger
                    v-model:fileList="fileList"
                    name="xmlFile"
                    :multiple="false"
                    :before-upload="beforeUpload" 
                    @change="handleDragUploadChange"
                    
                >
                    <p class="ant-upload-drag-icon">
                        <InboxOutlined style="color:#3A57E8;" />
                    </p>
                    <p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
                    <p class="ant-upload-hint">
                        单次上传1个文件，仅支持.kmz格式文件
                    </p>
                </a-upload-dragger>
            </div>

            <div class="import-airline-footer">
                <div>
                    <a-button type="default" @click="importAirLineShow = false">取消</a-button>
                </div>
                <div>
                    <a-button type="primary" @click="handleManualUpload">创建</a-button>
                </div>
            </div>
        </div>

        <!-- 创建目录弹窗 -->
        <!-- <Modal
            title="添加目录"
            :open="visible"
            @ok="handleGetData"
            @cancel="handleCancel"
            :destroyOnClose="true"
            :width="200"
            
        >
          
            <div style="padding:40px;">
                <div> 文件名称：</div>
                <a-input v-model:value="createFolderForm.folderName"></a-input>
            </div>
        </Modal> -->
    </div>    
</template>
<script lang="ts" setup>
    import { DeleteOutlined,ExclamationCircleOutlined,PlusOutlined,FileAddOutlined,LeftOutlined,ImportOutlined,MoreOutlined,EditOutlined,InboxOutlined } from '@ant-design/icons-vue';
    import {ref,defineEmits,defineProps,createVNode} from 'vue'
    
    import { getAirLineList,uploadXmlFile,deleteAirLine,addAirLine,getListAirLineFolder,deleteAirLineFolder,createAirLineFolder, editAirLine} from '@/api/sys/workplan';
    import { Modal, message } from 'ant-design-vue';
    const emit = defineEmits(["checkAriLine","createAirLine","previewAirLine","closeAirLine","setCurrentFolder","startEditAirLine"])

    const props = defineProps(["title"])

    import {templateTypeOptions} from '../waylineConfig/index';

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

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

    // 关闭航线弹窗
    const closeAirLine = () => {
        emit("closeAirLine");
    }

    const fieldNames = ref({
        title: 'path',      
        key: 'id',         
        children: 'children'    
    })

    // 上传文件
    const importAirLineShow = ref(false);
    const fileList = ref([]);
    const headers = ref({
        'x-token':'ed973c9d'
    })

    const beforeUpload = ()=>{
        return false; 
    }
    const handleDragUploadChange =(info)=> {
      const status = info.file.status;

      if (status === 'removed') {
        fileList.value = [];
      }
    }

    const labelCol = { span: 24 };

    const wrapperCol = { span: 24 };

    const submitForm = ref({
        "id": "",
        "airLineName": "",            // 航线名称
        "airLineType": "waypoint",             // 航线类型 ： templateType 【waypoint、mapping2d、mappingStrip】
        "uavId": "",
        "flyToFirstPointMode": "",       // 飞向首航点模式:flyToWaylineMode 【safely、pointToPoint】
        "safeTakeoffAltitude": 0,              // 安全起飞高度 ： takeOffSecurityHeight
        "safeTakeoffSpeed": 0,                 // 飞行到首航点速度
        "globalRouteSpeed": 0,                 // 全局航线速度  autoFlightSpeed
        "taskCompletionAction": "",      // 任务完成动作   finishAction  【goHome、autoLand、gotoFirstWaypoint】
        "outOfControlOption": "",        // 失控选项 exitOnRCLost 【goContinue、executeLostAction】
        "typeOfOutOfControlAction": "",  // 失控动作类型  executeRCLostAction 【goBack、landing、hover】
        "globalWayPointType": "",        // 全局航点类型 globalWaypointTurnMode  【toPointAndStopWithDiscontinuityCurvature】
        "ptzControlMode": "",            // 云台控制模式 
        "aircraftYawAngleMode": "",      // 飞行器偏航角模式  
        "wpml": "",                      // 航线文件
        "folder":null
    })

    const handleManualUpload = async () => {

      if (fileList.value.length<1) return;

      const formData = new FormData();
      formData.append('xmlFile', fileList.value[0]?.originFileObj);
        
      console.log("formData",formData.get("xmlFile"));

      return null;
      let res = await uploadXmlFile("默认文件夹/面状航线",formData);

      if(res){

        submitForm.value.wpml = res.path;
        submitForm.value.folder = currentFolderPath.value


        let addAirLineRes =await addAirLine(submitForm.value);

        if(addAirLineRes){
            fileList.value = [];
            importAirLineShow.value = false;
            message.success("操作成功！");
        }else{
            message.error("操作失败！");
        }
        
      }else{
        message.error("操作失败！");
      }
    }

    const showSearchInput = ref(false);


    const createAirLine = () => {
        emit("createAirLine",currentFolderPath.value);
    }

    const checkAriLine = (item)=> {
        emit("checkAriLine",item);
    }

    // 预览航线
    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);

            console.log("jsonObj",jsonObj);
            emit("previewAirLine",jsonObj.kml.Document,currentPreviewWayLine)

        }catch(e){
            console.error(e);
        }

       
    }

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

        const zip = new JSZip();

        const contents = await zip.loadAsync(kmzBlob);

        let xmlData = {
            wayline:null,
            template:null
        }
        // 查找.wpml文件 和 .kmz文件
        for (const [filename, file] of Object.entries(contents.files)) {

            // wpml
            if (filename.toLowerCase().endsWith('.wpml')) {
                xmlData.wayline =  await file.async('text');
            }

            // kmz
            if (filename.toLowerCase().endsWith('.kml')) {
               xmlData.template =  await file.async('text');
            }
            
        }

        return xmlData;
        
        throw new Error('KMZ文件中未找到WMPL文件');
    }

    const importAirLine = () => {
        emit("setCurrentFolder",currentFolderPath.value);
        // importAirLineShow.value = true;
    }

    const expandedKeys = ref<string[]>([]);
    const selectedKeys = ref<string[]>([]);
    const treeData = ref()

    const getFolder = async () => {
        let res = await getListAirLineFolder({});
        treeData.value = recursionTreeData(res);
    }

    // 递归处理目录树展开
    const recursionTreeData = (data) => {
       for(let i=0;i<data.length;i++){
            data[i].isLeaf = true;
            expandedKeys.value?.push(data[i].id);
            if(data[i].children && data[i].children.length>0){
                recursionTreeData(data[i].children)
            }
       }
       return data;
    }

    

    getFolder();
    


    const ariLineList = ref([])
    const ariLineCount = ref(0);

    const pageQuery = ref({
        Ascending:false,
        UavTypeId:null,
        AirLineType:null,
        AirLineName:null,
        Folder:null,
        page:1,
        limit:10,
        key:null,
     })

    const getAirList = async ()=>{
        let res = await getAirLineList(pageQuery.value);
        ariLineCount.value = res.total;
        ariLineList.value = res.items;
    }

    

    getAirList();

    // 重置条件
    const resetQueryList = () => {
        pageQuery.value = {
            Ascending:false,
            UavTypeId:null,
            AirLineType:null,
            AirLineName:null,
            Folder:null,
            page:1,
            limit:10,
            key:null,
        };
        getAirList();
    }

    const editLine = ()=>{

    }


    const deletePlan = async (id) => {
        Modal.confirm({
          title: '是否确认删除?',
          icon: createVNode(ExclamationCircleOutlined),
          onCancel() {},
          async onOk() {
            let res = await deleteAirLine({id:id});
            if(res){
                message.success("操作成功!");
                getAirList();
            }else{
                message.error("操作失败!");
            }
          },
        });
    }

    // 
    const currentFolder = ref();
    const currentFolderPath = ref(null);
    // 选择目录
    const folderClick = (item)=>{
        if(!item.ancestor.match("/")){
            pageQuery.value.Folder = null;
        }else{
            pageQuery.value.Folder = item.ancestor;
        }
        
        currentFolderPath.value = item.ancestor;
        currentFolder.value = item.id;
        getAirList();
    }

    // 删除目录
    const deleteFolder =async (data) => {
        Modal.confirm({
          title: '是否确认删除?',
          icon: createVNode(ExclamationCircleOutlined),
          onCancel() {},
          async onOk() {
            let res = await deleteAirLineFolder({folderId:data.id});
            if(res){
                message.success("操作成功!");
                getAirList();
            }else{
                message.error("操作失败!");
            }
            getFolder();
          },
        });
    }

    // 创建目录
    const visible = ref(false);
    const createFolderForm = ref({
        folderName:null,
        parentId:currentFolder.value
    })
    const createFolder = () => {   
        handleGetData();
    }

    const handleGetData =async ()=>{
        if(!createFolderForm.value.folderName){
            message.warning("文件夹名称不能为空！");
            return null;
        }

        createFolderForm.value.parentId = currentFolder.value

        let res = await createAirLineFolder(createFolderForm.value);
        if(res){
            message.success("操作成功！");
            getFolder();
        }else{
            message.error("操作失败！");
        }

        createFolderForm.value.folderName = null;
        createFolderForm.value.parentId = null;
        visible.value = false;
    }
    
    
    const handleCancel = ()=>{
        visible.value = false;
    }


    // 编辑事件
    const toEditAirLine =async (airLine,type) => {

        currentPreviewWayLine.value = airLine;

        try{
            let response  =  await axios.get(airLine.wpml,{responseType: 'arraybuffer'});

            // 解压kmz文件
            let xmlStr =await extractKmz(response.data);

            // 去除 wpml 前缀
            let removeWpmlXmlStr = {
                template:xmlStr.template.replace(/wpml:/g,""),
                wayline:xmlStr.wayline.replace(/wpml:/g,"")
            }

            // 转换成josn数据
            const parser = new XMLParser();
            let xmlObj = {
                template:parser.parse(removeWpmlXmlStr.template),
                wayline:parser.parse(removeWpmlXmlStr.wayline),
            }
            
            emit("startEditAirLine",xmlObj,currentPreviewWayLine.value,type)

        }catch(e){
            console.error(e);
        }
    }

    // 下载航线文件
    const downloadAirLine = (item) => {
        window.open(item.wpml,"_blank");
    }

</script>
<style scoped>
.container{
    width:100%;
    height:100%;
    background: #0D0E15;
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
    border-radius: 6px;
}
.title{
    padding:15px;
    color:#fff;
    cursor:pointer;
}
.filter-container{
    padding:0px 15px;
    display:flex;
    gap:8px;
    margin-bottom:12px;
}
.search-container{
    width: calc( 100% -  30px);
    border-radius: 3px;
    margin: 15px;
    border:1px solid #3a57e890;
}
.filter-buttons{
    display:flex;
    gap:8px;
    text-align: center;
    
}
.filter-button{
    width:32px;
    height:32px;
    border-radius: 3px;
    padding-top:4px;
    background:linear-gradient( 90deg, #3F4B71 0%, #333E5E 100%)!important ;
    cursor:pointer;
}
.routers-container{
    display:flex;
    font-size:14px;
    border-top:1px solid rgba(204, 204, 204, 0.219) ;
    height: calc( 100% - 120px);
}
.create-folder-contatiner{
    padding:10px;
    display:flex;
    gap:20px;
}

.file-container{
    width:240px;
    border-right: 1px solid rgba(204, 204, 204, 0.227) ;
    padding:0px;
    display:flex;
    flex-direction: column;
    gap:20px;
}
.file-container .tip{
    display: flex;
    color:#fff;
    padding:15px 10px;
    background: linear-gradient( 270deg, rgba(89,98,128,0) 0%, #2D3349 100%);
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
    position:relative;
}
.file-container .tip::before{
    content:"";
    height: 0px;
    width:0px;
    border-top:6px solid #2C45B8;
    border-left:6px solid #2C45B8;
    border-right: 6px solid rgba(0,0,0,0);
    border-bottom: 6px solid rgba(0,0,0,0);
    position:absolute;
    top:0px;
    left:0px;
}
.file-container .tip .info{
    flex:1;
}


.routers-list{
    flex:1;
}

.routers-list .tip{
    display: flex;
    color:#fff;
    padding:15px 10px;
    background: linear-gradient( 270deg, rgba(89,98,128,0) 0%, #2D3349 100%);
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
    position:relative;
}
.routers-list .tip .info{
    flex:1;
}
.routers-list .tip::before{
    content:"";
    height: 0px;
    width:0px;
    border-top:6px solid #2C45B8;
    border-left:6px solid #2C45B8;
    border-right: 6px solid rgba(0,0,0,0);
    border-bottom: 6px solid rgba(0,0,0,0);
    position:absolute;
    top:0px;
    left:0px;
}

.routers-list .slide-container{
    padding:30px;
    height: calc( 100% - 50px);
    overflow-y:auto;
}
.ari-line{
    color:#fff;
    padding:5px 10px;
    margin-bottom:10px;
    position:relative;
    font-size: 13px;
    border-radius: 3px;
    background: linear-gradient( 132deg, #323D62 0%, #525F83 100%);
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
    border-radius: 10px;
}

.ari-line::before{
    content:"";
    width:2px;
    height:18px;
    position:absolute;
    top:12px;
    left:0px;
    background:#3A57E8;
}

.ari-line .title{
    width: 100%;
    line-height: 28px;
    padding:2px 0px;
    border-bottom:1px solid #4E5778;
    display: flex;
}

.ari-line .type{
    padding:12px 0px;

}

.ari-line .type img{
    width:16px;
}



.ari-line .time{
    font-size: 12px;
    color:#ccc;
    display:flex;
    line-height:24px;
}

.import-airline{
    width:100%;
    height:100%;
    background:#1c1c1c;
    position:absolute;
    top:0px;
    left:0px;
    z-index:999;
    text-align: center;
    color:#fff;
}

.import-airline-title{
    padding:20px;
    background: #282828;
}
.import-airline-box{
    padding:20px;
    color:#fff;
}
.import-airline-footer{
    width:100%;
    position: absolute;
    bottom:0px;
    left:0px;
    padding:12px 20px;
    display: flex;
    justify-content: flex-end;
    gap:15px;
    background: #282828;
}


.radio-box{
    width:100%;
    display: flex;
    overflow: hidden;
    border:0.5px solid #3B4154 ;
    font-size:13px;
}
.radio-box .radio-item{
    flex:1;
    color:#8A92A6 ;
    text-align: center;
    background:#222738 ;
    padding:5px;
    cursor:pointer;

}

.radio-box .radio-item-active{
    flex:1;
    color:#fff;
    text-align: center;
    background:#3A57E8 ;
    padding:5px;
    cursor:pointer;
}


::v-deep .ant-select-selector{
    border:none!important;
    color:#fff!important;
    background:#3F4150!important ;
    border-radius: 15px!important;
}


::v-deep .ant-select-selection-placeholder {
    color:rgba(255, 255, 255, 0.533)!important;
  }
::v-deep .ant-select-arrow {
    color:rgba(255, 255, 255, 0.533)!important;
  }
::v-deep .ant-select-selection-search-input::placeholder{
    color:rgba(255, 255, 255, 0.933)!important;
}


::v-deep .ant-tree {
    background:none!important;
    color:#fff!important;
}

::v-deep .ant-tree-treenode-selected{
    background:#3a57e877!important;
}

::v-deep .ant-tree-treenode-selected::before{
    background:none!important;
}

::v-deep .ant-tree-treenode-selected::after{
    content:"";
    height:28px;
    width:4px;
    background:#3A57E8;
    position:absolute;
    top:0px;
    left:0px;
}

::v-deep .ant-input{
    background:none!important;
    border:none!important;
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
}

::v-deep .ant-input::placeholder{
    color:rgba(255, 255, 255, 0.533)!important;
}


::v-deep .ant-btn-default{
    background:none!important;
    border:none!important;
    outline:none!important;
    color:#fff!important;
    height:30px !important;
    background:#29305477!important;
}

::v-deep .ant-upload-text{
    color:rgba(255, 255, 255, 0.533)!important;
    font-size:14px!important;
}

::v-deep .ant-upload-hint{
    color:rgba(255, 255, 255, 0.533)!important;
    font-size:14px!important;
}

::v-deep .ant-upload-drag-icon{
    color:#3A57E8!important;
}
::v-deep .ant-upload-wrapper .ant-upload-list{
    color:#fff;
}

::v-deep  .ant-upload-list-item-actions .anticon{
    color:#fff;
}




::v-deep .ant-form-item-label > label{
    color:#ffffff!important;
    font-size:12px;
}


::v-deep .ant-select-selector{
    border:none!important;
    color:#fff!important;
    background:linear-gradient( 90deg, #3F4B71 0%, #333E5E 100%)!important ;
    border-radius: 15px!important;
}


::v-deep .ant-select-selection-placeholder {
    color:rgba(255, 255, 255, 0.533)!important;
  }
::v-deep .ant-select-arrow {
    color:rgba(255, 255, 255, 0.533)!important;
  }
::v-deep .ant-select-selection-search-input::placeholder{
    color:rgba(255, 255, 255, 0.933)!important;
}


::v-deep .ant-tree {
    background:none!important;
    color:#fff!important;
}

::v-deep .ant-tree-treenode-selected{
    background:#3a57e877!important;
}

::v-deep .ant-tree-treenode-selected::before{
    background:none!important;
}

::v-deep .ant-tree-treenode-selected::after{
    content:"";
    height:28px;
    width:4px;
    background:#3A57E8;
    position:absolute;
    top:0px;
    left:0px;
}




::v-deep .ant-btn-default{
    background:none!important;
    border:none!important;
    outline:none!important;
    color:#fff!important;
    height:30px !important;
    background:#29305477!important;
}

::v-deep .ant-btn-primary{
    background:#3A57E8!important;
    border-radius:3px!important;
}

::v-deep .ant-radio-button-wrapper-checked{
    background:#3A57E8!important;
}

::v-deep .ant-radio-button-wrapper{
    border-radius: 2px !important;
}

::v-deep .ant-switch{
    background:#ccc!important;
}

::v-deep .ant-switch-checked{
    background:#3A57E8!important;
}


::v-deep .ant-input{
    border:none!important;
    border-radius: 15px!important;
    color:#fff!important;
}
::v-deep .ant-input::placeholder{
    color:rgba(255, 255, 255, 0.533)!important;
}

::v-deep .ant-upload-drag{
    border-radius:0px!important;
    border:1px dashed #3B4154!important;
}

::v-deep .anticon-delete{
    color:#fff!important;
}

.tree-node-actions{
    display:inline-block;
    float:right;
    font-size:12px;
}
.tree-node-actions span{
    margin:0px 2px;
}
</style>