<template>
    <a-drawer
        :title="formData.id ? '编辑进出场记录表' : '增加进出场记录表'"
        :width="600"
        :visible="visible"
        :destroy-on-close="true"
        :footer-style="{ textAlign: 'right' }"
        @close="onClose"
    >
        <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
            <a-form-item label="项目编码：" name="depotId">
                <a-select v-model:value="formData.depotId" placeholder="请选择项目编码" :options="depotIdOptions" />
            </a-form-item>
            <a-form-item label="车牌号码：" name="licensePlate">
                <a-input v-model:value="formData.licensePlate" placeholder="请输入车牌号码" allow-clear />
            </a-form-item>
            <a-form-item label="车牌颜色：" name="licensePlateColor">
                <a-input v-model:value="formData.licensePlateColor" placeholder="请输入车牌颜色" allow-clear />
            </a-form-item>
            <a-form-item label="进厂时间：" name="inTime">
                <a-input v-model:value="formData.inTime" placeholder="请输入进厂时间" allow-clear />
            </a-form-item>
            <a-form-item label="出厂时间：" name="outTime">
                <a-input v-model:value="formData.outTime" placeholder="请输入出厂时间" allow-clear />
            </a-form-item>
            <a-form-item label="入厂车牌图片：" name="licensePlateInPicture">
                <a-input v-model:value="formData.licensePlateInPicture" placeholder="请输入入厂车牌图片" allow-clear />
            </a-form-item>
            <a-form-item label="入厂车图片：" name="carInPicture">
                <a-input v-model:value="formData.carInPicture" placeholder="请输入入厂车图片" allow-clear />
            </a-form-item>
            <a-form-item label="出厂车牌图片：" name="licensePlateOutPicture">
                <a-input v-model:value="formData.licensePlateOutPicture" placeholder="请输入出厂车牌图片" allow-clear />
            </a-form-item>
            <a-form-item label="出厂车图片：" name="carOutPicture">
                <a-input v-model:value="formData.carOutPicture" placeholder="请输入出厂车图片" allow-clear />
            </a-form-item>
            <a-form-item label="是否入厂：" name="enterFactory">
                <a-input v-model:value="formData.enterFactory" placeholder="请输入是否入厂" allow-clear />
            </a-form-item>
            <a-form-item label="是否出厂：" name="outFactory">
                <a-input v-model:value="formData.outFactory" placeholder="请输入是否出厂" allow-clear />
            </a-form-item>
            <a-form-item label="进厂抓拍图片：" name="captureInPicture">
                <a-input v-model:value="formData.captureInPicture" placeholder="请输入进厂抓拍图片" allow-clear />
            </a-form-item>
            <a-form-item label="出厂抓拍图片：" name="captureOutPicture">
                <a-input v-model:value="formData.captureOutPicture" placeholder="请输入出厂抓拍图片" allow-clear />
            </a-form-item>
            <a-form-item label="车辆类型：" name="vehicleType">
                <a-input v-model:value="formData.vehicleType" placeholder="请输入车辆类型" allow-clear />
            </a-form-item>
            <a-form-item label="停留时长：" name="durationStay">
                <a-input v-model:value="formData.durationStay" placeholder="请输入停留时长" allow-clear />
            </a-form-item>
            <a-form-item label="车进厂车尾相机抓拍：" name="captureInTailPicture">
                <a-input v-model:value="formData.captureInTailPicture" placeholder="请输入车进厂车尾相机抓拍" allow-clear />
            </a-form-item>
            <a-form-item label="车进厂车仓相机抓拍：" name="captureInWarePicture">
                <a-input v-model:value="formData.captureInWarePicture" placeholder="请输入车进厂车仓相机抓拍" allow-clear />
            </a-form-item>
            <a-form-item label="车进厂车身相机抓拍：" name="captureInBodyPicture">
                <a-input v-model:value="formData.captureInBodyPicture" placeholder="请输入车进厂车身相机抓拍" allow-clear />
            </a-form-item>
            <a-form-item label="车进厂磅房相机抓拍：" name="captureInPoundRoomPicture">
                <a-input v-model:value="formData.captureInPoundRoomPicture" placeholder="请输入车进厂磅房相机抓拍" allow-clear />
            </a-form-item>
            <a-form-item label="车出厂车尾相机抓拍：" name="captureOutTailPicture">
                <a-input v-model:value="formData.captureOutTailPicture" placeholder="请输入车出厂车尾相机抓拍" allow-clear />
            </a-form-item>
            <a-form-item label="车出厂车仓相机抓拍：" name="captureOutWarePicture">
                <a-input v-model:value="formData.captureOutWarePicture" placeholder="请输入车出厂车仓相机抓拍" allow-clear />
            </a-form-item>
            <a-form-item label="车出厂车身相机抓拍：" name="captureOutBodyPicture">
                <a-input v-model:value="formData.captureOutBodyPicture" placeholder="请输入车出厂车身相机抓拍" allow-clear />
            </a-form-item>
            <a-form-item label="车出厂磅房相机抓拍：" name="captureOutPoundRoomPicture">
                <a-input v-model:value="formData.captureOutPoundRoomPicture" placeholder="请输入车出厂磅房相机抓拍" allow-clear />
            </a-form-item>
            <a-form-item label="绑定状态：" name="bindStatus">
                <a-input v-model:value="formData.bindStatus" placeholder="请输入绑定状态" allow-clear />
            </a-form-item>
        </a-form>
        <template #footer>
            <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
            <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
        </template>
    </a-drawer>
</template>

<script setup name="depotAccessRecordForm">
    import tool from '@/utils/tool'
    import { cloneDeep } from 'lodash-es'
    import { required } from '@/utils/formRules'
    import depotAccessRecordApi from '@/api/biz/depotAccessRecordApi'
    // 抽屉状态
    const visible = ref(false)
    const emit = defineEmits({ successful: null })
    const formRef = ref()
    // 表单数据
    const formData = ref({})
    const submitLoading = ref(false)
    const depotIdOptions = ref([])

    // 打开抽屉
    const onOpen = (record) => {
        visible.value = true
        if (record) {
            let recordData = cloneDeep(record)
            formData.value = Object.assign({}, recordData)
        }
        depotIdOptions.value = tool.dictList('depotId')
    }
    // 关闭抽屉
    const onClose = () => {
        formRef.value.resetFields()
        formData.value = {}
        visible.value = false
    }
    // 默认要校验的
    const formRules = {
    }
    // 验证并提交数据
    const onSubmit = () => {
        formRef.value
            .validate()
            .then(() => {
                submitLoading.value = true
                const formDataParam = cloneDeep(formData.value)
                depotAccessRecordApi
                    .depotAccessRecordSubmitForm(formDataParam, !formDataParam.id)
                    .then(() => {
                        onClose()
                        emit('successful')
                    })
                    .finally(() => {
                        submitLoading.value = false
                    })
            })
    }
    // 抛出函数
    defineExpose({
        onOpen
    })
</script>
