<template>
    <div class="container">
        <div class="title">
            新建计划
        </div>
        <div class="body-container">
            <a-form
                ref="formRef"
                :layout="'vertical'"
                :model="submitForm"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                :size="'middle'"
            >
                    <a-form-item ref="name" label="计划名称" name="taskName">
                        <a-input v-model:value="submitForm.taskName" placeholder="请输入计划名称" />
                    </a-form-item>

                    <a-form-item ref="name" label="任务类型" name="taskType">
                        <div class="radio-box">
                            <div v-for="(item,index) in taskTypeOptions" :key="index"
                                :class=" submitForm.taskType == item.value ? 'radio-item-active':'radio-item'" 
                                @click="submitForm.taskType = item.value"
                                >
                                {{item.label}}
                            </div>
                        </div>
                    </a-form-item>

                    <a-form-item ref="name" label="选择航线" name="name">
                        <a-button type="primary" style="width:100%;" @click="selectAriLine" v-show="!submitForm.airLineId">
                            <PlusOutlined />
                            选择航线
                        </a-button>

                        <div class="select-item" v-show="submitForm.airLineId">
                            <div class="item-name">{{submitForm.taskAirLineName}}</div>
                            <div class="item-operate">
                                <MoreOutlined @click="selectAriLine"/>
                            </div>
                        </div>
                    </a-form-item>

                    <a-form-item ref="name" label="选择设备" name="name">
                        <a-button type="primary" style="width:100%;"  @click="selectAircraft" v-show="!submitForm.taskDronePort">
                            <PlusOutlined />
                            选择设备
                        </a-button>

                        <div class="select-item" v-show="submitForm.taskDronePort">
                            <div class="item-name">{{submitForm.taskDronePortName}}</div>
                            <div class="item-operate">
                                <MoreOutlined @click="selectAircraft" />
                            </div>
                        </div>

                    </a-form-item>

                    
                    <a-form-item ref="accuracy" label="任务精度" name="accuracy">

                        <div class="radio-box">
                            <div v-for="(item,index) in waylinePrecisionTypeOptions" :key="index"
                                :class=" submitForm.waylinePrecisionType == item.value ? 'radio-item-active':'radio-item'" 
                                @click="submitForm.waylinePrecisionType = item.value"
                                >
                                {{item.label}}
                            </div>
                        </div>

                        
                    </a-form-item>

                    <a-form-item ref="accuracy" label="任务策略" name="accuracy">

                        <div class="radio-box">
                            <div v-for="(item,index) in periodicFormulaOptions" :key="index"
                                :class=" submitForm.periodicFormula == item.value ? 'radio-item-active':'radio-item'" 
                                @click="submitForm.periodicFormula = item.value"
                                >
                                {{item.label}}
                            </div>
                        </div>
                     
                    </a-form-item> 

                    <div style="display:flex;color:#fff;font-size:12px;padding:20px 0px;">
                        <div style="flex:1;">智能巡检</div>
                        <div>
                            <a-switch v-model:checked="submitForm.aiInspection"
                                checked-color="#3A57E8"
                                un-checked-color="#cccccc"
                            />
                        </div>
                    </div>

                    <a-form-item ref="outOfContact" label="返航高度（相对机场返航高度）" name="outOfContact">
                        <div class="return-height">
                            <div @click="submitForm.returnAltitude-=100">-100</div>
                            <div @click="submitForm.returnAltitude-=10">-10</div>
                            <div @click="submitForm.returnAltitude-=1">-1</div>
                            <div>
                                <a-input type="text" size="small" v-model:value="submitForm.returnAltitude" style="width:40px;"></a-input>
                            </div>
                            <div>m</div>
                            <div @click="submitForm.returnAltitude+=1">+1</div>
                            <div @click="submitForm.returnAltitude+=10">+10</div>
                            <div @click="submitForm.returnAltitude+=100">+100</div>
                        </div>
                    </a-form-item>

                    <a-form-item ref="outOfContact" label="航线飞行中失控" name="lossOfControlAction">
                        <div class="radio-box">
                            <div v-for="(item,index) in lossOfControlActionOptions" :key="index"
                                :class=" submitForm.lossOfControlAction == item.value ? 'radio-item-active':'radio-item'" 
                                @click="submitForm.lossOfControlAction = item.value"
                                >
                                {{item.label}}
                            </div>
                        </div>
                   
                    </a-form-item>

                    <a-form-item ref="outOfContact" label="完成动作" name="outOfContact" v-if="submitForm.lossOfControlAction == 1">
                        <div class="radio-box">
                            <div v-for="(item,index) in continuationModeOptions" :key="index"
                                    :class=" submitForm.continuationMode == item.value ? 'radio-item-active':'radio-item'" 
                                    @click="submitForm.continuationMode = item.value"
                                >
                                {{item.label}}
                            </div>
                        </div>
                    </a-form-item>
                
                 
            </a-form>
        </div>
        <div class="footer-container">
            <div>
                <a-button  @click="resetForm" style="width:100%;">取消</a-button>
            </div>
            <div>
                <a-button style="width:100%;" type="primary" @click="onSubmit">确定</a-button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, defineEmits, defineProps, watch } from "vue";
import { PlusOutlined,LeftOutlined,DeleteOutlined,MoreOutlined } from '@ant-design/icons-vue';
import { addTask,editTask } from "@/api/sys/workplan";
import { Modal, message } from 'ant-design-vue';
const formRef = ref();
const labelCol = { span: 24 };
const wrapperCol = { span: 24 };
const props = defineProps(["checkedAriLine","checkedDronePort","formData"]);



