<template>
    <div>
        <qg-search-form :data="searchConfig"/>
        <section class="opt-bar">
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-button @click="handleBatchDelete">删除</el-button>
        </section>
        <qg-table
            ref="listTable"
            :columns="tableColumns"
            :param="listQuery"
            :request="listRequest"
        />
        <qg-user-selector
            ref="userSelector"
            title="授权人员"
            :uc-ajax-prefix="ucAjaxPrefix"
            :headers="headers"
            :params="{
                funId:entity.id,
                funCode:'userRoleRel',
                route:'userRoleRel',
                appCode : CTX.UC.replace(/\//g,''), // appCode
                optType : 'USER'
            }"
            @close="handleUserClose"
        />
    </div>
</template>

<script>
    import {userRoleRelPage, delUserRoleRel} from '@/api/moudles/uc/userRoleRel';
    import {getToken} from '@/utils/auth';
    import {CTX} from '@/api/config';

    export default {
        name: 'RoleMember',
        components: {},
        props: {
            entity: {
                type: Object,
                default: null
            }
        },
        data() {
            const tableColumns = [
                {
                    type: 'checkbox'
                },
                {
                    field: 'name',
                    text: '姓名',
                    minWidth: 100
                },
                {
                    field: 'loginName',
                    text: '用户名',
                    minWidth: 120
                },
                {
                    type: 'mobile',
                    field: 'mobile',
                    text: '手机号码',
                    minWidth: 120
                },
                {
                    field: 'opt',
                    fixed: 'right',
                    text: '操作',
                    width: 110,
                    render: (h, param) => {
                        if (param.row.code === 'admin') {
                            return '';
                        }
                        const optArr = [];
                        const delBtn = h('QgButton', {
                            props: {
                                toolTip: '删除',
                                type: 'text',
                                icon: 'el-icon-delete'
                            },
                            on: {
                                click: () => {
                                    this.handleDelete(param.row);
                                }
                            }
                        });
                        optArr.push(delBtn);
                        return h('div', optArr, '');
                    }
                }
            ];
            return {
                listRequest: userRoleRelPage,
                tableColumns: tableColumns,
                listQuery: {
                    roleIds: this.entity.id,
                    keyword: ''
                },
                CTX,
                dgpDialogVisible: false,
                headers: {Authorization: getToken()},
                ucAjaxPrefix: process.env.VUE_APP_BASE_API + CTX.UC
            };
        },
        watch: {
            entity(val) {
                if (!val) {
                    return;
                }
                this.listQuery.roleIds = val.id;
                this.$refs.listTable.load(this.listQuery);
            }
        },
        created() {
            // 搜索表单配置
            this.searchConfig = {
                list: [
                    {
                        type: 'input',
                        label: '关键字',
                        model: 'keyword',
                        options: {
                            placeholder: '用户名/姓名/手机号码'
                        }
                    }
                ],
                config: {
                    onSearch: data => {
                        this.handleSubmit();
                    },
                    model: this.listQuery
                }
            };
        },
        methods: {
            handleDelete(row) {
                this.delete('确认删除改用户吗?', {userIds: [row.id], roleId: this.entity.id});
            },
            delete(tips, param) {
                // TODO confirm 再简化点
                this.$confirm(tips, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delUserRoleRel(param).then(res => {
                        if (res.success) {
                            this.$message.success('删除成功');
                            this.$refs.listTable.load(this.listQuery);
                        } else {
                            this.$message.error('删除成功');
                        }
                    });
                }).catch(() => {

                });
            },
            handleSubmit() {
                this.$refs.listTable.load(this.listQuery);
            },
            handleAdd() {
                this.$refs.userSelector.open();
            },
            handleBatchDelete() {
                console.log(ids, rows);
                const {ids, rows} = this.$refs.listTable.getSelections();
                if (!ids || ids.length === 0) {
                    this.$message.warning('请先选择操作对象');
                    return;
                }
                this.delete('确认删除改用户吗?', {userIds: ids, roleId: this.entity.id});
            },
            handleImport() {
                this.$refs.importDialog.open();
            },
            handleExport() {
                this.$notify.info({
                    title: '系统提示',
                    message: '导出任务正在后台执行，您可以离开本页面进行其他操作，稍后再回来下载。参考时间：5千人约5分钟；1万人约10分钟；2万人约20分钟。'
                });
            },
            handleImportOk(result) {
                console.log(result);
            },
            nodeClick(data) {
                this.listQuery.orgId = data.id;
                this.$refs.listTable.load(this.listQuery);
            },
            includeChildChange(flag) {
                this.listQuery.includeChild = flag;
                this.$refs.listTable.load(this.listQuery);
            },
            handleUserClose() {
                this.$refs.listTable.load(this.listQuery);
            }
        }
    };
</script>