<template>
    <my-table url="/api/v1/users" rowKey="userId" :addBtn="addBtn" ref="table">
        <template #drawer>
            <Form ref="form" />
        </template>
        <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>

        <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">
                <a @click="() => view(row, 1)">编辑</a>
                <a-divider type="vertical" />
                <PopconfirmDelete :url="`/api/v1/jobs/${row.jobId}`" :cb="refreshTable" />
            </template>
        </a-table-column>
    </my-table>
</template>
<script>
import Form from './form.vue';
import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
import OrganizationTree from '../components/OrganizationTree.vue';

export default {
    components: { Form, PopconfirmDelete, OrganizationTree },
    data() {
        return {
            addBtn: { width: 600, onOk: () => this.$refs['form']?.submit() },
            span: { xs: 12, md: 8, lg: 6 },
        };
    },
    methods: {
        refreshTable() {
            this.$refs['table']?.getData();
        },
        view(data, type) {
            this.$refs['table']?.show({ type });
            this.$nextTick(() => {
                this.$refs['form'].setData({ ...data }, type);
            });
        },
    },
};
</script>
