<template>
    <ap-container>
        <ap-aside margin="1111">
            <ap-aside-tree :options.sync="treeOptions">
                <el-form slot="form"  ref="dialogForm" :inline="true"
                         :model="dialogForm" :rules="dialogFormRules" label-width="80px">
                    <el-form-item label="父节点">
                        <el-select v-model="dialogForm.fdParentId" filterable placeholder="请选择父节点">
                            <el-option label="无" value=""></el-option>
                            <el-option
                                v-for="item in orgGroupList"
                                :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="fdCode">
                        <el-input v-model="dialogForm.fdCode"></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-radio v-model="dialogForm.fdType" :label="0" :disabled="dialogForm.fdId!=null&&dialogForm.fdId!=''">部门分组</el-radio>
                        <el-radio v-model="dialogForm.fdType" :label="1" :disabled="dialogForm.fdId!=null&&dialogForm.fdId!=''">人员分组</el-radio>
                    </el-form-item>
                    <el-form-item label="分组">
                        <el-radio v-model="dialogForm.fdIsGroup" :label="1" :disabled="dialogForm.fdId!=null&&dialogForm.fdId!=''">是</el-radio>
                        <el-radio v-model="dialogForm.fdIsGroup" :label="0" :disabled="dialogForm.fdId!=null&&dialogForm.fdId!=''">否</el-radio>
                    </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-main margin="1110">
                <ap-table ref="tSysOrgGroupTableRef" :options.sync="tSysOrgGroupTable"></ap-table>
            </ap-main>
        </ap-container>
    </ap-container>
</template>

<script>

