<template>
    <Drawer v-model="visible" title="证件编辑" destroyOnClose :width="500" :onOk="onOk">
        <a-form-model layout="vertical" :model="form" :rules="rules" ref="CertificateFromRef">
            <a-form-model-item label="证件类型" prop="certificateType">
                <MySelect v-model="form.certificateType" :options="certificateTypeOption" />
            </a-form-model-item>
            <a-form-model-item label="证件名称" prop="certificateName">
                <a-input v-model="form.certificateName" />
            </a-form-model-item>
            <a-form-model-item label="证件号码" prop="certificateCode">
                <a-input v-model="form.certificateCode" />
            </a-form-model-item>
            <a-form-model-item label="发证机构" prop="authorityDepartment">
                <MySelect v-model="form.authorityDepartment" :options="authorityDepartmentOption" />
            </a-form-model-item>
            <a-form-model-item label="有效期" prop="expirationDate">
                <a-date-picker class="tw-w-full" v-model="form.expirationDate" />
            </a-form-model-item>
            <a-form-model-item label="证件副本" prop="pictureUrl">
                <Upload v-model="form.pictureUrl" showUploadList :number="1" />
            </a-form-model-item>
        </a-form-model>
    </Drawer>
</template>

<script>
import moment from 'moment';
import MySelect from '@/components/MySelect/index.vue';
import Drawer from '@/components/table/drawer.vue';
import FormMixin from '@/components/FormMixin';
import Upload from '@/components/upload/uploadList.vue';
import { getStaticParam } from '@/api';

export default {
    components: { Drawer, MySelect, Upload },
    mixins: [FormMixin],
    data() {
        return {
            visible: false,
            form: {},
            rules: {
                certificateType: [
                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
                ],
                certificateName: [
                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
                ],
                certificateCode: [
                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
                ],
                // authorityDepartment: [
                //     { required: true, message: 'Please select Activity zone', trigger: 'change' },
                // ],
                // expirationDate: [
                //     { required: true, message: 'Please select Activity zone', trigger: 'change' },
                // ],
                // pictureUrl: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
            },
            certificateTypeOption: [],
            authorityDepartmentOption: [],
        };
    },
    async mounted() {
        const certificateTypeOption = await getStaticParam('tfm_sys_user_certificate|certificate_type');

        const authorityDepartmentOption = await getStaticParam(
            'tfm_sys_user_certificate|authority_department',
        );
        this.certificateTypeOption = certificateTypeOption;
        this.authorityDepartmentOption = authorityDepartmentOption;
    },
    methods: {
        open() {
            this.form = {};
            this.visible = true;
        },
        setData(data) {
            const expirationDate = data.expirationDate && moment(data.expirationDate, 'YYYY-MM-DD');
            this.form = { ...data, expirationDate };
        },
        async onOk() {
            const { key = `${+new Date()}`, expirationDate, ...rest } = this.form;
            await this.$refs['CertificateFromRef'].validate();
            const time = expirationDate && (await expirationDate.format('YYYY-MM-DD'));
            const authorityDepartmentCur = this.authorityDepartmentOption.find((i) => {
                return (i.paramValue = this.form.authorityDepartment);
            });
            const certificateTypeCur = this.certificateTypeOption.find((i) => {
                return (i.paramValue = this.form.certificateType);
            });

            const data = {
                key,
                ...rest,
                authorityDepartmentName: authorityDepartmentCur && authorityDepartmentCur.paramName,
                certificateTypeName: certificateTypeCur && certificateTypeCur.paramName,
                expirationDate: time && `${time} 00:00:00`,
            };
            this.$emit('submit', data);
        },
    },
};
</script>
