<template>
    <Drawer ref="drawerRef" v-model="visible" title="用户配置">
        <a-steps :current="current">
            <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
        <div class="tw-m-6" />
        <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
            <StepsOne v-if="current === 0" :form="form" />
            <StepsTwo v-if="current === 1" :form="form" />
            <StepsThree v-if="current === 2" :form="form" />
        </a-form-model>
        <template #footer>
            <a-button type="primary" @click="prev" v-if="current > 0"> 上一步 </a-button>
            <a-button type="primary" @click="next" v-if="current < 2"> 下一步 </a-button>
            <a-button type="primary" @click="onSubmit" v-if="current === 2"> 提交 </a-button>
        </template>
    </Drawer>
</template>

<script>
import Drawer from '@/components/table/drawer.vue';
import Api from '@/api/organization';
import FormMixin from '@/components/FormMixin';
import StepsOne from './components/StepsOne.vue';
import StepsTwo from './components/StepsTwo.vue';
import StepsThree from './components/StepsThree.vue';

export default {
    props: {
        refresh: Function,
    },
    components: { Drawer, StepsOne, StepsTwo, StepsThree },
    mixins: [FormMixin],
    data() {
        return {
            visible: false,
            form: {},
            rules: {
                loginId: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                userName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                userRoleRelationList: [
                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
                ],
                userTitle: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
            },
            current: 0,
            steps: [
                {
                    title: '基本信息',
                },
                {
                    title: '证件设置',
                },
                {
                    title: '岗位设置',
                },
            ],
            Api,
        };
    },
    async mounted() {},
    methods: {
        open() {
            this.form = {};
            this.current = 0;
            this.visible = true;
        },
        next() {
            this.$refs.DrawerForm.validate().then(() => {
                this.current++;
            });
        },
        prev() {
            this.current--;
        },
        async onSubmit() {
            console.log(this.form);
            if (this.form.userJobRelationList.length === 0) {
                this.$message.error('必须设置岗位!');
                return;
            }
            const userCertificateList = this.form.userCertificateList.map((i) => {
                return {
                    ...i,
                    pictureUrl: i.pictureUrl && (i.pictureUrl[0]?.url || undefined),
                };
            });
            console.log(userCertificateList);
            const userRoleRelationList = this.form.userRoleRelationList.map((i) => ({ roleId: i }));
            const data = { ...this.form, userRoleRelationList, userCertificateList };
            if (this.form.userId) {
                await Api.updateUser(data);
            } else {
                await Api.addUser(data);
            }
            this.visible = false;
            this.$message.success('操作成功');
            this.refresh && this.refresh();
        },
    },
};
</script>
