<template>
    <ap-container>
        <ap-aside margin="1111" width="250px">
            <ap-aside-tree :options.sync="treeOptions">
                <el-form slot="form" ref="dialogForm" :inline="true" label-width="80px"
                         :model="dialogForm" :rules="dialogFormRules">
                    <el-form-item label="父节点">
                        <el-select v-model="dialogForm.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="dialogForm.fdName"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="fdComment">
                        <el-input v-model="dialogForm.fdComment"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="fdSort">
                        <el-input-number v-model="dialogForm.fdSort" controls-position="right"></el-input-number>
                    </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="tSysUserSearchForm" :model="tSysUserSearchForm" :rules="tSysUserSearchFormRules"
                         :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="tSysUserSearchForm.likeStr" placeholder="用户名/邮箱/手机/关联姓名/关联工号" style="width: 300px"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="searchEvent">查询</el-button>
            </ap-header>
            <ap-main margin="0110">
                <ap-table ref="tSysUserTableRef" :options.sync="tSysUserTable">
                    <template #searchSlotName="searchProps">
                        <el-input v-model="dialogFdPassword" placeholder="请输入密码" show-password></el-input>
                    </template>
                </ap-table>
            </ap-main>
        </ap-container>
    </ap-container>
</template>

<script>
import {convertToTreeData} from 'ap-util/util/DataUtil'
import md5 from 'js-md5'