export default {
    name: 'SysOrgGroup',
    data() {

        let tSysOrgGroupTable = {
            title: "列表",
            columns: [],
            dataUrl: "/apm/sys/TSysOrgGroup/getTSysOrgGroupGridList",
            saveUrl: "/apm/sys/TSysOrgGroup/saveTSysOrgGroupGridData",
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            deleteUrl: "/apm/sys/TSysOrgGroup/deleteTSysOrgGroupGridData",
            toolbarBtn: [{
                btnType: "primary",
                text: "刷新缓存",
                icon: "el-icon-magic-stick",
                onClick: this.refreshCache
            }, "separator", "add", "edit", "del", "cancel", "refresh", "save"],
            addDefaultObj: () => {
                return {
                    fdTypeId: this.selectedId
                }
            },
            params: () => {
                return {
                    selectedId: this.selectedId,
                    selectedCode: this.selectedCode
                }
            }
        };

        return {
            // ----- 左侧 -----
            treeOptions: this.getTreeOption(),
            selectedId: "",
            selectedCode: "",
            orgGroupList: [],
            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'}
                ],
            },
            // ----- 右侧 -----
            tSysOrgGroupTable: tSysOrgGroupTable,
        }
    },
    methods: {
        refreshDeptCols(){
            let cols = [
                {
                    prop: 'fdOrgId',
                    label: '部门Id',
                    type: 'input',
                    width: '250',
                    add: false,
                    edit: false,
                }, {
                    prop: 'fdName',
                    label: '部门全称',
                    width: '400',
                    type: "searchTree",
                    searchTreeUrl: "/apm/sys/org/getSimplifyOrgList",
                    searchTreeExpandAll: false,
                    searchTreeKey: {idKey: "fdId", parentKey: "fdParentId", labelKey: "fdName"},
                    searchTreeRenderKey: {idKey: "fdOrgId", labelKey: "fdName"},
                    searchTreeConfirm: (row, checkedNodes) => {
                        row.fdOrgId = checkedNodes[0].fdId;
                        row.fdName = checkedNodes[0].fdName
                        return true;
                    },
                    searchTreeClear: (row) => {
                        row.fdOrgId = '';
                        row.fdName = '';
                        return true;
                    },
                    html: (value, row) => {
                        return value;
                    }
                }, {
                    prop: 'fdSort',
                    label: '排序',
                    type: 'input',
                    width: '100'
                }
            ];
            this.tSysOrgGroupTable.columns = cols;
            this.$refs.tSysOrgGroupTableRef.reload(false);
            this.$refs.tSysOrgGroupTableRef.refresh();
        },
        refreshPersonCols(){
            let cols = [
                {
                    prop: 'fdOrgId',
                    label: '人员Id',
                    type: 'input',
                    width: '250',
                    add: false,
                    edit: false,
                }, {
                    prop: 'fdName',
                    label: '人员姓名',
                    width: '400',
                    type: "searchTable",
                    searchTable:"人员搜索",
                    searchTableShowParam: true,
                    searchTableWidth:"800px",
                    searchTableOpt: {
                        columns: [{prop: "fdDeptName",label: "部门",type: "input"},
                            {prop: "fdNo",label: "工号",type: "input"},
                            {prop: "fdName",label: "姓名",type: "input"}],
                        dataUrl: "/apm/sys/person/getSimplifyPersonListByName",
                        method: "POST",
                        multiSelect: false,
                        initData: false,
                    },
                    searchTableConfirm: (row, selectedRow) => {
                        if (selectedRow.length < 1) {
                            row.fdOrgId = "";
                            row.fdName = "";
                        } else {
                            row.fdOrgId = selectedRow[0].fdId;
                            row.fdName = selectedRow[0].fdName;
                        }
                        return true;
                    },
                    searchTableClear: (row) => {
                        row.fdOrgId = "";
                        row.fdName = "";
                        return true;
                    },
                }, {
                    prop: 'fdSort',
                    label: '排序',
                    type: 'input',
                    width: '100'
                }
            ];
            this.tSysOrgGroupTable.columns = cols;
            this.$refs.tSysOrgGroupTableRef.reload(false);
            this.$refs.tSysOrgGroupTableRef.refresh();
        },
        getTreeOption() {
            let treeOptions = {
                title: "组织分组",
                toolbarBtn: ["add", "edit", "del", "sort"],
                dialogTitle: "分组",
                onClick: (data, node, comp) => {
                    this.selectedId = data.fdId;
                    this.selectedCode = data.fdCode;
                    console.log(data);
                    if (data.fdType == 1) {
                        this.tSysOrgGroupTable.title = `人员列表 -【${data.fdName}】`;
                        this.refreshPersonCols()
                    }else {
                        this.tSysOrgGroupTable.title = `部门列表 -【${data.fdName}】`;
                        this.refreshDeptCols()
                    }
                },
                loadOptions: {
                    url: "/apm/sys/TSysOrgGroupType/getTSysOrgGroupTypeList",
                    data: {},
                    success: (response) => {
                        this.orgGroupList = response.data;
                    },
                    error() {
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
                editOptions: {
                    url: "/apm/sys/TSysOrgGroupType/getTSysOrgGroupTypeByFdId",
                    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.fdCode = response.data.fdCode;
                        this.dialogForm.fdIsGroup = response.data.fdIsGroup;
                        this.dialogForm.fdType = response.data.fdType;
                        this.dialogForm.fdSort = response.data.fdSort;
                    },
                    error() {
                    },
                },

                insertUrl: "/apm/sys/TSysOrgGroupType/insertTSysOrgGroupType",
                insertData: () => {
                    return this.dialogForm
                },
                updateUrl: "/apm/sys/TSysOrgGroupType/updateTSysOrgGroupType",
                updateData: () => {
                    return this.dialogForm
                },
                deleteUrl: "/apm/sys/TSysOrgGroupType/updateTSysOrgGroupTypeForDelete",
                deleteData: (node) => {
                    return {
                        fdId: node.fdId
                    }
                },
                updateSortUrl: '/apm/sys/TSysOrgGroupType/updateSort',
                updateSortListUrl: '/apm/sys/TSysOrgGroupType/updateSortList',
                resetForm: () => {
                    this.dialogForm = {
                        fdId: '',
                        fdParentId: '',
                        fdName: '',
                        fdCode: '',
                        fdIsGroup: 0,
                        fdType: 0,
                        fdSort: 0
                    };
                },
                afterOpenAddDialog: (node) => {
                    this.dialogForm.fdParentId = node.fdId;
                },
            };

            return treeOptions;
        },
        refreshCache() {
            this.$request({
                url: '/apm/sys/TSysOrgGroup/refreshOrgGroupCache',
                method: 'post',
            }).then(response => {
                this.$message.success(`缓存刷新成功！`)
            })
        }
    }
}
</script>

<style scoped>
</style>
