<template>
    <div>
        <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="onAdd">新增</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>
        </my-table>
        <Form ref="form" />
    </div>
</template>
<script>
import Form from './form.vue';
import ActionButton from '@/components/action_button/index.vue';
import OrganizationTree from '../components/OrganizationTree.vue';

export default {
    components: { Form, OrganizationTree, ActionButton },
    data() {
        return {
            buttons: [
                {
                    label: '编辑',
                    click: (row) => {},
                },
                {
                    type: 'confirm',
                    url: (row) => `/api/v1/jobs/${row.jobId}`,
                    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();
        },
        onAdd() {
            this.$refs['form']?.open();
        },
        // view(data, type) {
        //     this.$refs['table']?.show({ type });
        //     this.$nextTick(() => {
        //         this.$refs['form'].setData({ ...data }, type);
        //     });
        // },
    },
};
</script>