export default {
    name: 'SysUser',
    data() {
        let tSysUserCols = [
            {
                prop: 'fdId',
                label: 'id',
                type: 'input',
                add: false,
                edit: false,
                width: "80",
                showOverflowTooltip: true,
            }, {
                prop: 'fdGroupId',
                label: '用户分组',
                type: 'select',
                width: "100",
                selectOptionsRemote: 'groupList',
                selectOptionsKey: {label: "fdName", value: "fdId"},
                addDefaultValue: () => {
                    return this.selectedId;
                }
            }, {
                prop: 'fdUserName',
                label: '用户名',
                type: 'input',
                width: "100",
            }, {
                prop: 'fdEmail',
                label: '邮箱',
                type: 'input'
            }, {
                prop: 'fdMobile',
                label: '手机号码',
                type: 'input'
            }, {
                prop: 'fdPassword',
                label: '密码',
                width: "80",
                showOverflowTooltip: true,
                type: "search",
                searchTitle: '密码输入',
                searchSlot: 'searchSlotName',
                searchConfirm: (row) => {
                    if (this.dialogFdPassword != null && this.dialogFdPassword != '') {
                        row.fdPassword = md5(this.dialogFdPassword);
                    }
                    return true;
                },
                searchClear: (row) => {
                    row.fdPassword = '';
                    return true;
                }
            }, {
                prop: 'fdSecret',
                label: '秘钥',
                type: 'input',
                width: "80",
                showOverflowTooltip: true,
            }, {
                prop: 'fdToken',
                label: '永久token',
                type: 'input',
                width: "80",
                showOverflowTooltip: true,
            }, {
                prop: 'fdAvatar',
                label: '头像',
                type: 'input',
                showOverflowTooltip: true,
            }, {
                prop: 'personName',
                label: '关联组织人员',
                type: "searchPicker",
                renderKey: {label: "fdName", value: "fdId", key: "fdPersonId"},
                renderOptionsRemote: "personNameList",
                searchPickerUrl: "/apm/sys/org/getSimplifyOrgList",
                searchPickerUrlMain: "/apm/sys/person/getSimplifyPersonList",
                searchPickerParamsMain: (row, col, selected) => {
                    return {
                        deptId: selected.fdId,
                    }
                },
                searchPickerConfirm: (row, checkedNodes) => {
                    row.fdPersonId = checkedNodes[0].fdId;
                    row.personName = checkedNodes[0].fdName;
                    return true;
                },
                searchPickerClear: (row) => {
                    row.fdPersonId = '';
                    row.personName = '';
                    return true;
                },
            }, {
                prop: 'fdComment',
                label: '备注',
                type: 'input'
            }, {
                prop: "fdIsOut",
                label: "外部用户",
                type: "select",
                selectOptions: [{label: "内部", value: 0}, {label: "外部", value: 1}],
                addDefaultValue: 0,
                width: 80,
                align: "center",
                help: '外部用户只能从供应链平台登录',
                html: function (value, row) {
                    if (value == 0) {
                        return '<div class="ap-tag">内部</div>'
                    } else if (value == 1) {
                        return '<div class="ap-tag-warning">外部</el-tag>';
                    }
                    return value;
                }
            }, {
                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>';
                    }
                }
            }
        ];
        let toolbar = [
            {
                btnType: "primary",
                text: "刷新永久token",
                icon: "el-icon-magic-stick",
                onClick: this.refreshToken
            }, {
                btnType: "primary",
                text: "刷新默认用户",
                icon: "el-icon-magic-stick",
                onClick: this.initOrgUser
            }, {
                btnType: "primary",
                text: "清空IP登录限制",
                icon: "el-icon-magic-stick",
                onClick: this.clearForceLogin
            },
            "separator", {
                btnType: "primary",
                text: "重置密码",
                icon: "el-icon-mail-reply",
                onClick: this.resetPassword
            },
            "separator", "add", "edit", "del", "cancel", "refresh", "save"]
        let tSysUserTable = {
            title: "用户表",
            columns: tSysUserCols,
            dataUrl: "/apm/sys/TSysUser/getTSysUserGridList",
            saveUrl: "/apm/sys/TSysUser/saveTSysUserGridData",
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            deleteUrl: "/apm/sys/TSysUser/deleteTSysUserGridData",
            toolbarBtn: toolbar,
            addDefaultObj: {fdDeleted: 0, fdType: 1},
            params: () => {
                return {
                    likeStr: this.tSysUserSearchForm.likeStr,
                    groupIds: this.groupIds
                }
            }
        };

        return {
            // ----- 左侧 -----
            treeOptions: this.getTreeOption(),
            selectedId: "",
            parentGroupList: [],
            dialogForm: {
                fdId: '',
                fdParentId: '',
                fdName: '',
                fdCode: '',
                fdIsGroup: 0,
                fdType: 0,
                fdSort: 0
            },

            dialogFormRules: {
                fdName: [
                    {required: true, message: '请输名称', trigger: 'blur'},
                    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                ],
                fdCode: [
                    {required: true, message: '请输编码', trigger: 'blur'},
                    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                ],
            },
            groupIds: "",
            // ----- 右侧 -----
            tSysUserTable: tSysUserTable,
            dialogFdPassword: '',
            tSysUserSearchForm: {
                likeStr: ""
            },
            tSysUserSearchFormRules: {

                likeStr: [{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}]
            }
        }
    },
    methods: {
        getTreeOption() {
            let treeOptions = {
                title: "用户分组",
                toolbarBtn: ["add", "edit", "del", "sort"],
                dialogTitle: "分组",
                showCheckbox: true,
                onCheck: (data, node, comp, halfCheckedKeys, checkedKeys) => {
                    this.selectedId = data.fdId;
                    this.groupIds = halfCheckedKeys.concat(checkedKeys).join(",");
                    if (this.groupIds == null || this.groupIds == "") {
                        return;
                    }
                    this.$refs.tSysUserTableRef.refresh();
                },
                loadOptions: {
                    url: "/apm/sys/TSysUserGroup/getTSysUserGroupList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                        this.parentGroupList = response.data;
                    },
                },
                editOptions: {
                    url: "/apm/sys/TSysUserGroup/getTSysUserGroupByFdId",
                    data: (node) => {
                        console.log(node);
                        return {
                            fdId: node.fdId
                        }
                    },
                    success: (response) => {
                        this.dialogForm.fdId = response.data.fdId;
                        this.dialogForm.fdParentId = response.data.fdParentId;
                        this.dialogForm.fdName = response.data.fdName;
                        this.dialogForm.fdComment = response.data.fdComment;
                        this.dialogForm.fdSort = response.data.fdSort;
                    },
                    error() {
                    },
                },

                insertUrl: "/apm/sys/TSysUserGroup/insertTSysUserGroup",
                insertData: () => {
                    return this.dialogForm
                },
                updateUrl: "/apm/sys/TSysUserGroup/updateTSysUserGroup",
                updateData: () => {
                    return this.dialogForm
                },
                deleteUrl: "/apm/sys/TSysUserGroup/updateTSysUserGroupForDelete",
                deleteData: (node) => {
                    return {
                        fdId: node.fdId
                    }
                },
                updateSortUrl: '/apm/sys/TSysUserGroup/updateSort',
                updateSortListUrl: '/apm/sys/TSysUserGroup/updateSortList',
                resetForm: () => {
                    this.dialogForm = {
                        fdId: '',
                        fdParentId: '',
                        fdName: '',
                        fdComment: '',
                        fdSort: 0
                    };
                },
                afterOpenAddDialog: (node) => {
                    this.dialogForm.fdParentId = node.fdId;
                },
            };

            return treeOptions;
        },
        // 右侧：查询事件
        searchEvent() {
            // 表单rules认证
            this.$refs.tSysUserSearchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tSysUserTableRef.refresh();
            });
        },
        refreshToken() {
            // 加载数据
            this.$request({
                url: '/apm/sys/TSysUser/refreshToken',
                method: 'post'
            }).then(response => {
                this.$message.success('永久token缓存已更新！');
            })
        },
        initOrgUser() {
            // 加载数据
            this.$request({
                url: '/apm/sys/TSysUser/initOrgUser',
                method: 'post'
            }).then(response => {
                this.$message.success('组织用户已更新！');
            })
        },
        clearForceLogin() {
            // 加载数据
            this.$request({
                url: '/apm/sys/TSysUser/clearForceLogin',
                method: 'post'
            }).then(response => {
                this.$message.success('IP登录限制已清空！');
            })
        },
        resetPassword() {
            let selects = this.$refs.tSysUserTableRef.getSelection();
            if (selects == null || selects.length < 1) {
                this.$message.error('请选择需要重置密码的用户！');
                return;
            }
            if (selects.length > 1) {
                this.$message.error('每次只能选择一个用户，进行重置密码！');
                return;
            }
            // 加载数据
            this.$request({
                url: '/apm/sys/TSysUser/resetPassword',
                method: 'post',
                data: {
                    fdId: selects[0].fdId
                }
            }).then(response => {
                this.$message.success('用户密码已重置！');
            })
        }
    }
}
</script>

<style scoped>
</style>
