<template>
    <div class="container">
        <div class="config-item">
            <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 class="config-item">
            <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 class="config-item">
            <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 class="config-item">
            <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">
            <div class="item-title">
                <div class="label">
                    云台偏航角
                </div>
                <div>
                    {{ props.currentAirPoint.cameraHorizontalAngle }} °
                </div>
            </div>
            <div class="item-content">
                <a-slider v-model:value="props.currentAirPoint.cameraHorizontalAngle" :min="-180" :max="180" :step="0.01" />
            </div>
        </div>

        <div class="config-item">
            <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">
            <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>
</template>

<script lang="ts" setup>

import {ref,defineProps,watch} from 'vue';

const props = defineProps(['currentAirPoint'])


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
})

</script>

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

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

.config-item .item-content{
    margin-top:12px;
}
.config-item .item-title{
    display:flex;
}
.config-item .item-title .label{
    flex:1;
}

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