<template>

    <ap-container>
        <ap-header margin="1111" class="flex-justify-between">
            <div>
                <el-form ref="tSysMediumSearchForm" :model="tSysMediumSearchForm" :rules="tSysMediumSearchFormRules"
                         :inline="true" class="layout-header-form" @submit.native.prevent="searchEvent">
                    <el-form-item label="批量操作:" class="layout-header-form-item">
                        <el-switch v-model="modelType" :active-value="2" :inactive-value="1"></el-switch>
                    </el-form-item>
                    <el-form-item v-show="modelType == 1" label="  搜索:" class="layout-header-form-item" prop="likeStr">
                        <el-input v-model="tSysMediumSearchForm.likeStr" placeholder="工号/代码/名称/收件值"></el-input>
                    </el-form-item>
                </el-form>
                <el-button v-show="modelType == 1" type="primary" @click="searchEvent">查询</el-button>
            </div>
            <div>
                <el-button type="primary" icon="el-icon-copy" @click="showCopyConfig">复制人员配置</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="deleteResignPerson">删除离职人员</el-button>
            </div>
        </ap-header>
        <ap-main v-show="modelType == 1" margin="0111" class="flex-justify-start">
            <ap-aside-tree :options.sync="treeOptions" style="padding-right: 5px;margin-right: 5px;width:500px;">
                <el-form slot="form" ref="tSysMediumType" :inline="true" label-width="80px"
                         :model="tSysMediumTypeForm" :rules="tSysMediumTypeRules">
                    <el-form-item label='父id' prop='fdParentId'>
                        <el-select v-model="tSysMediumTypeForm.fdParentId" filterable placeholder="请选择父节点">
                            <el-option label="无" value=""></el-option>
                            <el-option
                                v-for="item in mediumTypeList"
                                :key="item.fdId"
                                :label="item.fdName"
                                :value="item.fdId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分组">
                        <el-radio v-model="tSysMediumTypeForm.fdIsGroup" :label="1"
                                  :disabled="!tSysMediumTypeFormDialog.isAddDialog">是
                        </el-radio>
                        <el-radio v-model="tSysMediumTypeForm.fdIsGroup" :label="0"
                                  :disabled="!tSysMediumTypeFormDialog.isAddDialog">否
                        </el-radio>
                    </el-form-item>
                    <el-form-item label='名称' prop='fdName'>
                        <el-input v-model='tSysMediumTypeForm.fdName'></el-input>
                    </el-form-item>
                    <el-form-item v-show="tSysMediumTypeForm.fdIsGroup == 0" label='编码' prop='fdCode'>
                        <el-input v-model='tSysMediumTypeForm.fdCode'></el-input>
                    </el-form-item>
                    <el-form-item v-show="tSysMediumTypeForm.fdIsGroup == 0" label='类型' prop='fdType'>
                        <el-select v-model="tSysMediumTypeForm.fdType">
                            <el-option key="1" label="邮箱" :value="1"></el-option>
                            <el-option key="2" label="短信" :value="2"></el-option>
                            <el-option key="3" label="企业微信" :value="3"></el-option>
                            <el-option key="4" label="钉钉" :value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='排序' prop='fdSort'>
                        <el-input v-model='tSysMediumTypeForm.fdSort'></el-input>
                    </el-form-item>
                    <el-form-item label='备注' prop='fdComment'>
                        <el-input v-model='tSysMediumTypeForm.fdComment'></el-input>
                    </el-form-item>
                </el-form>
                <div slot="tree" slot-scope="scope" style="width: 100%">
                    <div v-if="scope.data.fdIsGroup == 1" class="tree-node">
                        <span style="color: #2e6d91">{{ scope.data.fdName }}</span>
                    </div>
                    <div v-else class="flex-justify-between tree-node ap-ellipse" style="width: 100%;padding-right: 10px">
                        <div style="color: #1890FF;">
                            <i :class="getIcon(scope.data.fdType)"/>
                            &nbsp {{ scope.data.fdName }}
                        </div>
                        <div style="color: gray;font-size: 12px;">{{ scope.data.fdCode }}</div>
                    </div>
                </div>
            </ap-aside-tree>
            <ap-table ref="tSysMediumTableRef" :options.sync="tSysMediumTable" class="flex-1">
                <template #fdValue="slotProps">
                    <div v-if="!slotProps.rowData.isEdit && !slotProps.rowData.isAdd" v-html="getValue(slotProps.rowData)">
                    </div>

                    <template v-else-if="slotProps.rowData.fdValueType == 1">
                        <ap-org :options.sync="orgTree" v-model="slotProps.rowData.fdValue"></ap-org>
                    </template>

                    <template v-else-if="slotProps.rowData.fdValueType == 2">
                        <ap-org :options.sync="orgPick" v-model="slotProps.rowData.fdValue"></ap-org>
                    </template>
                    <template v-else-if="slotProps.rowData.fdValueType == 3">
                        <el-input v-model='slotProps.rowData.fdValue' @change="rowChange(slotProps.rowData)"></el-input>
                    </template>
                </template>
            </ap-table>
        </ap-main>
        <ap-main v-show="modelType == 2" margin="0111" class="flex-justify-start">
            <ap-aside-tree key="z1" ref="configPersonTree" :options.sync="configPersonTreeOptions" style="width: 200px" class="one-level">
                <span slot="tree" slot-scope="scope" style="font-size: 12px;" v-bind:class="{'ap-color-red': scope.data.fdDisabled == 1, 'ap-ellipse': true}">
                     {{ scope.data.fdNo }} - {{ scope.data.fdName }} - {{ scope.data.fdDeptName }}
                </span>
            </ap-aside-tree>
            <div key="z4" class="line-div"></div>
            <div class="flex-col" style="height:100%;width: 200px">
                <ap-aside-tree key="z5" ref="configCustomTree" :options.sync="configCustomTreeOptions" style="width: 200px;height: 50%;" class="one-level">
                    <span slot="tree" slot-scope="scope" style="font-size: 12px;" class="ap-ellipse">
                        {{ scope.data.fdValue }}
                    </span>
                </ap-aside-tree>
                <ap-aside-tree key="z3" ref="configDeptTree" :options.sync="configDeptTreeOptions" style="width: 200px;height: 50%;border-top: 1px solid #cccccc;" class="one-level">
                    <span slot="tree" slot-scope="scope" class="ap-ellipse">
                        <span style="font-size: 12px" class="ap-color-blue">{{ scope.data.fdName }}</span>
                        <span style="font-size: 12px">{{ handleFullName(scope.data.fdFullName) }}</span>
                    </span>
                </ap-aside-tree>
            </div>
            <div key="z6" class="line-div"></div>
            <ap-aside-tree key="z7" ref="selectedTreeRef" v-loading="loadingCheckGroup" :options.sync="selectedTreeOptions" style="padding-right: 5px;margin-right: 5px;width:330px;">
                <div slot="tree" slot-scope="scope" style="width: 100%">
                    <div v-if="scope.data.fdIsGroup == 1" class="tree-node">
                        <span style="color: #2e6d91">{{ scope.data.fdName }}</span>
                    </div>
                    <div v-else class="flex-justify-between tree-node ap-ellipse" style="width: 100%;padding-right: 10px">
                        <div style="color: #1890FF;max-width: 220px;" class="ap-ellipse">
                            <i :class="getIcon(scope.data.fdType)"/>
                            &nbsp {{ scope.data.fdName }}
                            <span style="color: gray;font-size: 12px;">{{ scope.data.fdCode }}</span>
                        </div>
                        <span style="font-size: 14px;color: #13CE66;"><i class="el-icon-circle-plus-outline"/></span>
                    </div>
                </div>
            </ap-aside-tree>
            <div key="z8" class="line-div"></div>
            <div class="flex-1 flex-col" style="height:100%">
                <div class="flex-justify-between">
                    <el-form ref="tSysMediumFormRef"
                             :inline="true"
                             :model="tSysMediumForm" :rules="tSysMediumFormRules"
                             label-width="120px" class="ap-form flex-1 my-form">
                        <div class="ap-form-row">
                            <el-form-item label='消息分组(多选)' prop='fdTypeIds'>
                                <el-select v-model="tSysMediumForm.fdTypeIds" placeholder="请选择父节点" multiple collapse-tags>
                                    <el-option
                                        v-for="item in noGroupMediumTypeList"
                                        :key="item.fdId"
                                        :label="item.fdName"
                                        :value="item.fdId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label='邮件收件类型' prop='fdEmailType'>
                                <el-select v-model="tSysMediumForm.fdEmailType">
                                    <el-option key="1" label="收件人" :value="1"></el-option>
                                    <el-option key="2" label="抄送" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label='值类型' prop='fdValueType'>
                                <el-select v-model="tSysMediumForm.fdValueType">
                                    <el-option key="1" label="组织部门" :value="1"></el-option>
                                    <el-option key="2" label="组织人员" :value="2"></el-option>
                                    <el-option key="3" label="自定义" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label='值' prop='fdValue'>
                                <template v-if="tSysMediumForm.fdValueType === 1">
                                    <ap-org key="tree" :options.sync="orgTree" v-model="tSysMediumForm.fdValue"></ap-org>
                                </template>
                                <template v-if="tSysMediumForm.fdValueType === 2">
                                    <ap-org key="pick" :options.sync="orgPick" v-model="tSysMediumForm.fdValue"></ap-org>
                                </template>
                                <template v-if="tSysMediumForm.fdValueType == 3">
                                    <el-input v-model='tSysMediumForm.fdValue'></el-input>
                                </template>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label='是否有效' prop='fdDisabled'>
                                <el-radio-group v-model="tSysMediumForm.fdDisabled">
                                    <el-radio :label="0">有效</el-radio>
                                    <el-radio :label="1">失效</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label='账套类型' prop='fdType'>
                                <el-radio-group v-model="tSysMediumForm.fdType">
                                    <el-radio :label="1">通用</el-radio>
                                    <el-radio :label="2">账套</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label='备注' prop='fdComment'>
                                <el-input v-model='tSysMediumForm.fdComment'></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                    <div>
                        <el-button type="primary" icon="el-icon-check" @click="batchSave">批量添加</el-button>
                    </div>
                </div>
                <div class="flex-1" style="overflow: auto;border-top: 1px solid #cccccc;">
                    <ap-table key="z9" ref="tSysMediumTableRef2" :options.sync="tSysMediumTable2">
                        <template #fdValue="slotProps">
                            <div v-if="!slotProps.rowData.isEdit && !slotProps.rowData.isAdd" v-html="getValue(slotProps.rowData)">
                            </div>

                            <template v-else-if="slotProps.rowData.fdValueType == 1">
                                <ap-org :options.sync="orgTree" v-model="slotProps.rowData.fdValue" @change="rowChange(slotProps.rowData)"></ap-org>
                            </template>

                            <template v-else-if="slotProps.rowData.fdValueType == 2">
                                <ap-org :options.sync="orgPick" v-model="slotProps.rowData.fdValue" @change="rowChange(slotProps.rowData)"></ap-org>
                            </template>
                            <template v-else-if="slotProps.rowData.fdValueType == 3">
                                <el-input v-model='slotProps.rowData.fdValue'></el-input>
                            </template>
                        </template>
                    </ap-table>
                </div>
            </div>
        </ap-main>
        <el-dialog title="配置复制：给 [目标用户] 配置，将 [来源用户] 的配置，复制给 [目标用户]" :visible.sync="showCopyConfigFlag" width="800px" :append-to-body="true">
            <div class="flex-center">
                <div class="flex-1 flex-col" style="height: 400px;border-right: 1px solid #eeeeee;padding-right: 20px;">
                    <div class="flex-justify-start">
                        <div style="font-weight: bold">来源人员：</div>
                        <ap-org :options.sync="sourceOrgPick" v-model="sourceOrgPickValue"></ap-org>
                    </div>

                    <ap-aside-tree ref="sourceConfigRef" :options.sync="sourceConfigOptions" class="flex-1">
                        <span v-if="scope.data.compareId == null" slot="tree" slot-scope="scope" class="ap-color-red">
                            {{ scope.data.fdName }}
                        </span>
                        <span v-else slot="tree" slot-scope="scope" class="ap-color-green">
                            {{ scope.data.fdName }}
                        </span>
                    </ap-aside-tree>
                </div>

                <div class="flex-1 flex-col" style="height: 400px;margin-left: 20px;">
                    <div class="flex-justify-start">
                        <div style="font-weight: bold">目标人员：</div>
                        <ap-org ref="testRef" :options.sync="targetOrgPick" v-model="targetOrgPickValue"></ap-org>
                    </div>
                    <ap-aside-tree ref="targetConfigRef" :options.sync="targetConfigOptions" class="flex-1">
                        <span v-if="scope.data.compareId == null" slot="tree" slot-scope="scope" class="ap-color-red">
                            {{ scope.data.fdName }}
                        </span>
                        <span v-else slot="tree" slot-scope="scope" class="ap-color-green">
                            {{ scope.data.fdName }}
                        </span>
                    </ap-aside-tree>
                </div>
            </div>
            <span slot="footer">
                <el-button @click="showCopyConfigFlag = false">取 消</el-button>
                <ap-button type="primary" :click="copyConfig">复制权限</ap-button>
            </span>
        </el-dialog>
    </ap-container>
