<template>
    <ap-container>
        <ap-aside margin="1111">
            <ap-aside-tree :options.sync="treeOptions">
                <el-form slot="form" ref="tSysUserPersonGroup" :inline="true" label-width="80px"
                         :model="tSysUserPersonGroupForm" :rules="tSysUserPersonGroupRules">
                    <el-form-item label='父id' prop='fdParentId'>
                        <el-select v-model="tSysUserPersonGroupForm.fdParentId" filterable placeholder="请选择父节点">
                            <el-option label="无" value=""></el-option>
                            <el-option
                                v-for="item in parentGroupList"
                                :key="item.fdId"
                                :label="item.fdName"
                                :value="item.fdId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='名称' prop='fdName'>
                        <el-input v-model='tSysUserPersonGroupForm.fdName'></el-input>
                    </el-form-item>
                    <el-form-item label='排序' prop='fdSort'>
                        <el-input v-model='tSysUserPersonGroupForm.fdSort'></el-input>
                    </el-form-item>
                </el-form>
                <span slot="tree" slot-scope="scope">
                    {{ scope.data.fdName }}
                </span>
            </ap-aside-tree>
        </ap-aside>
        <ap-split-panel></ap-split-panel>
        <ap-container>
            <ap-header margin="1110">
                <el-form ref="tSysUserPersonSearchForm" :model="tSysUserPersonSearchForm"
                         :rules="tSysUserPersonSearchFormRules"
                         :inline="true" class="layout-header-form" @submit.native.prevent="searchEvent">
                    <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">
                        <el-input v-model="tSysUserPersonSearchForm.likeStr" placeholder="用户名称/工号/姓名"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="searchEvent">查询</el-button>
            </ap-header>
            <ap-main margin="0110">
                <ap-table ref="tSysUserPersonTableRef" :options.sync="tSysUserPersonTable"></ap-table>
            </ap-main>
        </ap-container>
        <el-dialog :title="batchAddUserDialogInfo.title" :visible.sync="batchAddUserDialogInfo.isVisible"
                   @opened="onBatchAddUserDialogOpened"
                   @close="resetBatchAddUserDialogForm"
                   width="70%">
            <ap-container>
                <ap-main margin="0000">
                    <div>
                        <el-input placeholder="关键字过滤" v-model="batchAddUserDialogSearchForm.likeStr"></el-input>
                    </div>
                    <div style="height: 400px">
                        <ap-table ref="batchAddUserDialogGridRef"
                                  :options.sync="batchAddUserDialogTableConfigs"></ap-table>
                    </div>
                </ap-main>
            </ap-container>
            <span slot="footer">
                <el-button @click="batchAddUserDialogInfo.isVisible = false">取 消</el-button>
                <ap-button type="primary" :click="saveBatchAddUserPerson">确 定</ap-button>
            </span>
        </el-dialog>
    </ap-container>
</template>

<script>
import ApSearchPick from 'ap-frame/frame/components/ApSearchPick'