// const submitForm = ref({
//     taskName:null,               // 任务名称
//     taskType:0,                  // 任务类型
//     taskDronePort:null,          // 执行机场s
//     taskAirLine:null,            // 航线id
//     returnAltitude:0,            // 返航高度
//     lossOfControlAction:"executeLostAction",    // 返航失控动作
//     continuationMode:"goBack",       // 续飞模式
//     aiInspection:null,           // AI巡检            
//     periodicFormula:0,        // 周期公式
//     airLineId:1,                 // 航线记录id
//     waylinePrecisionType:0,   // 任务精度
//     taskAirLineName : null,
//     taskDronePortName : null,
// })
const submitForm = ref({
  "id": null,
  "taskName": null,
  "taskType": 0,
  "taskAirLineName": null,
  "taskDronePortName": null,
  "taskDronePort": null,
  "taskAirLine": null,
  "returnAltitude": 0,
  "lossOfControlAction": 0,
  "continuationMode": null,
  "aiInspection": null,
  "status": 0,
  "periodicFormula": null,
  "airLineId": null,
  "createId": 0,
  "createTime": "",
  "waylinePrecisionType": 0,
  "scheduledStartTime": "",
  "scheduledEndTime": "",
  "executeTime": "",
  "completedTime": "",
  "planExecuteDuration": 0,
  "actualExecuteDuration": 0,
  "workspaceId": null,
  "expectedFileCount": 0,
  "uploadedFileCount": 0,
  "flightId": null,
  "reason": null
})


if(props.formData){

    submitForm.value = props.formData
    console.log("formData",props.formData);
}

watch(
    ()=>props.checkedAriLine,
    (newVal,oldVal)=>{
        submitForm.value.taskAirLineName = newVal.airLineName;
        submitForm.value.airLineId = newVal.id;
    }
)

watch(
    ()=>props.checkedDronePort,
    (newVal,oldVal)=>{
        console.log("newVal",newVal);
        submitForm.value.taskDronePortName = newVal.name;
        submitForm.value.taskDronePort = newVal.id;
    }
)

const emit = defineEmits(['selectAriLine','cancleCraete',"selectAircraft","successCreatePlan"]);

const removeAirLine = ()=>{
    props.checkedAriLine.value = {};
}

const selectAriLine = ()=> {
    emit("selectAriLine",true)
}

const selectAircraft = ()=>{
    emit("selectAircraft",true)
}

// 任务类型
const taskTypeOptions = ref([
    {
        value:0,
        label:"普通任务"
    },
    // {
    //     value:1,
    //     label:"蛙跳任务"
    // }
])

// 任务精度
const waylinePrecisionTypeOptions = ref([
    {
        value:0,
        label:"高精度RTK"
    },
    {
        value:1,
        label:"GNSS"
    }
])

// 飞行中失控
const lossOfControlActionOptions = ref([
    {
        value:0,
        label:"继续执行航线"
    },{
        value:1,
        label:"执行失控动作"
    }
])

// 失控动作
const continuationModeOptions = ref([
    {
        value:0,
        label:"返航"
    },{
        value:1,
        label:"悬停"
    },{
        value:2,
        label:"降落"
    }
])

// 周期公式
const periodicFormulaOptions = ref([
    {
        value:0,
        label:"立即"
    },{
        value:1,
        label:"单次定时"
    },{
        value:2,
        label:"重复定时"
    },{
        value:3,
        label:"继续执行"
    }
])

const rules = {

};

const onSubmit =async () => {

    if(props.formData){
        // 编辑
        let data = {...submitForm.value}


        let res = await editTask(data);
        if(res){
            message.success("操作成功！");
            emit("successCreatePlan");
        }else{
            message.error("操作失败！");
        }
    }else{
        // 创建
        let res = await addTask(submitForm.value);
        if(res){
            message.success("操作成功！");
            emit("successCreatePlan");
        }else{
            message.error("操作失败！");
        }
    }

    return null;
    formRef.value.validate().then(() => {
    }).catch(error => {
      console.log('error', error);
    });
};

const resetForm = () => {
    emit("cancleCraete");
    formRef.value.resetFields();
};
</script>

<style scoped>
.container{
    width:100%;
    height:100%;
    padding:10px 20px;
}
.title{
    padding:15px 0px;
    color:#fff;
}
.body-container{
    width:100%;
    padding:0px;
    margin:0px;
    height: calc( 100% - 110px);
    overflow-y: auto;
}

.footer-container{
    padding:20px;
    width: calc( 100% - 10px);
    position:absolute;
    bottom:0px;
    left:0px;
    display:flex;
    gap:20px;
}
.footer-container div{
    flex:1;
}
.ant-form-item{
    margin-bottom:12px;
}

.select-item{
    width:100%;
    display: flex;
    color:#fff;
    border:1px solid rgba(204, 204, 204, 0.787);
    padding:0px;

}

.select-item .item-name{
    flex:1;
    border-right:1px solid rgba(204, 204, 204, 0.787);
    padding:4px;
}
.select-item .item-operate{
    width:40px;
    text-align: center;
    padding:4px;
    cursor: pointer;
}

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

.return-height{
    display:flex;
    gap:5px;
}

.return-height div{
    flex:1;
    color: #fff ;
    background:#333B56;
    font-size:12px;
    padding:3px;
    text-align: center;
    cursor:pointer;
}

::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:#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-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{
    background:#222738!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;
}
</style>