</template>

<script>
export default {
    name: 'SysMedium',
    data() {
        let toolbarBtn = ["add", "edit", "del", "refresh", "save", "separator",
            {
                btnType: "info",
                text: "帮助",
                icon: "el-icon-wenhao",
                onClick: this.showHelp
            }
        ];
        let tSysMediumTable = {
            title: "推送列表",
            columns: this.getColumns(2),
            dataUrl: "/apm/sys/TSysMedium/getTSysMediumGridList",
            saveUrl: "/apm/sys/TSysMedium/saveTSysMediumGridData",
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            deleteUrl: "/apm/sys/TSysMedium/deleteListByFdId",
            toolbarBtn: toolbarBtn,
            initData: true,
            params: () => {
                return {
                    likeStr: this.tSysMediumSearchForm.likeStr,
                    typeId: this.treeSelectedValue
                }
            }
        };

        let tSysMediumTable2 = {
            title: "推送清单",
            columns: this.getColumns(1, true),
            dataUrl: "/apm/sys/TSysMedium/getTSysMediumGridList",
            saveUrl: "/apm/sys/TSysMedium/saveTSysMediumGridData",
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            deleteUrl: "/apm/sys/TSysMedium/deleteListByFdId",
            toolbarBtn: toolbarBtn,
            initData: true,
            params: () => {
                return {
                    fdValue: this.selectedValue,
                    fdValueType: this.selectedType
                }
            },
            afterDelete: () => {
                this.getCheckedGroup();
            },
            afterSave: () => {
                this.getCheckedGroup();
            }
        };

        let tSysMediumForm = {
            fdId: '',
            fdTypeIds: [],
            fdValueType: 2,
            fdValue: '',
            fdEmailType: '',
            fdComment: '',
            fdDisabled: 0,
            fdType: 2,
        };
        return {
            // ----- 左侧树 -----
            mediumTypeList: [],
            treeOptions: this.getTreeOption(),
            tSysMediumTypeFormDialog: {
                isAddDialog: true
            },
            tSysMediumTypeForm: {
                fdParentIsGroup: '',
                fdParentId: '',
                fdIsGroup: 0,
                fdName: '',
                fdCode: '',
                fdType: '',
                fdSort: '',
                fdComment: '',
            },
            tSysMediumTypeRules: {
                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'}
                ],
                fdType: [
                    {required: true, message: '请选择类型', trigger: 'blur'}
                ]
            },
            treeSelectedValue: "",
            // ----- 右侧 -----
            tSysMediumTable: tSysMediumTable,
            tSysMediumSearchForm: {
                likeStr: ""
            },
            tSysMediumSearchFormRules: {
                likeStr: [{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}]
            },
            orgPick: {
                type: "org-pick",
                searchPickTableOptions: {
                    multiSelect: false,
                },
                searchPickTreeOptions: {
                    searchTreeParams: {companyId: "ALL"},
                    searchTreeExpandAll: false
                },
                afterSearchPickConfirm: (row) => {
                    console.log(row);
                    console.log(111);
                }
            },
            orgTree: {
                type: "org-tree",
                multiSelect: false,
                fullName: true,
            },
            modelType: 1,
            // 批量编辑
            configPersonTreeOptions: this.getConfigPersonTreeOption(),
            configDeptTreeOptions: this.getConfigDeptTreeOptions(),
            configCustomTreeOptions: this.getConfigCustomTreeOptions(),
            tSysMediumTable2: tSysMediumTable2,
            selectedTreeOptions: this.getSelectedTreeOption(),
            noGroupMediumTypeList: [],
            tSysMediumForm: tSysMediumForm,
            tSysMediumFormRules: {
                fdTypeIds: [{required: true, message: "分组必填", trigger: 'blur'}],
                fdValueType: [{required: true, message: "值类型必填", trigger: 'blur'}],
                fdEmailType: [{required: true, message: "邮件收件类型必填", trigger: 'blur'}],
                fdValue: [
                    {required: true, message: "值必填"},
                    {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                ],
                fdDisabled: [{required: true, message: "请选择是否有效", trigger: 'blur'}],
                fdType: [{required: true, message: "请选择账套类型", trigger: 'blur'}],
            },
            selectedValue: "",
            selectedType: "",
            oldCheckedKey: [],
            loadingCheckGroup: false,
            showCopyConfigFlag: false,
            sourceOrgPickValue: "",
            sourceOrgPick: {
                type: "org-pick",
                searchPickValue: "",
                searchPickTableOptions: {multiSelect: false},
                searchPickTreeOptions: {
                    searchTreeParams: {companyId: "ALL"},
                    searchTreeExpandAll: false
                }
            },
            sourceConfigOptions: this.getSourceConfigOptions(),
            targetOrgPickValue: "",
            targetOrgPick: {
                type: "org-pick",
                searchPickValue: "",
                searchPickTableOptions: {multiSelect: false},
                searchPickTreeOptions: {
                    searchTreeParams: {companyId: "ALL"},
                    searchTreeExpandAll: false
                }
            },
            targetConfigOptions: this.getTargetConfigOptions(),

        }
    },
    watch: {
        'tSysMediumTypeForm.fdIsGroup'(val) {
            // 动态规则
            if (val == 1) {
                // 分组
                this.tSysMediumTypeRules.fdCode = [];
                this.tSysMediumTypeRules.fdType = [];
            } else {
                // 非分组
                this.tSysMediumTypeRules.fdCode = [
                    {required: true, message: '请输名称', trigger: 'blur'},
                    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                ];
                this.tSysMediumTypeRules.fdType = [
                    {required: true, message: '请选择类型', trigger: 'blur'}
                ];
            }
        },
        'targetOrgPickValue'(val) {
            this.$refs.targetConfigRef.reLoadTreeData();
            if (this.sourceOrgPickValue != null && this.sourceOrgPickValue != "") {
                this.$refs.sourceConfigRef.reLoadTreeData();
            }
        },
        'sourceOrgPickValue'(val) {
            this.$refs.sourceConfigRef.reLoadTreeData();
            if (this.targetOrgPickValue != null && this.targetOrgPickValue != "") {
                this.$refs.targetConfigRef.reLoadTreeData();
            }
        }
    },
    mounted() {
        this.getNoGroupMediumTypeList()
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                title: "消息分组",
                toolbarBtn: ["add", "edit", "del", "sort"],
                dialogTitle: "消息分组",
                placeholder: "名称/代码过滤",
                defaultExpandAll: false,
                showCheckbox: false,
                sortByDrag: true,
                onClick: (data, node, comp) => {
                    if (data.fdIsGroup == 1) {
                        this.treeSelectedValue = "";
                        return;
                    }
                    this.treeSelectedValue = data.fdId;
                    this.tSysMediumTable.title = `消息推送列表 -【${data.fdName}】`;
                    this.tSysMediumTable.columns = this.getColumns(data.fdType);
                    this.$refs.tSysMediumTableRef.reload();
                    // this.$refs.tSysMediumTableRef.refresh();
                },
                loadOptions: {
                    url: "/apm/sys/TSysMediumType/getTSysMediumTypeList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                        this.mediumTypeList = response.data;
                    },
                },
                editOptions: {
                    url: "/apm/sys/TSysMediumType/getTSysMediumTypeByFdId",
                    data: (node) => {
                        return {
                            fdId: node.fdId
                        }
                    },
                    success: (response) => {
                        this.tSysMediumTypeFormDialog.isAddDialog = false;
                        this.tSysMediumTypeForm = response.data;
                    },
                    error() {
                    },
                },
                insertUrl: "/apm/sys/TSysMediumType/insertTSysMediumType",
                insertData: () => {
                    return this.tSysMediumTypeForm
                },
                updateUrl: "/apm/sys/TSysMediumType/updateTSysMediumType",
                updateData: () => {
                    return this.tSysMediumTypeForm
                },
                deleteUrl: "/apm/sys/TSysMediumType/deleteByFdId",
                deleteData: (node) => {
                    return {
                        fdId: node.fdId
                    }
                },
                updateSortUrl: '/apm/sys/TSysMediumType/updateTSysMediumTypeSort',
                updateSortListUrl: '/apm/sys/TSysMediumType/updateTSysMediumTypeSortList',
                resetForm: () => {
                    this.tSysMediumTypeFormDialog.isAddDialog = true;
                    this.tSysMediumTypeForm = {
                        fdParentId: '',
                        fdIsGroup: 0,
                        fdName: '',
                        fdCode: '',
                        fdType: '',
                        fdSort: '',
                        fdComment: '',
                    };
                },
                afterOpenAddDialog: (node) => {
                    this.tSysMediumTypeForm.fdParentIsGroup = node.fdIsGroup;
                    this.tSysMediumTypeForm.fdParentId = node.fdId;
                },
                filterNodeMethod: (value, data) => {
                    // 树节点过滤
                    if (!value) return true;
                    if (data["fdCode"] != null && data["fdCode"].indexOf(value) !== -1) {
                        return true;
                    }
                    if (data["fdName"] != null && data["fdName"].indexOf(value) !== -1) {
                        return true;
                    }
                    return false;
                }
            };

            return treeOptions;
        },
        getIcon(type) {
            let icon = 'el-icon-guide';
            switch (type) {
                case 1:
                    icon = "el-icon-youjian";
                    break;
                case 2:
                    icon = "el-icon-duanxin";
                    break;
                case 3:
                    icon = "el-icon-qiyeweixin";
                    break;
                case 4:
                    icon = "el-icon-dingding";
                    break;
            }
            return icon;
        },
        // 右侧：查询事件
        searchEvent() {
            // 表单rules认证
            this.$refs.tSysMediumSearchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tSysMediumTableRef.refresh();
            });
        },
        getColumns(type, isMin) {
            let cols = [
                {
                    prop: 'fdTypeId',
                    label: '消息分组',
                    type: 'select',
                    width: isMin ? 150 : 180,
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    selectOptionsRemote: "typeList",
                    addDefaultValue: () => {
                        return this.treeSelectedValue;
                    }
                }, {
                    prop: 'fdValueType',
                    label: '值类型',
                    type: 'select',
                    width: isMin ? 60 : 80,
                    addDefaultValue: 2,
                    selectOptions: [{label: "组织部门", value: 1}, {label: "组织人员", value: 2}, {label: "自定义", value: 3}],
                    change(row) {
                        row.fdValue = "";
                    }
                }];
            if (type == 1) {
                // 邮箱
                cols.push(
                    {
                        prop: 'fdEmailType',
                        label: '收件类型',
                        type: 'select',
                        width: isMin ? 60 : 100,
                        addDefaultValue: 1,
                        selectOptions: [{label: "收件人", value: 1}, {label: "抄送", value: 2}]
                    }
                );
            }
            cols = cols.concat([
                {
                    prop: 'valueName',
                    label: '推送值',
                    type: 'slot',
                    slot: "fdValue",
                    width: isMin ? 200 : 270,

                }, {
                    prop: 'fdType',
                    label: '账套类型',
                    type: 'select',
                    align: "center",
                    width: 80,
                    help: `MediumUtil 工具类使用公司别过滤时，不会过滤“通用”类型的行，“账套”类型会被过滤。`,
                    addDefaultValue: 2,
                    selectOptions: [{label: "通用", value: 1}, {label: "账套", value: 2}],
                    html: function (value, row) {
                        if (value == 1) {
                            return '<div class="ap-tag-success">通用</div>'
                        } else if (value == 2) {
                            return '<div class="ap-tag-warning" >账套</el-tag>';
                        }
                    }
                }, {
                    prop: 'fdComment',
                    label: '备注',
                    type: 'input'
                }, {
                    prop: 'fdDisabled',
                    label: '是否有效',
                    type: 'select',
                    align: "center",
                    width: 80,
                    addDefaultValue: 0,
                    selectOptions: [{label: "有效", value: 0}, {label: "失效", value: 1}],
                    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>';
                        }
                    }
                }
            ])
            return cols;
        },
        getValue(row) {
            let sendValue = "";
            if (row.sendValue == undefined || row.sendValue == null) {
                sendValue = " <span style='color:red;'> (推送值为空)</span>";
            } else {
                sendValue = " <span style='color:#5f9ea0;'> (" + row.sendValue + ")</span>";
            }
            let valueName = row.valueName;
            let valueType = row.fdValueType;
            // 组织部门
            if (valueType == 1) {
                return valueName;
            }
            if (row.fdValueType == 2) {
                return valueName + sendValue;
            }
            // 自定义
            if (row.fdValueType == 3) {
                return row.sendValue;
            }
            return row.fdValue;
        },
        rowChange(row) {
            console.log(row);
            row.changeArr.push("fdValue")
        },
        showHelp() {
            const msg = `
                <b>一、推送值说明：</b><br>
                1、组织人员：优先获取组织人员表信息，人员表为空获取对应的用户表信息。<br>
                2、组织部门：只推送选择部门下的人员，不包括子部门。即为人员的部门id = 选择的部门id。<br>
                <b>二、后端工具类：MediumUtil</b><br>
                1、根据分组类型自动转换为邮箱、工号、手机号<br>
                2、自动过滤已删除、已失效、已离职的用户
                `
            this.$alert(msg, '推送配置说明', {dangerouslyUseHTMLString: true})
        },

        // 全部已配置人员
        getConfigPersonTreeOption() {
            let options = {
                title: "已配置人员",
                defaultExpandAll: false,
                onClick: (data, node, comp) => {
                    this.selectedValue = data.fdValue;
                    this.selectedType = 2;
                    this.getCheckedGroup();
                    this.$refs.tSysMediumTableRef2.reload();
                },
                loadOptions: {
                    url: "/apm/sys/TSysMedium/getConfigPersonList",
                    data: {},
                    success: (response) => {
                    },
                    error() {
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
                filterNodeMethod: (value, data) => {
                    // 树节点过滤
                    if (!value) return true;
                    if (data["fdNo"] != null && data["fdNo"].indexOf(value) !== -1) {
                        return true;
                    }
                    if (data["fdName"] != null && data["fdName"].indexOf(value) !== -1) {
                        return true;
                    }
                    return false;
                },
            };
            return options;
        },
        // 全部已配置部门
        getConfigDeptTreeOptions() {
            let options = {
                title: "已配置部门",
                defaultExpandAll: false,
                onClick: (data, node, comp) => {
                    this.selectedValue = data.fdValue;
                    this.selectedType = 1;
                    this.getCheckedGroup();
                    this.$refs.tSysMediumTableRef2.reload();
                },
                loadOptions: {
                    url: "/apm/sys/TSysMedium/getConfigDeptList",
                    data: {},
                    success: (response) => {
                    },
                    error() {
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
                filterNodeMethod: (value, data) => {
                    // 树节点过滤
                    if (!value) return true;
                    if (data["fdFullName"] != null && data["fdFullName"].indexOf(value) !== -1) {
                        return true;
                    }
                    if (data["fdName"] != null && data["fdName"].indexOf(value) !== -1) {
                        return true;
                    }
                    return false;
                },
            };
            return options;
        },
        // 全部已配置自定义
        getConfigCustomTreeOptions() {
            let options = {
                title: "已配置自定义",
                defaultExpandAll: false,
                onClick: (data, node, comp) => {
                    this.selectedValue = data.fdValue;
                    this.selectedType = 3;
                    this.getCheckedGroup();
                    this.$refs.tSysMediumTableRef2.reload();
                },
                loadOptions: {
                    url: "/apm/sys/TSysMedium/getConfigCustomList",
                    data: {},
                    success: (response) => {
                    },
                    error() {
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
                filterNodeMethod: (value, data) => {
                    // 树节点过滤
                    if (!value) return true;
                    if (data["fdFullName"] != null && data["fdFullName"].indexOf(value) !== -1) {
                        return true;
                    }
                    if (data["fdName"] != null && data["fdName"].indexOf(value) !== -1) {
                        return true;
                    }
                    return false;
                },
            };
            return options;
        },
        handleFullName(fullName) {
            // 删除第一层
            fullName = fullName.substring(1, fullName.length)
            fullName = fullName.substring(fullName.indexOf('/'), fullName.length);
            fullName = fullName.substring(0, fullName.lastIndexOf('/'));
            return " " + fullName;
        },
        getNoGroupMediumTypeList() {
            this.$request({
                url: '/apm/sys/TSysMediumType/getTSysMediumTypeList',
                method: 'post',
                data: {
                    fdIsGroup: 0,
                }
            }).then(response => {
                this.noGroupMediumTypeList = response.data;
            })
        },
        getSelectedTreeOption() {
            let treeOptions = {
                title: "已配置消息分组",
                toolbarBtn: [],
                defaultExpandAll: false,
                showCheckbox: true,
                onCheck: (data, node, comp, halfCheckedKeys, checkedKeys) => {
                    let nodes = this.$refs.selectedTreeRef.getTreeRef().getCheckedNodes();
                    let types = this.tSysMediumForm.fdTypeIds;
                    let ids = [];
                    for (let i = 0; i < nodes.length; i++) {
                        let tempId = nodes[i].fdId;
                        ids.push(tempId);
                        if (nodes[i].fdIsGroup == 1) {
                            continue;
                        }
                        // 新添加节点
                        if (this.oldCheckedKey.indexOf(tempId) < 0 && types.indexOf(tempId) < 0) {
                            types.push(tempId);
                        }
                    }

                    // 取消选中
                    for (let i = types.length - 1; i >= 0; i--) {
                        if (ids.indexOf(types[i]) < 0) {
                            types.splice(i, 1);
                        }
                    }
                },
                loadOptions: {
                    url: "/apm/sys/TSysMediumType/getTSysMediumTypeList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {

                    },
                },
            };

            return treeOptions;
        },
        getCheckedGroup() {
            this.loadingCheckGroup = true;
            this.$refs.selectedTreeRef.getTreeRef().setCheckedKeys([], true)
            this.$request({
                url: '/apm/sys/TSysMedium/getConfigTypeList',
                method: 'post',
                data: {
                    fdValueType: this.selectedType,
                    fdValue: this.selectedValue
                }
            }).then(response => {
                this.oldCheckedKey = response.data;
                this.$refs.selectedTreeRef.getTreeRef().setCheckedKeys(response.data, true)
            }).finally(() => {
                this.loadingCheckGroup = false;
            })
        },
        batchSave() {
            // 表单rules认证
            this.$refs.tSysMediumFormRef.validate((valid) => {
                if (!valid) {
                    return false;
                }
                this.tSysMediumForm.fdTypeId = this.tSysMediumForm.fdTypeIds.join(",");
                this.$request({
                    url: '/apm/sys/TSysMedium/insertTSysMediums',
                    method: 'post',
                    data: this.tSysMediumForm
                }).then(response => {
                    this.$message.success("批量插入成功");
                    this.tSysMediumForm.fdTypeId = []
                    this.$refs.tSysMediumTableRef2.refresh();
                })
            });
        },
        showCopyConfig() {
            this.showCopyConfigFlag = true;
        },
        deleteResignPerson() {
            this.$confirm("删除已离职人员配置？", '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$request({
                    url: '/apm/sys/TSysMedium/deleteResignPerson',
                    method: 'post',
                    data: {}
                }).then(response => {
                    this.$message.success(response.data);
                })
            })
        },
        getSourceConfigOptions() {
            return {
                title: "",
                initData: false,
                onClick: (data, node, comp) => {
                },
                loadOptions: {
                    url: "/apm/sys/TSysMedium/getSysPersonConfigList",
                    data: () => {
                        return {
                            personId: this.sourceOrgPickValue,
                            comparePersonId: this.targetOrgPickValue
                        }
                    },
                    success: (response) => {
                    },
                    error() {
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
            };
        },
        getTargetConfigOptions() {
            return {
                title: "",
                initData: false,
                onClick: (data, node, comp) => {
                },
                loadOptions: {
                    url: "/apm/sys/TSysMedium/getSysPersonConfigList",
                    data: () => {
                        return {
                            personId: this.targetOrgPickValue,
                            comparePersonId: this.sourceOrgPickValue
                        }
                    },
                    success: (response) => {
                    },
                    error() {
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                },
            };
        },
        copyConfig() {
            return new Promise((resolve) => {
                if (this.sourceOrgPickValue == null || this.sourceOrgPickValue == "") {
                    this.$message.error('请选择来源人员');
                    resolve();
                    return;
                }
                if (this.targetOrgPickValue == null || this.targetOrgPickValue == "") {
                    this.$message.error('请选择目标人员');
                    resolve();
                    return;
                }
                this.$confirm('确定将【来源人员】的配置，复制给【目标人员】', '提示', {
                    confirmButtonText: '确定复制',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$request({
                        url: '/apm/sys/TSysMedium/copyConfig',
                        method: 'post',
                        data: {
                            targetPersonId: this.targetOrgPickValue,
                            sourcePersonId: this.sourceOrgPickValue
                        },
                    }).then(response => {
                        this.$message.success(response.data);
                        this.$refs.targetConfigRef.reLoadTreeData();
                        this.$refs.sourceConfigRef.reLoadTreeData();
                    }).finally(() => {
                        resolve();
                    });
                }).finally(() => {
                    resolve();
                });
            });
        }
    }
}
</script>

<style scoped>
.tree-node {
    font-size: 15px;
}

.line-div {
    height: 100%;
    border-right: 1px solid #cccccc;
    margin: 0px 10px;
}

.one-level /deep/ .el-tree-node__expand-icon {
    display: none;
}

.my-form /deep/ .el-form-item__content,
.my-form /deep/ .el-select {
    width: 200px;
}
</style>