export default {
    name: 'SysUserPersonGroup',
    components: {
        ApSearchPick,
    },
    data() {
        let tSysUserPersonCols = [
            {
                prop: 'fdGroupName',
                label: '分组',
                type: 'input'
            }, {
                prop: 'fdPersonNo',
                label: '用户工号',
                type: 'input'
            }, {
                prop: 'fdPersonName',
                label: '用户',
                type: 'input'
            },
        ];
        let tSysUserPersonTable = {
            title: "组织用户列表",
            columns: tSysUserPersonCols,
            dataUrl: "/apm/sys/TSysUserPerson/getTSysUserPersonGridList",
            saveUrl: "/apm/sys/TSysUserPerson/saveTSysUserPersonGridData",
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            deleteUrl: "/apm/sys/TSysUserPerson/deleteTSysUserPersonGridData",
            toolbarBtn: [{
                type: "add",
                onClick: this.doBatchAddUserDialog
            }, "del", "refresh"],
            params: () => {
                return {
                    likeStr: this.tSysUserPersonSearchForm.likeStr,
                    fdParentId: this.treeSelectedValues
                }
            }
        };

        let batchAddUserDialogTableConfigs = {
            title: "组织架构默认用户列表",
            columns: [
                {
                    prop: 'fdGroupId',
                    label: '用户分组',
                    type: 'select',
                    width: "100",
                    selectOptionsRemote: 'groupList',
                    selectOptionsKey: {label: "fdName", value: "fdId"}
                }, {
                    prop: 'fdUserName',
                    label: '用户名',
                    type: 'input'
                }, {
                    prop: 'fdEmail',
                    label: '邮箱',
                    type: 'input'
                }, {
                    prop: 'fdMobile',
                    label: '手机号码',
                    type: 'input'
                }, {
                    prop: 'fdAvatar',
                    label: '头像',
                    type: 'input',
                    showOverflowTooltip: true,
                }, {
                    prop: 'fdPersonId',
                    label: '关联组织人员',
                    type: "select",
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    selectOptionsRemote: "personNameList"
                }, {
                    prop: 'fdComment',
                    label: '备注',
                    type: 'input'
                }, {
                    prop: "fdDisabled",
                    label: "是否有效",
                    type: "select",
                    selectOptions: [{label: "失效", value: 1}, {label: "有效", value: 0}],
                    addDefaultValue: 0,
                    width: 80,
                    align: "center",
                    html: function (value, row) {
                        if (value == 1) {
                            return '<div class="ap-tag-danger">失效</div>'
                        } else if (value == 0) {
                            return '<div class="ap-tag-success">有效</el-tag>';
                        }
                    }
                }
            ],
            dataUrl: "/apm/sys/TSysUser/getTSysUserGridList",
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            toolbarBtn: [],
            params: () => {
                return {
                    likeStr: this.batchAddUserDialogSearchForm.likeStr,
                    isOrgGroup: "true"
                }
            },
            multiSelect: true,
        };

        return {
            // ----- 左侧树 -----
            parentGroupList: [],
            treeOptions: this.getTreeOption(),
            tSysUserPersonGroupForm: {
                fdId: '',
                fdParentId: '',
                fdName: '',
                fdSort: 0
            },
            tSysUserPersonGroupRules: {
                fdName: [
                    {required: true, message: '请输名称', trigger: 'blur'},
                    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                ]
            },
            treeSelectedValues: "",
            // ----- 右侧 -----
            tSysUserPersonTable: tSysUserPersonTable,
            tSysUserPersonSearchForm: {
                likeStr: ""
            },
            tSysUserPersonSearchFormRules: {

                likeStr: [{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}]
            },
            // ----- 默认用户选择 -----
            // 默认用户选择
            batchAddUserDialogTableConfigs: batchAddUserDialogTableConfigs,
            batchAddUserDialogSearchForm: {
                likeStr: ""
            },
            batchAddUserDialogForm: {
                fdGroupId: "",
                fdUserId: ""
            },
            batchAddUserDialogInfo: {
                title: "",
                isVisible: false,
                formIsLoading: false
            },
        }
    },
    watch: {
        "batchAddUserDialogSearchForm.likeStr": {
            handler(newValue, oldValue) {
                this.$refs.batchAddUserDialogGridRef.refresh();
            },
            // deep 为true，表示深度监听，这时候就能监测到 对象类型 任意值变化
            // immediate 为true就表示会立即执行
            deep: true
        },
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                title: "组织用户分组",
                toolbarBtn: ["add", "edit", "del", "sort"],
                dialogTitle: "组织用户分组",
                showCheckbox: false,
                onCheck: (data, node, comp, halfCheckedKeys, checkedKeys) => {
                    this.treeSelectedValues = data.fdId;
                    if (this.treeSelectedValues == null || this.treeSelectedValues == "") {
                        return;
                    }
                    this.$refs.tSysUserPersonTableRef.refresh();
                },
                loadOptions: {
                    url: "/apm/sys/TSysUserPersonGroup/getTSysUserPersonGroupList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                        this.parentGroupList = response.data;
                    },
                },
                editOptions: {
                    url: "/apm/sys/TSysUserPersonGroup/getTSysUserPersonGroupByFdId",
                    data: (node) => {
                        return {
                            fdId: node.fdId
                        }
                    },
                    success: (response) => {
                        this.tSysUserPersonGroupForm = response.data;
                    },
                    error() {
                    },
                },
                insertUrl: "/apm/sys/TSysUserPersonGroup/insertTSysUserPersonGroup",
                insertData: () => {
                    return this.tSysUserPersonGroupForm
                },
                updateUrl: "/apm/sys/TSysUserPersonGroup/updateTSysUserPersonGroup",
                updateData: () => {
                    return this.tSysUserPersonGroupForm
                },
                deleteUrl: "/apm/sys/TSysUserPersonGroup/updateTSysUserPersonGroupForDelete",
                deleteData: (node) => {
                    return {
                        fdId: node.fdId
                    }
                },
                updateSortUrl: '/apm/sys/TSysUserPersonGroup/updateTSysUserPersonGroupSort',
                updateSortListUrl: '/apm/sys/TSysUserPersonGroup/updateTSysUserPersonGroupSortList',
                resetForm: () => {
                    this.tSysUserPersonGroupForm = {
                        fdParentId: '',
                        fdName: '',
                        fdSort: '',
                    };
                },
                afterOpenAddDialog: (node) => {
                    this.tSysUserPersonGroupForm.fdParentId = node.fdId;
                },
            };

            return treeOptions;
        },
        // 右侧：查询事件
        searchEvent() {
            // 表单rules认证
            this.$refs.tSysUserPersonSearchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tSysUserPersonTableRef.refresh();
            });
        },
        doBatchAddUserDialog() {
            // 获取选择项目
            if (this.treeSelectedValues == null || this.treeSelectedValues == "") {
                this.$message.info(`请选择分组进行添加用户！`);
                return;
            }
            this.batchAddUserDialogForm.fdGroupId = this.treeSelectedValues;

            this.batchAddUserDialogInfo.isVisible = true;

        },
        resetBatchAddUserDialogForm() {
            this.batchAddUserDialogSearchForm.likeStr = "";
            this.batchAddUserDialogForm.fdGroupId = "";
            this.batchAddUserDialogSearchForm.fdUserId = "";
        },
        onBatchAddUserDialogOpened() {
            this.$refs.batchAddUserDialogGridRef.refresh();
        },
        saveBatchAddUserPerson() {
            return new Promise((resolve) => {
                let userList = this.$refs.batchAddUserDialogGridRef.getSelection();
                if (userList.length <= 0) {
                    this.$message.info(`请至少选择一个用户进行添加！`);
                    resolve();
                    return;
                }
                let userIdList = userList.map(item => item.fdId);

                // 添加数据
                this.$request({
                    url: '/apm/sys/TSysUserPerson/batchAddTSysUserPersonGridData',
                    method: 'post',
                    data: {
                        fdGroupId: this.batchAddUserDialogForm.fdGroupId,
                        fdUserId: userIdList.join(',')
                    }
                }).then(response => {
                    this.$message.success(`保存成功！`);
                    this.batchAddUserDialogInfo.isVisible = false;
                    // 刷新表格
                    this.$refs.tSysUserPersonTableRef.refresh();
                }).finally(() => {
                    resolve();
                })
            });
        }
    }
}
</script>

<style scoped>
</style>
