<template>
    <div class="containner">
        <div class="title">
            <LeftOutlined @click="backPage" />
            <div>面状航线</div>
            <SaveOutlined/>

            <div style="flex:1;">
                <a-input  size="small" placeholder="航线名称" />
            </div>
        </div>
        <div class="area-info">
            <div class="item">
                <div>测区面积</div>
                <div>{{props.airInfo.area}} m²</div>
            </div>
            <div class="bar"></div>
            <div class="item">
                <div>航线长度</div>
                <div>{{props.airInfo.length}} km</div>
            </div>
            <div class="bar"></div>
            <div class="item">
                <div>预计用时</div>
                <div>{{props.airInfo.time}} mins</div>
            </div>
            <div class="bar"></div>
            <div class="item">
                <div>照片数量</div>
                <div>{{props.airInfo.picture}} </div>
            </div>
            
        </div>

        <div class="area-options" >

            <div class="item">
                <div class="label">参考起飞点</div>
                <div class="content">
                    <a-button type="link" style="color:#408eff" @click="setFlyPoint()">
                        <img src="./start-fly.png" style="width:24px;height:24px;position:relative;left:-2px;top:-2px;" alt="">
                        设置起飞点
                    </a-button>
                </div>
            </div>

          
            <div class="item">
                <div class="label">GSD(地面采样距离)</div>
                <div class="content">
                    <a-input style="width:100px;" placeholder="" v-model:value="calculatParam.gsd"></a-input>
                </div>
                <div class="unit"> cm/pixel</div>
            </div>

            <div class="item">
                <div class="label">航线高度</div>
                <div class="content">
                    <a-input style="width:100px;" placeholder="" v-model:value="calculatParam.height"></a-input>
                </div>
                <div class="unit"> m</div>
            </div>

            <div class="item">
                <div class="label">航向重叠率</div>
                <div class="content">
                    <a-input style="width:100px;" placeholder="" v-model:value="calculatParam.overlapX"></a-input>
                </div>
                <div class="unit"> % </div>
            </div>

            <div class="item">
                <div class="label">旁向重叠率</div>
                <div class="content">
                    <a-input style="width:100px;" placeholder="" v-model:value="calculatParam.overlapY"></a-input>
                </div>
                <div class="unit"> %</div>
            </div>

            <div class="item">
                <div class="label">主航线角度</div>
                <div class="content">
                    <a-input style="width:100px;" placeholder="" v-model:value="calculatParam.overlapAngle"></a-input>
                </div>
                <div class="unit"> °</div>
            </div>


            <div class="item flex-column">
                <div class="label">飞向首航点模式</div>
                <div class="content">
                    <div class="radio-box">
                        <div v-for="(item,index) in missionConfigOptions.flyToWaylineMode" :key="index"
                            :class=" missionConfig.flyToWaylineMode == item.value ? 'radio-item-active':'radio-item'" 
                            @click="missionConfig.flyToWaylineMode = item.value"
                            >
                            {{item.label}}
                        </div>
                    </div>
                </div>
                <div class="description">
                    <img src="/map/flyToWaylineMode.png" alt="">
                </div>
            </div>

            <div class="item">
                <div class="label">安全起飞高度</div>
                <div class="content">
                    <a-input style="width:100px;"  placeholder="" v-model:value="missionConfig.takeOffSecurityHeight"></a-input>
                </div>
                <div class="unit"> m</div>
            </div>

            <div class="item">
                <div class="label">全局航线过渡速度</div>
                <div class="content">
                    <a-input style="width:100px;" placeholder="" v-model:value="missionConfig.globalTransitionalSpeed"></a-input>
                </div>
                <div class="unit"> m/s</div>
            </div>

            <div class="item">
                <div class="label">全局返航高度</div>
                <div class="content">
                    <a-input style="width:100px;" placeholder="" v-model:value="missionConfig.droneInfo.droneEnumValue"></a-input>
                </div>
                <div class="unit"> m</div>
            </div>

            <div class="item flex-column">
                <div class="label">航线结束动作</div>
                <div class="content">
                    <div class="radio-box">
                        <div v-for="(item,index) in missionConfigOptions.finishAction" :key="index"
                            :class=" missionConfig.finishAction == item.value ? 'radio-item-active':'radio-item'" 
                            @click="missionConfig.finishAction = item.value"
                            >
                            {{item.label}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="item flex-column">
                <div class="label">失控是否继续执行航线</div>
                <div class="content">
                    <div class="radio-box">
                        <div v-for="(item,index) in missionConfigOptions.exitOnRCLost" :key="index"
                            :class=" missionConfig.exitOnRCLost == item.value ? 'radio-item-active':'radio-item'" 
                            @click="missionConfig.exitOnRCLost = item.value"
                            >
                            {{item.label}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="item flex-column" v-if="missionConfig.exitOnRCLost == 'executeLostAction'">
                <div class="label">失控动作类型</div>
                <div class="content">
                    <div class="radio-box">
                        <div v-for="(item,index) in missionConfigOptions.executeRCLostAction" :key="index"
                            :class=" missionConfig.executeRCLostAction == item.value ? 'radio-item-active':'radio-item'" 
                            @click="missionConfig.executeRCLostAction = item.value"
                            >
                            {{item.label}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="item flex-column">
                <div class="label">高度模式</div>
                <div class="content">
                    <div class="radio-box">
                        <div v-for="(item,index) in folderConfigOptions.executeHeightMode" :key="index"
                            :class=" folder.executeHeightMode == item.value ? 'radio-item-active':'radio-item'" 
                            @click="folder.executeHeightMode = item.value"
                            >
                            {{item.label}}
                        </div>
                    </div>
                </div>
                <div class="description">
                    <img src="/map/executeHeightMode.png" alt="">
                </div>
            </div>
        

            <div class="item">
                <div class="label">全局航线飞行速度</div>
                <div class="content">
                    <a-input style="width:100px;" placeholder="" v-model:value="folder.autoFlightSpeed"></a-input>
                </div>
                <div class="unit"> m/s</div>
            </div>

            
            
           
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ref,defineEmits,defineProps} from 'vue'
import { SaveOutlined,LeftOutlined } from '@ant-design/icons-vue';
import {missionConfigOptions,folderConfigOptions}  from '../waylineConfig/index.ts';

const emits = defineEmits(["setFlyPoint","exitDraw"])

const props = defineProps(["airInfo","polygonAirForm"])

const airInfo = ref({
    area:0.0,
    length:0.0,
    time:'4m 11s',
    picture:23
})

const setFlyPoint = ()=>{
    emits("setFlyPoint");
}

// 航线计算参数
const calculatParam = ref({
    gsd:5,
    overlapY:80,
    overlapX:70,
    overlapAngle:0,
    height:120,
})

// 航线基本信息
const missionConfig = ref(
    {
        "flyToWaylineMode": "safely",
        "finishAction": "goHome",
        "exitOnRCLost": "executeLostAction",
        "executeRCLostAction": "goBack",
        "takeOffSecurityHeight": 20,
        "globalTransitionalSpeed": 15,
        "globalRTHHeight": 100,
        "droneInfo": {
            "droneEnumValue": 100,
            "droneSubEnumValue": 1
        },
        "autoRerouteInfo": {
            "transitionalAutoRerouteMode": 1,
            "missionAutoRerouteMode": 1
        },
        "waylineAvoidLimitAreaMode": 0,
        "payloadInfo": {
            "payloadEnumValue": 99,
            "payloadSubEnumValue": 2,
            "payloadPositionIndex": 0
        }
    }
)


// 航点基本信息
const folder = ref({
    "templateId": 0,
    "executeHeightMode": "WGS84",
    "waylineId": 0,
    "distance": 410.047576904297,
    "duration": 80.3239784240723,
    "autoFlightSpeed": 10,
    "Placemark": []
})


// 退出绘制
const backPage = ()=>{
    emits("exitDraw")
}

</script>
<style scoped>
.container{
    width:100%;
    height:100%;
    color:#fff;
}

.title{
    padding:20px;
    font-size:16px;
    color:#ffffff;
    display:flex;
    gap:12px;
    line-height:24px;
}

.area-info{
    width:100%;
    border-top:1px solid rgba(255,255,255,0.2);
    border-bottom:1px solid rgba(255,255,255,0.2);
    display:flex;
    padding:20px 0px;
}
.area-info .item{
    flex:1;
    color:#fff;
    text-align: center;
    display:flex;
    gap:12px;
    flex-direction: column;
}

.area-options{
    width:100%;
    height: calc( 100vh - 260px);
    padding:10px;
    overflow-y:auto;
    line-height:32px;
}

.area-options .item{
    padding:10px;
    margin:15px 0px;
    background:#232323;
    color:#fff;
    display:flex;
}
.area-options .item .label{
    flex:1;
}
.area-options .item .content{
    cursor:pointer;
}

.flex-column{
    flex-direction: column;
    gap:10px;
}


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

}

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

.area-options .item .unit{
    min-width: 60px;
    text-align:center;

}


::v-deep .ant-radio-group {
    display: block;
    width: 100%;
}



::v-deep .ant-select-selector{
    border:none!important;
    color:#fff!important;
    background:#3F4150!important ;
    border-radius: 3px!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:#3c3c3c!important ;
    border:none!important;
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
    color:#fff!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:#3F4150!important ;
}
</style>