<template>
    <my-table url="/api/v1/users" rowKey="userId" ref="table">
        <template #search="{ query }">
            <MoreItem :label="$t('system.department')">
                <OrganizationTree v-model="query.orgId" />
            </MoreItem>
            <MoreItem :label="$t('user.account')">
                <a-input :placeholder="$t('input.placeholder')" v-model="query.loginId" />
            </MoreItem>
        </template>
        <template #buttons>
            <a-button type="primary" @click="() => view()">{{ $t('table.add') }}</a-button>
        </template>

        <a-table-column :title="$t('user.account')" data-index="loginId" />
        <a-table-column :title="$t('user.name')" data-index="userName" />
        <a-table-column :title="$t('system.userTitleName')" data-index="userTitleName" />
        <a-table-column :title="$t('user.mobilePhone')" data-index="mobilePhone" />
        <a-table-column :title="$t('user.fixedPhone')" data-index="fixedPhone" />
        <a-table-column :title="$t('user.email')" data-index="userEmail" />
        <a-table-column :title="$t('user.isLocked')" data-index="isLockedName" />
        <a-table-column :title="$t('table.operation')">
            <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';
import { MoreItem } from '@/components/table';

export default {
    components: { Form, OrganizationTree, ActionButton, MoreItem },
    data() {
        return {
            buttons: [
                {
                    label: this.$t('table.edit'),
                    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: this.$t('table.reset'),
                    title: this.$t('table.confirmReset'),
                    url: (row) => {
                        return {
                            url: `/api/v1/users/${row.userId}/resetting`,
                            method: 'put',
                        };
                    },
                    after: () => this.refreshTable(),
                },
                {
                    type: 'confirm',
                    label: this.$t('user.deblocking'),
                    title: this.$t('user.confirmUnlock'),
                    url: (row) => {
                        return {
                            url: `/api/v1/users/${row.userId}/unlocking`,
                            method: 'put',
                        };
                    },
                    after: () => this.refreshTable(),
                    isHidden: (row) => {
                        return !row.isLocked;
                    },
                },
                {
                    type: 'confirm',
                    label: this.$t('user.locking'),
                    title: this.$t('user.confirmLocked'),
                    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>
