<template>
    <div class="container">
        <div class="title">
            新建计划
        </div>
        <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="name">
             <a-input v-model:value="submitForm.name" />
            </a-form-item>

            <a-form-item ref="name" label="任务类型" name="name">
                <a-radio-group v-model:value="submitForm.type" button-style="solid">
                    <a-radio-button :value="1">普通任务</a-radio-button>
                    <a-radio-button :value="2">蛙跳任务</a-radio-button>
                  </a-radio-group>
            </a-form-item>

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

            </a-form-item>

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

            <a-form-item ref="accuracy" label="任务精度" name="accuracy">
                <a-radio-group v-model:value="submitForm.accuracy" button-style="solid">
                    <a-radio-button :value="1">高精度RTK</a-radio-button>
                    <a-radio-button :value="2">GNSS</a-radio-button>
                  </a-radio-group>
            </a-form-item>

            <a-form-item ref="accuracy" label="任务策略" name="accuracy">
                <a-radio-group v-model:value="submitForm.strategy" button-style="solid">
                    <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-button :value="4">继续执行</a-radio-button>
                  </a-radio-group>
            </a-form-item>

            <div style="display:flex;margin-bottom:12px;color:#fff;font-size:12px;">
                <div style="flex:1;">智能最佳返航路线</div>
                <div>
                    <a-switch v-model:checked="submitForm.breakFly" />
                </div>
            </div>

            <a-form-item ref="outOfContact" label="航线飞行中失联" name="outOfContact">
                <a-radio-group v-model:value="submitForm.outOfContact" button-style="solid">
                    <a-radio-button :value="1">返航</a-radio-button>
                    <a-radio-button :value="2">继续执行</a-radio-button>
                </a-radio-group>
            </a-form-item>

            <a-form-item ref="outOfContact" label="完成动作" name="outOfContact">
                <a-radio-group v-model:value="submitForm.outOfContact" button-style="solid">
                    <a-radio-button :value="1">返航</a-radio-button>
                    <a-radio-button :value="2">继续执行</a-radio-button>
                </a-radio-group>
            </a-form-item>
        
            <div style="display:flex;margin-bottom:12px;color:#fff;font-size:12px;">
                <div style="flex:1;">自动断点续飞</div>
                <div>
                    <a-switch v-model:checked="submitForm.breakFly" />
                </div>
            </div>
        
            <a-form-item :wrapper-col="{ span: 24, offset: 0 }">
                <a-button  @click="resetForm" style="width:44%;">取消</a-button>
                <a-button style="margin-left: 10px;width:44%;" type="primary" @click="onSubmit">确定</a-button>
            </a-form-item>
      </a-form>
    </div>
</template>
<script lang="ts" setup>
import { ref, defineEmits } from "vue";
import { PlusOutlined,LeftOutlined } from '@ant-design/icons-vue';
const formRef = ref();
const labelCol = { span: 24 };
const wrapperCol = { span: 24 };

const submitForm = ref({
    name:"工作计划1",
    type:1,
    airline:1,
    device:1,
    accuracy:1,
    strategy:1,
    outOfContact:1,
    completeAction:1,
    breakFly:1,
})

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

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

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

const rules = {

};

const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
        
    })
    .catch(error => {
      console.log('error', error);
    });
};
    const resetForm = () => {
        emit("cancleCraete");
        formRef.value.resetFields();
    };
</script>
<style scoped>
.container{
    padding:10px 20px;
}
.title{
    padding:15px 0px;
    color:#fff;
}
.ant-form-item{
    margin-bottom:12px;
}

::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-input{
    background:#3B4154!important;
    border:none!important;
    border-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:#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;
}
</style>