<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="contractCode">
                <a-input v-model:value="formData.contractCode" placeholder="请输入贷款合同号" allow-clear />
            </a-form-item>
            <a-form-item label="还款本金：" name="repayPrincipal">
                <a-input v-model:value="formData.repayPrincipal" placeholder="请输入还款本金" allow-clear />
            </a-form-item>
            <a-form-item label="利息：" name="repayInterest">
                <a-input v-model:value="formData.repayInterest" placeholder="请输入利息" allow-clear />
            </a-form-item>
            <a-form-item label="利息凭证：" name="repayInterestPic">
                <a-input v-model:value="formData.repayInterestPic" placeholder="请输入利息凭证" allow-clear />
            </a-form-item>
            <a-form-item label="还款单价：" name="repayPrice">
                <a-input v-model:value="formData.repayPrice" placeholder="请输入还款单价" allow-clear />
            </a-form-item>
            <a-form-item label="库位：" name="depotShed">
                <a-input v-model:value="formData.depotShed" placeholder="请输入库位" allow-clear />
            </a-form-item>
            <a-form-item label="数量：" name="repayCount">
                <a-input v-model:value="formData.repayCount" placeholder="请输入数量" allow-clear />
            </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="keeperName">
                <a-input v-model:value="formData.keeperName" placeholder="请输入授权提货人" allow-clear />
            </a-form-item>
            <a-form-item label="授权提货人身份证号：" name="keeperCitizenId">
                <a-input v-model:value="formData.keeperCitizenId" placeholder="请输入授权提货人身份证号" allow-clear />
            </a-form-item>
            <a-form-item label="授权提货人身份证照片：" name="keeperCitizenPic">
                <a-input v-model:value="formData.keeperCitizenPic" placeholder="请输入授权提货人身份证照片" allow-clear />
            </a-form-item>
            <a-form-item label="授权提货人联系方式：" name="keeperMobile">
                <a-input v-model:value="formData.keeperMobile" placeholder="请输入授权提货人联系方式" allow-clear />
            </a-form-item>
            <a-form-item label="提货通知书：" name="outboundFlie">
                <a-input v-model:value="formData.outboundFlie" 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="depotRepayBookForm">
    import tool from '@/utils/tool'
    import { cloneDeep } from 'lodash-es'
    import { required } from '@/utils/formRules'
    import depotRepayOrderApi from '@/api/biz/depotRepayOrderApi'
	import dictOptionsApi from "@/api/biz/dictOptionsApi";
    // 抽屉状态
    const visible = ref(false)
    const emit = defineEmits({ successful: null })
    const formRef = ref()
    // 表单数据
    const formData = ref({})
    const submitLoading = ref(false)
    const depotIdOptions = ref([])
    const bankOpApprovalStateOptions = ref([])

    // 打开抽屉
    const onOpen = (record) => {
        visible.value = true
        if (record) {
            let recordData = cloneDeep(record)
            formData.value = Object.assign({}, recordData)
		} else {
			dictOptionsApi.options(Object.assign('', {'dictValue': '粮库'})).then((data) => {
				depotIdOptions.value = data
			})
        }
        bankOpApprovalStateOptions.value = tool.dictList('审批状态')
    }
    // 关闭抽屉
    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)
				depotRepayOrderApi
                    .depotRepayBookSubmitForm(formDataParam, !formDataParam.id)
                    .then(() => {
                        onClose()
                        emit('successful')
                    })
                    .finally(() => {
                        submitLoading.value = false
                    })
            })
    }
    // 抛出函数
    defineExpose({
        onOpen
    })
</script>
