<template>
    <global-page title="新建支援申请" showFooterBtn footerBtnText="申请" @handleFooterClick="handleFooterClick">
        <view class="mocp-form">
            <up-form labelPosition="left" labelWidth="auto" :model="formData" :rules="rules" ref="formRef">
                <up-form-item label="机号" prop="machineNumber" :borderBottom="true" required>
                    <global-picker
                        pickAlign="right"
                        v-model="formData.machineNumber"
                        :options="deviceNumList"
                        clearable
                        @change="changeAc"
                        filter
                    ></global-picker>
                </up-form-item>
                <up-form-item label="机型" :borderBottom="true">
                    <up-input
                        border="none"
                        inputAlign="right"
                        clearable
                        v-model="formData.model"
                        disabled
                        disabledColor="#fff"
                        placeholder="请选择机号自动关联"
                    ></up-input>
                </up-form-item>
                <up-form-item label="航司" :borderBottom="true">
                    <up-input
                        border="none"
                        inputAlign="right"
                        clearable
                        disabled
                        disabledColor="#fff"
                        :placeholder="formData.aviation ? '' : '请选择机号自动关联'"
                    >
                        <template #suffix>
                            {{ useGetDictByValue('', formData.aviation, { data: baseStore.getAirlineSelect }) }}
                        </template>
                    </up-input>
                </up-form-item>
                <up-form-item label="航站" prop="terminal" :borderBottom="true" required>
                    <global-picker
                        pickAlign="right"
                        v-model="formData.terminal"
                        clearable
                        :options="baseStore.getTerminalSelect"
                        filter
                    ></global-picker>
                </up-form-item>
                <up-form-item label="ATA章节" prop="ata" :borderBottom="true" required>
                    <global-picker v-model="formData.ata" pickAlign="right" :options="baseStore.getATASelect" clearable filter></global-picker>
                </up-form-item>
                <up-form-item label="专业" prop="specialty" :borderBottom="true" required>
                    <global-picker
                        v-model="formData.specialty"
                        pickAlign="right"
                        :options="getParamsByType('MajorCategory')"
                        clearable
                    ></global-picker>
                </up-form-item>
                <up-form-item label="发动机型号" prop="engineModel" :borderBottom="true">
                    <global-picker
                        v-model="formData.engineModel"
                        pickAlign="right"
                        :options="baseStore.getEngineSelect"
                        clearable
                        filter
                    ></global-picker>
                </up-form-item>
                <up-form-item label="故障描述及处理方案简要描述" prop="faultDescription" :borderBottom="true" labelPosition="top">
                    <up-textarea placeholder="请输入" :height="40" border="none" v-model="formData.faultDescription"></up-textarea>
                </up-form-item>
                <up-form-item label="飞机当前状态/下一段航班计划" prop="airplaneState" :borderBottom="true" labelPosition="top">
                    <up-textarea placeholder="请输入" :height="40" border="none" v-model="formData.airplaneState"></up-textarea>
                </up-form-item>
                <up-form-item label="手册要求描述" prop="manualDescription" :borderBottom="true" labelPosition="top">
                    <up-textarea placeholder="请输入" :height="40" border="none" v-model="formData.manualDescription"></up-textarea>
                </up-form-item>
                <up-form-item label="支援申请描述" prop="supportNeeds" :borderBottom="true" labelPosition="top" required>
                    <up-textarea placeholder="请输入" :height="40" border="none" v-model="formData.supportNeeds"></up-textarea>
                </up-form-item>
                <up-form-item label="上传故障描述附件" :borderBottom="true" labelPosition="top">
                    <view style="margin-top: 24rpx">
                        <global-upload v-model="formData.supportFile" mapFieldName="id"></global-upload>
                    </view>
                </up-form-item>
                <up-form-item label="执管评估意见" prop="suggestion" :borderBottom="true" labelPosition="top">
                    <up-textarea placeholder="请输入" :height="40" border="none" v-model="formData.suggestion"></up-textarea>
                </up-form-item>
                <up-form-item label="相关席位" prop="relevantSeats" :borderBottom="true" required>
                    <global-picker
                        v-model="formData.relevantSeats"
                        pickAlign="right"
                        :options="relatedSeatSet"
                        clearable
                        filter
                        :onBeforeOpen="onBeforeOpen"
                        label-field="seatName"
                        value-field="id"
                    ></global-picker>
                </up-form-item>
            </up-form>
        </view>
    </global-page>
</template>

<script setup>
import useBaseStore from 'mocp/store/base'
import { getParamsByType } from 'mocp/hooks/use-params/useParams'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
import { formData, formRef, relatedSeatSet, rules } from './constants/add.compositions'
import { onBeforeOpen, changeAc, handleSubmit } from './constants/add.functionals'
import useUserStore from 'mocp/store/user'

const baseStore = useBaseStore()
const userStore = useUserStore()
//获取下拉框选项
const {
    selectList: { deviceNumList }
} = useBaseStore()

const handleFooterClick = () => {
    handleSubmit(userStore.userInfo?.id)
}
</script>
<style lang="scss" scoped>
.mocp-form {
    background: #fff;
    padding: 0 32rpx;
}
</style>
