<template>
    <my-table url="/api/v1/users" rowKey="userId" ref="table">
        <template #search="{ query }">
            <my-form-item label="归属部门">
                <OrganizationTree v-model="query.orgId" />
            </my-form-item>
            <my-form-item label="账号">
                <a-input placeholder="Basic usage" v-model="query.loginId" />
            </my-form-item>
        </template>
        <template #buttons>
            <a-button type="primary" @click="() => view()">新增</a-button>
        </template>

        <a-table-column title="账号" data-index="loginId" />
        <a-table-column title="姓名" data-index="userName" />
        <a-table-column title="职称" data-index="userTitleName" />
        <a-table-column title="移动电话" data-index="mobilePhone" />
        <a-table-column title="固定电话" data-index="fixedPhone" />
        <a-table-column title="电子邮箱" data-index="userEmail" />
        <a-table-column title="是否锁定" data-index="isLockedName" />
        <a-table-column title="操作">
            <template #default="row">
                <ActionButton :buttons="buttons" :row="row" />
            </template>
        </a-table-column>

        <template #children>
            <Form ref="form" :refresh="refreshTable" />
        </template>
    </my-table>
</template>
<script>
import Api from '@/api/organization';
import ActionButton from '@/components/action_button/index.vue';
import { formatObj } from '@/utils';
import Form from './form.vue';
import OrganizationTree from '../components/OrganizationTree.vue';

export default {
    components: { Form, OrganizationTree, ActionButton },
    data() {
        return {
            buttons: [
                {
                    label: '编辑',
                    click: (row) => {
                        this.view(row, 1);
                    },
                },
                {
                    type: 'confirm',
                    url: (row) => `/api/v1/users/${row.userId}`,
                    after: () => this.refreshTable(),
                    isHidden: (row) => {
                        return row.userId === 1;
                    },
                },
                {
                    type: 'confirm',
                    label: '重置',
                    title: '确认是否重置?',
                    url: (row) => {
                        return {
                            url: `/api/v1/users/${row.userId}/resetting`,
                            method: 'put',
                        };
                    },
                    after: () => this.refreshTable(),
                },
                {
                    type: 'confirm',
                    label: '解锁',
                    title: '确认是否解锁?',
                    url: (row) => {
                        return {
                            url: `/api/v1/users/${row.userId}/unlocking`,
                            method: 'put',
                        };
                    },
                    after: () => this.refreshTable(),
                    isHidden: (row) => {
                        return !row.isLocked;
                    },
                },
                {
                    type: 'confirm',
                    label: '锁定',
                    title: '确认是否锁定?',
                    url: (row) => {
                        return {
                            url: `/api/v1/users/${row.userId}/locking`,
                            method: 'put',
                        };
                    },
                    after: () => this.refreshTable(),
                    isHidden: (row) => {
                        return !!row.isLocked;
                    },
                },
            ],
        };
    },
    methods: {
        refreshTable() {
            this.$refs['table']?.getData();
        },
        async view(data = {}, type = 0) {
            this.$refs['form']?.open();
            if (type !== 0) {
                const info = await Api.getUsersInfo({ userId: data.userId });
                const userRoleRelationList = (info.userRoleRelationList || []).map((i) => i.roleId);
                const userJobRelationList = await formatObj(info.userJobRelationList || [], {
                    key: 'relationId',
                });
                const userCertificateList = await formatObj(info.userCertificateList || [], {
                    key: 'certificateId',
                });
                userCertificateList.map((i) => {
                    if (i.pictureUrl) {
                        const name = i.pictureUrl.split('/');
                        const data = {
                            uid: +new Date(),
                            status: 'done',
                            name: name[name.length - 1],
                            url: i.pictureUrl,
                            thumbUrl: 'http://platform.kuopu.net:9300/' + i.pictureUrl,
                        };
                        i.pictureUrl = [data];
                    }
                });
                this.$nextTick(() => {
                    this.$refs['form'].setData(
                        { ...info, userRoleRelationList, userJobRelationList, userCertificateList },
                        type,
                    );
                });
            }
        },
    },
};
</script>
