<template>
    <Drawer v-model="visible" title="证件编辑" destroyOnClose :width="500" :onOk="onOk">
        <a-form-model layout="vertical" :model="form" :rules="rules" ref="JobsFormRef">
            <a-form-model-item label="归属部门" prop="orgId">
                <OrganizationTree v-model="form.orgId" :getName="getOrgName" />
            </a-form-model-item>
            <a-form-model-item label="岗位" prop="jobId">
                <RequestSelect
                    v-model="form.jobId"
                    :request="Api.getJobs"
                    :formatData="formatData"
                    :getName="getJobName"
                />
            </a-form-model-item>
            <a-form-model-item label="兼职/全职" prop="isFull">
                <ParameterSelect
                    staticKey="tfm_sys_user|isFull"
                    v-model="form.isFull"
                    :getName="getFullName"
                />
            </a-form-model-item>
            <a-form-model-item label="开始时间" prop="startDate">
                <a-date-picker class="tw-w-full" v-model="form.startDate" />
            </a-form-model-item>
            <a-form-model-item label="结束时间" prop="endDate">
                <a-date-picker class="tw-w-full" v-model="form.endDate" />
            </a-form-model-item>
        </a-form-model>
    </Drawer>
</template>

<script>
import moment from 'moment';
import ParameterSelect from '@/components/MySelect/ParameterSelect.vue';
import RequestSelect from '@/components/MySelect/RequestSelect.vue';
import Drawer from '@/components/table/drawer.vue';
import Api from '@/api/organization';
import FormMixin from '@/components/FormMixin';
import OrganizationTree from '../../../components/OrganizationTree.vue';

export default {
    components: { Drawer, ParameterSelect, OrganizationTree, RequestSelect },
    mixins: [FormMixin],
    data() {
        return {
            Api,
            visible: false,
            form: {},
            rules: {
                orgId: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                jobId: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                isFull: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                startDate: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                endDate: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
            },
            formatData: { value: 'jobId', label: 'jobName', key: 'jobId' },
            orgName: '',
            jobName: '',
            fullName: '',
        };
    },
    async mounted() {},
    methods: {
        getOrgName(val) {
            this.organizationName = val;
        },
        getJobName(val) {
            this.jobName = val;
        },
        getFullName(val) {
            this.fullName = val;
        },
        open() {
            this.form = {};
            this.visible = true;
        },
        setData(data) {
            const startDate = moment(data.startDate, 'YYYY-MM-DD');
            const endDate = moment(data.endDate, 'YYYY-MM-DD');
            const isFull = data.isFull + '';
            this.form = { ...data, startDate, endDate, isFull };
        },
        async onOk() {
            const { key = +new Date(), ...rest } = this.form;
            await this.$refs['JobsFormRef'].validate();
            this.$emit('submit', {
                ...rest,
                key,
                orgName: this.orgName[0] || '',
                jobName: this.jobName,
                isFullName: this.fullName,
            });
        },
    },
};
</script>
