<template>
    <div class="containner">
        <div class="title">
            <LeftOutlined />
            <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 flex-column">
                <div class="label">选择镜头</div>
                <div class="content">
                    <a-radio-group  button-style="solid" v-model:value="props.polygonAirForm.lensMode">
                        <a-radio-button :value="1">红外</a-radio-button>
                        <a-radio-button :value="2">可见光</a-radio-button>
                      </a-radio-group>
                </div>
            </div>
            <div class="item flex-column">
                <div class="label">采集方式</div>
                <div class="content">
                    <a-radio-group  button-style="solid" v-model:value="props.polygonAirForm.gatherMode">
                        <a-radio-button :value="1">正射采集</a-radio-button>
                        <a-radio-button :value="2">倾斜采集</a-radio-button>
                      </a-radio-group>
                </div>
            </div>
            <div class="item">
                <div class="label">智能摆动拍摄</div>
            </div>
            <div class="item flex-column">
                <div class="label">航线高度模式</div>
                <div class="content">
                    <a-radio-group  button-style="solid" v-model:value="props.polygonAirForm.heightMode">
                        <a-radio-button :value="1">海拔高度</a-radio-button>
                        <a-radio-button :value="2">相对起点高度</a-radio-button>
                        <a-radio-button :value="3">相对地形高度</a-radio-button>
                      </a-radio-group>
                    
                      <div style="margin-top:12px;">
                        <a-input-number v-model:value="props.polygonAirForm.height" :min="1" :max="100000" />
                      </div>
                </div>

                
            </div>
            <div class="item">
                <div class="label">全局航线速度</div>
                <div class="content">
                    <a-input-number style="width:160px" v-model:value="props.polygonAirForm.speed" :min="1" :max="20" />
                </div>
            </div>
            <div class="item">
                <div class="label"> 主航线角度</div>
                <div class="content">
                    <a-input-number width="160px" v-model:value="props.polygonAirForm.angle" :min="0" :max="180" />
                </div>
            </div>
            <div class="item">
                <div class="label"> 高程优化</div>
            </div>
            <div class="item">
                <div class="label"> 完成动作</div>
                   
                <div class="content">

                    <a-select
                        ref="select"
                        style="width:160px;"
                        v-model:value="props.polygonAirForm.complete"
                        >
                        <a-select-option :value="1">自动返航</a-select-option>
                        <a-select-option :value="2">返回航线起始点悬停</a-select-option>
                        <a-select-option :value="3">退出航线模式</a-select-option>
                        <a-select-option :value="4">原地降落</a-select-option>
                    </a-select>
                </div>
                    
            </div>
            
           
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ref,defineEmits,defineProps} from 'vue'
import { SaveOutlined,LeftOutlined } from '@ant-design/icons-vue';
const emits = defineEmits(["setFlyPoint"])

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

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

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

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

::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>