<template>
    <div class="container">
        <div class="header">
            <div class="point-base-info">
                <div class="point-number">
                    航点编号：{{ props.currentAirPoint.id }}
                </div>
                <div class="last-point" @click="changeCurrentAirPoint(props.currentAirPoint.id,'last')">
                    <LeftOutlined />
                </div>
                <div class="next-point" @click="changeCurrentAirPoint(props.currentAirPoint.id,'next')">
                    <RightOutlined />
                </div>
            </div>
            <div class="row-container">
                <div class="config-item">
                    <div class="config-info">
                        <div class="item-title">
                            航点经度
                        </div>
                        <div class="item-content">
                            <a-input-number
                                v-model:value="props.currentAirPoint.lng"
                                :min="-180"
                                :max="180"
                                :step="0.0001"
                                string-mode
                            />
                        </div>
                    </div>
                </div>
        
                <div class="config-item">
                    <div class="config-info">
                        <div class="item-title">
                            航点纬度
                        </div>
                        <div class="item-content">
                            <a-input-number
                                v-model:value="props.currentAirPoint.lat"
                                :min="-90"
                                :max="90"
                                :step="0.0001"
                                string-mode
                            />
                        </div>
                    </div>
                </div>
        
                <div class="config-item">
                    <div class="config-info">
                        <div class="item-title">
                            航点高度
                        </div>
                        <div class="item-content">
                            <a-input-number
                                v-model:value="props.currentAirPoint.alt"
                                :min="0"
                                :step="1"
                                string-mode
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

        <div class="config-item"  v-if="false">
            <div class="item-title">
                <div class="label">
                    飞行器偏航角
                </div>
                <div>
                    {{ props.currentAirPoint.aircraftHorizontalAngle }} °
                </div>
            </div>
            <div class="item-content">
                <a-slider v-model:value="props.currentAirPoint.aircraftHorizontalAngle" :min="-180" :max="180" :step="0.01" />
            </div>
        </div>

       
        <div class="config-item" v-if="false">
            <div class="item-title">
                <div class="label">
                    云台俯仰角
                </div>
                <div class="">
                    {{ props.currentAirPoint.cameraVerticalAngle }} °
                </div>
            </div>
            <div class="item-content">
                <a-slider v-model:value="props.currentAirPoint.cameraVerticalAngle" :min="-180" :max="180" :step="0.01" />
            </div>
        </div>

        <div class="config-item" v-if="false">
            <div class="config-info">
                <div class="item-title">
                    <div class="label">
                        相机焦距
                    </div>
                    <div class="">
                       × {{ props.currentAirPoint.cameraFocalLength }} 
                    </div>
                </div>
                <div class="item-content">
                    <a-slider v-model:value="props.currentAirPoint.cameraFocalLength" :min="1" :max="56"  />
                </div>
            </div>
            <div class="config-delete">
                <DeleteOutlined />
            </div>
        </div>

        <div class="body">
            <div class="config-item" v-for="(item,index) in props.currentAirPoint.actions" :key="index">
                <div class="config-info">
                    <div class="item-title">
                        <div class="label">
                            <img :src="'/map/point-airline/'+item.value+'.svg'" alt="" style="width:24px;">
                            {{ item.name }}
                        </div>
                        <div class="config-delete" @click="deleteAction(index)">
                            <DeleteOutlined />
                        </div>
                    </div>
                    <div class="item-content">
                        <component :is="componentMap[item.value]" :params="item.config.actionActuatorFuncParam" :key="index"></component>
                    </div>
                </div>
            </div>
        </div>

        

    </div>
</template>

<script lang="ts" setup>
import {ref,defineProps,watch,shallowRef,defineAsyncComponent,defineOptions  } from 'vue';

import { DeleteOutlined,LeftOutlined,RightOutlined } from '@ant-design/icons-vue'

// 加载和管理组件
import hover from '../actionComponents/hover.vue';
import rotateYaw from '../actionComponents/rotateYaw.vue';
import gimbalRotate from '../actionComponents/gimbalRotate.vue'
import zoom from  '../actionComponents/zoom.vue'
import orientedShoot from '../actionComponents/orientedShoot.vue'
import startRecord from '../actionComponents/startRecord.vue'
import takePhoto from '../actionComponents/takePhoto.vue'

const componentMap = {
    hover: hover,
    rotateYaw:rotateYaw,
    gimbalRotate:gimbalRotate,
    zoom:zoom,
    orientedShoot:orientedShoot,
    startRecord:startRecord,
    takePhoto:takePhoto,
};

const props = defineProps(['currentAirPoint','airPoints'])



watch(
    ()=>props.currentAirPoint,
    (newVal,oldVal)=>{
        console.log("newVal",newVal);
    }
)
const config = ref({
    id:"1",
    name:"航点",
    lng:118.023154,
    lat:35.21458,
    alt:167.23,
    aircraftHorizontalAngle:0,
    cameraHorizontalAngle:0,
    cameraVerticalAngle:0,
    cameraFocalLength:2,
    focalLength:2
})


//删除动作
const deleteAction = (index) => {
    props.currentAirPoint.actions.splice(index,1);
}

// 切换当前航点
const changeCurrentAirPoint = (id,index) => {
    
}

</script>

<style scoped>
.container{
    width:100%;
    height:100%;
    padding:15px;
    color:#fff;
    overflow-y:auto;
    position: relative;
}

.container .header{
    width:100%;

}

.container .header .point-base-info{
    display:flex;
    gap:10px;
}

.container .header .point-number{
    flex:1;
    font-weight:bold;
}

.container .header .last-point{
    width:30px;
    font-size:18px;
    font-weight:bold;
    text-align: center;
    padding:4px 0px;
    background:#3c3c3c!important;
    cursor:pointer;
    border-radius: 3px;
}


.container .header .next-point{
    width:30px;
    padding:4px 0px;
    font-size:18px;
    font-weight:bold;
    text-align: center;
    background:#3c3c3c!important;
    cursor:pointer;
    border-radius: 3px;
}

.container .body{
    width:100%;
    height: calc( 100% - 160px);
    overflow-y: auto;
}

.point-base-info{
    padding:10px;
}
.row-container{
    display:flex;
}


.config-item {
    color:#fff;
    background:#232323;
    padding:15px 10px;
    margin-bottom:15px;
    display:flex;
    gap:20px;
}

.config-item .config-info{
    flex:1;
}
.config-item .item-content{
    margin-top:12px;
}
.config-item .item-title{
    display:flex;
}
.config-item .item-title .label{
    flex:1;
}
.config-item .config-delete{
    width:20px;
    cursor:pointer;
    font-size:18px;
}

.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-slider .ant-slider-rail{
    background:#fff!important;
}

::v-deep .ant-input-number{
    color:#fff!important;
    background:#3F4150!important;
    border:0px !important;
}

::v-deep .ant-input-number-input{
    color:#fff!important;
    border:0px !important;
}

</style>