<template>
    <div class="user-select-box">
        <el-dialog
            title="用户选择"
            width="1000px"
            :close-on-click-modal="false"
            :append-to-body="true"
            v-dialogDrag
            center
            :visible.sync="visible"
            class="select-modal-box">
            <div class="select-modal-body">
                <!--搜索-->
                <div style="overflow: hidden">
                    <div style="float: left">
                        <el-form :inline="true" ref="contactSearchForm" @keyup.enter.native="searchTabForm()" @submit.native.prevent>
                            <el-form-item prop="name">
                                <el-input size="small" v-model="contactSearchUserName" placeholder="请输入姓名" clearable>
                                    <el-button slot="append" icon="el-icon-search" @click="searchTabForm()"></el-button>
                                </el-input>
                            </el-form-item>
                            <el-button type="text" v-if='searchTag' @click="searchTag = false;searchForm.office.id = ''">返回</el-button>
                            <!--<el-form-item>
                                <el-button type="primary" @click="searchTabForm()" size="small">查询</el-button>
                                <el-button @click="resetContactSearch()" size="small">重置</el-button>
                            </el-form-item>-->
                        </el-form>
                    </div>
                    <div style="float: right">
                        <el-button @click="visible = false">取消</el-button>
                        <el-button type="danger" @click="doSubmit()">确定</el-button>
                    </div>
                </div>

                <el-row>
                    <el-col :span="16" v-if='!searchTag'>
<!--                        <span class="tab-title">类别</span>-->
                        <el-tabs :tab-position="'left'" v-model="activeTabId">
                            <el-tab-pane name="contact">
                                <div slot="label" class="tab-pane">
                                    <span>常用人员</span>
                                </div>
                                <el-table
                                    :data="contactUserList"
                                    v-loading="contactLoading"
                                    size="medium"
                                    ref="contactUserTable"
                                    height="500"
                                    @selection-change="handleSelectionChange"
                                    @row-click="handleRowClick"
                                    @select="handleRowSelect"
                                    @select-all="allSelect"
                                    style="width: 100%;">
                                    <el-table-column
                                        type="selection"
                                        header-align="center"
                                        align="center"
                                        width="50" :selectable="checkSelectableCondition">
                                    </el-table-column>
                                    <el-table-column
                                        prop="name"
                                        min-width="60"
                                        label="姓名">
                                    </el-table-column>
                                    <el-table-column
                                        prop="company.name"
                                        min-width="110"
                                        label="单位">
                                    </el-table-column>
                                    <el-table-column
                                        prop="office.name"
                                        min-width="110"
                                        label="部门">
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane name="all">
                                <div slot="label" class="tab-pane">
                                    <span>所有单位</span>
                                </div>
                                <el-col :span="16">
                                    <div class="right-box">
                                        <div class="title">单位</div>
                                        <!--<el-tree
                                            class="filter-tree"
                                            :data="allUserOfficeTreeData"
                                            :props="{
                                                  value: 'id',             // ID字段名
                                                  label: 'shortName',         // 显示名称
                                                  children: 'children'    // 子级字段名
                                                }"
                                            :filter-node-method="filterNode"
                                            :expand-on-click-node="false"
                                            @node-click="handleNodeClick"
                                            ref="allOfficeTree">
                                        </el-tree>-->
                                        <el-scrollbar class="allOffice" style="height: 452px">
                                            <el-tree
                                                class="filter-tree"
                                                :load="loadOfficeNode"
                                                lazy
                                                node-key="all"
                                                :props="{
                                                  value: 'id',             // ID字段名
                                                  label: 'shortName',         // 显示名称
                                                  children: 'children'    // 子级字段名
                                                }"
                                                :filter-node-method="filterNode"
                                                :expand-on-click-node="false"
                                                @node-click="handleNodeClick"
                                                ref="allOfficeTree"></el-tree>
                                        </el-scrollbar>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <el-table
                                        :data="allUserList"
                                        v-loading="allUserLoading"
                                        size="medium"
                                        ref="allUserTable"
                                        height="500"
                                        @selection-change="handleSelectionChange"
                                        @select="handleRowSelect"
                                        @row-click="handleRowClick"
                                        @select-all="allSelect"
                                        v-load-more="handleLoadMore"
                                        style="width: 100%;">
                                        <el-table-column
                                            type="selection"
                                            header-align="center"
                                            align="center"
                                            width="50" :selectable="checkSelectableCondition">
                                        </el-table-column>
                                        <el-table-column
                                            prop="name"
                                            label="姓名">
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-tab-pane>
                            <el-tab-pane v-for="(officeGroup, index) in officeGroupList" :key="'officeGroupPanel' + officeGroup.id" :name="officeGroup.id">
                                <div slot="label" class="tab-pane">
                                    <span>{{officeGroup.name}}</span>
                                </div>
                                <el-col :span="16">
                                    <div class="right-box">
                                        <div class="title">单位</div>
                                        <el-scrollbar class="allOffice" style="height: 452px">
                                            <el-tree
                                                class="filter-tree"
                                                :load="loadOfficeNode"
                                                lazy
                                                :node-key="officeGroup.id"
                                                :props="{
                                                  value: 'id',             // ID字段名
                                                  label: 'shortName',         // 显示名称
                                                  children: 'children'    // 子级字段名
                                                }"
                                                :filter-node-method="filterNode"
                                                :expand-on-click-node="true"
                                                @node-click="handleNodeClick"
                                                :ref="'officeTree' + index"></el-tree>
                                        </el-scrollbar>
                                    </div>
                                    <!--<el-tree
                                        :data="officeGroupOfficeTreeList[officeGroup.id]"
                                        :props="{
                                                  value: 'id',
                                                  label: 'name',         // 显示名称
                                                  children: 'children'    // 子级字段名
                                                }"
                                        default-expand-all
                                        :expand-on-click-node="false"
                                        @node-click="handleNodeClick"
                                        :ref="'officeTree' + index">
                                    </el-tree>-->
                                </el-col>
                                <el-col :span="8">
                                    <el-table
                                        :data="officeGroupUserList[officeGroup.id]"
                                        :officeGroupId="officeGroup.id"
                                        v-loading="officeGroupLoading[officeGroup.id]"
                                        border
                                        size="medium"
                                        ref="officeGroupUserTables"
                                        height="500"
                                        @selection-change="handleSelectionChange"
                                        @select="handleRowSelect"
                                        style="width: 100%;border: none !important;">
                                        <el-table-column
                                            type="selection"
                                            header-align="center"
                                            align="center"
                                            width="50" :selectable="checkSelectableCondition">
                                        </el-table-column>
                                        <el-table-column
                                            prop="name"
                                            label="姓名">
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>

                    <!--检索结果-->
                    <el-col :span="16" v-else>
                        <span class="tab-title">类别</span>
                        <el-tabs :tab-position="'left'" v-model="activeSearch">
                            <el-tab-pane name="search">
                                <div slot="label" class="tab-pane">
                                    <span>检索结果</span>
                                </div>
                                <el-table
                                    :data="allUserList"
                                    v-loading="allUserLoading"
                                    ref="searchUserTable"
                                    size="medium"
                                    height="500"
                                    @selection-change="handleSelectionChange"
                                    @select="handleRowSelect"
                                    @row-click="handleRowClick"
                                    @select-all="allSelect"
                                    v-load-more="handleLoadMore"
                                    style="width: 100%;">
                                    <el-table-column
                                        type="selection"
                                        header-align="center"
                                        align="center"
                                        width="50" :selectable="checkSelectableCondition">
                                    </el-table-column>
                                    <el-table-column
                                        prop="name"
                                        label="姓名">
                                        <template slot-scope="scope">
                                            <span style="color: #2B7DBC">{{scope.row.name}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="company.name"
                                        min-width="110"
                                        label="单位">
                                    </el-table-column>
                                    <el-table-column
                                        prop="office.name"
                                        min-width="110"
                                        label="部门">
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>

                    <!--右侧已选人员-->
                    <el-col :span="8" class="right-box">
                        <div class="title">已选人员</div>
                        <el-scrollbar class="allOffice" style="height: 452px">
                            <div class="tag-box">
                                <el-tag v-for="tag in dataListSelections"
                                        :key="tag.id"
                                        closable
                                        :disable-transitions="false"
                                        @close="handleDelTag(tag)">
                                    {{ tag.name }}
                                </el-tag>
                            </div>
                        </el-scrollbar>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Vue from 'vue'

export default {
    data () {
        return {
            visible: false,     // 是否显示当前选择框
            searchForm: {       // 人员列表检索表单
                office: {
                    id: ''
                },
                name: ''
            },
            filterText: '', //部门搜索的过滤文本
            // dataListAllSelections: [],   // 所有选中的数据包含跨页数据
            dataListSelections: [],
            dataListSelectionsMap: {},
            pageNo: 1,          // 分页查询, 暂时固定
            pageSize: 10,       // 分页数量, 暂时不用
            orderBy: '',        // 排序字段
            activeTabId: 'contact',   //默认打开近期联系人面板
            currentOfficeGroupId: '',   // 当前已激活的自定义组织机构面板的组ID
            // 近期联系人
            contactLoading: false,     // 是否显示加载图标
            contactSearchUserName: '',    // 近期联系人搜索关键字
            contactUserList: [],    // 近期联系人列表
            searchUserList: [],    // 搜索人列表
            // 所有部门
            allUserLoading: false,     // 是否显示加载图标
            allUserSearchUserName: '',   // 全部人员的人员列表检索关键字
            allUserOfficeTreeData: [],     // 全部人员的组织机构树列表
            allUserSelectOfficeName: '',   // 当前选中的部门名称
            allUserList: [],   // 全部人员的人员列表
            // 自定义部门组
            officeGroupLoading: {},
            officeGroupList: [],    // 自定义组织机构面板列表
            officeGroupSearchUserName: {},  //自定义组织机构面板内的搜索
            officeGroupOfficeTreeList: {},  // 自定义组织机构面板内的组织机构树
            officeGroupSelectOfficeName: {},  // 自定义组织机构面板内的组织机构树
            officeGroupUserList: {},    //自定义组织机构面板内的用户列表
            userGroupList: [],       // 自定义用户组面板列表
            node: null,
            activeSearch: 'search',
            searchTag: false
        }
    },
    props: {
        selectData: {
            type: Array,
            default: () => {
                return []
            }
        },
        limit: {
            type: Number,
            default: 0
        },
        checkSelectable: ''
    },
    watch: {
        filterText (val) {
            this.$refs.officeTree.filter(val)
        }
    },
    created () {
    },
    methods: {
        loadNode (node, resolve) {
            //如果展开第一级节点，从后台加载一级节点列表
            if (node.level === 0) {
                this.loadRootNode(resolve)
            }
            //如果展开其他级节点，动态从后台加载下一级节点列表
            if (node.level >= 1) {
                this.loadChildren(node, resolve)
            }
        },
        //加载第一级节点
        loadRootNode (resolve) {
            this.$http({
                url: '/sys/office/list',
                method: 'get',
                params: {
                    'parent.id': '0'
                }
            }).then(({data}) => {
                return resolve(data.list)
            })
        },
        //加载节点的子节点集合
        loadChildren (node, resolve) {
            this.$http({
                url: '/sys/office/list',
                method: 'get',
                params: {
                    'parent.id': node.data.id
                }
            }).then(({data}) => {
                return resolve(data.list)
            })
        },
        init () {
            this.dataListSelections = []
            this.visible = true
            this.pageNo = 1
            this.allUserList = []
            this.$nextTick(() => {
                this.dataListSelections = JSON.parse(JSON.stringify(this.selectData))
                // this.refreshAllUserOfficeTreeData()
                // this.resetUserSearch()
                this.resetContactSearch()
                this.refreshOfficeGroups()
            })
        },
        searchTabForm () {
            if (this.contactSearchUserName !== '') {
                this.searchTag = true
            } else {
                this.searchTag = false
            }
            this.refreshUserList()
        },
        // 设置选中的方法
        setTableRowSelect () {
            // 清空所有用户表
            if (this.searchTag === true) {
                this.$refs.searchUserTable.clearSelection()
            } else {
                this.$refs.contactUserTable.clearSelection()
                this.$refs.allUserTable.clearSelection()
            }
            if (this.$refs.officeGroupUserTables && this.$refs.officeGroupUserTables.length > 0) {
                this.$refs.officeGroupUserTables.forEach(table => {
                    table.clearSelection()
                })
            }
            // 没有选中项, 结束选择
            if (!this.dataListSelections || this.dataListSelections.length <= 0) {
                return
            }
            if (this.limit === 1) {
                this.dataListSelections = [this.dataListSelections[this.dataListSelections.length - 1]]
            } else if (this.limit >0 && this.dataListSelections.length > this.limit) {
                this.$message({
                    showClose: true,
                    message: `你最多只能选择 ${this.limit} 个用户！`,
                    type: 'warning'
                })
            }
            // 标识当前行的唯一键的名称
            let selectAllIds = []
            this.dataListSelections.forEach(row => {
                selectAllIds.push(row['id'])
            })
            // 设置联系人表格选中项
            for (let i = 0; i < this.contactUserList.length; i++) {
                if (selectAllIds.indexOf(this.contactUserList[i]['id']) >= 0) {
                    this.$refs.contactUserTable.toggleRowSelection(this.contactUserList[i], true)
                }
            }
            // 设置所有部门表格选中项
            for (let i = 0; i < this.allUserList.length; i++) {
                if (selectAllIds.indexOf(this.allUserList[i]['id']) >= 0) {
                    this.$refs.allUserTable.toggleRowSelection(this.allUserList[i], true)
                    if (this.searchTag === true) {
                        this.$refs.searchUserTable.toggleRowSelection(this.allUserList[i], true)
                    }
                }
            }
            // 设置自定义组织机构部门用户表格选中项
            if (this.$refs.officeGroupUserTables && this.$refs.officeGroupUserTables.length > 0) {
                let officeGroupId = this.currentOfficeGroupId
                this.$refs.officeGroupUserTables.forEach(table => {
                    if (officeGroupId === table.$attrs.officeGroupId) {
                        for (let i = 0; i < this.officeGroupUserList[officeGroupId].length; i++) {
                            if (selectAllIds.indexOf(this.officeGroupUserList[officeGroupId][i]['id']) >= 0) {
                                table.toggleRowSelection(this.officeGroupUserList[officeGroupId][i], true)
                            }
                        }
                        return false
                    }
                })
            }
        },
        // 标签选项卡切换事件
        handleTabClick (tab) {
            this.searchForm.office.id = ''
            if (tab.name === 'contact') {
                this.searchForm.name = this.contactSearchUserName
            } else if (tab.name === 'all') {
                this.searchForm.name = this.allUserSearchUserName
            } else {
                this.searchForm.name = this.officeGroupSearchUserName[this.currentOfficeGroupId]
                this.currentOfficeGroupId = tab.name
            }
        },
        // 加载所有左侧tab标签页及标签页内的组织机构树
        refreshOfficeGroups () {
            this.$http({
                url: '/sys/officeGroup/list',
                method: 'get',
                params: {
                    'pageNo': this.pageNo,
                    'pageSize': -1
                }
            }).then(({ data }) => {
                if (data && data.success) {
                    data.page.list.forEach(officeGroup => {
                        this.refreshOfficeGroupOfficeTreeData(officeGroup.id)
                        Vue.set(this.officeGroupLoading, officeGroup.id, false)
                        Vue.set(this.officeGroupSearchUserName, officeGroup.id, '')
                        Vue.set(this.officeGroupUserList, officeGroup.id, [])
                        Vue.set(this.officeGroupOfficeTreeList, officeGroup.id, [])
                        Vue.set(this.officeGroupSelectOfficeName, officeGroup.id, '')
                        Vue.set(this.officeGroupUserList, officeGroup.id, [])
                    })
                    this.officeGroupList = data.page.list
                }
            })
        },
        refreshOfficeGroupOfficeTreeData (officeGroupId) {
            this.$http({
                url: '/sys/officeGroup/office/list',
                method: 'get',
                params: {
                    'pageNo': this.pageNo,
                    'pageSize': -1,
                    'id': officeGroupId
                }
            }).then(({ data }) => {
                if (data && data.success) {
                    this.officeGroupOfficeTreeList[officeGroupId] = data.list
                }
            })
        },
        // 加载常用联系人列表
        refreshContactUserList () {
            this.contactLoading = true
            this.$http({
                url: '/sys/contact/user/list',
                method: 'post',
                params: {
                    'pageNo': this.pageNo,
                    'pageSize': -1,
                    name: this.contactSearchUserName
                }
            }).then(({ data }) => {
                if (data && data.success) {
                    this.contactUserList = data.page.list
                }
                this.$nextTick(() => {
                    this.setTableRowSelect()
                })
                this.contactLoading = false
            }).catch(() => {
                this.contactLoading = false
            })
        },
        resetContactSearch () {
            this.contactSearchUserName = ''
            this.refreshContactUserList()
            this.refreshUserList()
        },
        // 加载"所有单位"的组织机构树
        refreshAllUserOfficeTreeData () {
            this.$http({
                url: `/sys/office/treeData`,
                method: 'get'
            }).then(({ data }) => {
                this.allUserOfficeTreeData = data.treeData
            })
        },
        // "所有单位"的组织机构树节点点击事件
        handleNodeClick (data) {
            this.searchForm.office.id = data.id
            if (!this.currentOfficeGroupId) {
                this.allUserSelectOfficeName = data.name
            }
            this.pageNo = 1
            this.refreshUserList()
        },
        // "所有单位"的组织机构树节点取消选中事件
        handleNodeClose () {
            this.searchForm.office.id = ''
            this.allUserSelectOfficeName = ''
            this.refreshUserList()
        },
        // 过滤"所有单位"的组织机构树
        filterNode (value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        // 获取"所有单位"下用户列表
        refreshUserList () {
            if (this.currentOfficeGroupId) {
                this.searchForm.name = this.officeGroupSearchUserName[this.currentOfficeGroupId]
                this.officeGroupLoading[this.currentOfficeGroupId] = true
            } else {
                this.searchForm.name = this.contactSearchUserName
                this.allUserLoading = true
            }
            this.$http({
                url: '/sys/user/list',
                method: 'get',
                params: {
                    'pageNo': this.pageNo,
                    'pageSize': 50,
                    'orderBy': this.orderBy,
                    ...this.searchForm
                }
            }).then(({ data }) => {
                if (data && data.success) {
                    if (this.currentOfficeGroupId) {
                        Vue.set(this.officeGroupUserList, this.currentOfficeGroupId, data.page.list)
                        this.officeGroupUserList[this.currentOfficeGroupId] = data.page.list
                    } else {
                        this.allUserList = data.page.list
                    }
                    if (this.currentOfficeGroupId) {
                        this.officeGroupLoading[this.currentOfficeGroupId] = false
                    } else {
                        this.allUserLoading = false
                    }
                }
                this.$nextTick(() => {
                    this.setTableRowSelect()
                })
            }).catch(() => {
                if (this.currentOfficeGroupId) {
                    this.officeGroupLoading[this.currentOfficeGroupId] = false
                } else {
                    this.allUserLoading = false
                }
            })
        },
        // 重置搜索表单
        resetUserSearch () {
            if (this.currentOfficeGroupId) {
                this.officeGroupSearchUserName[this.currentOfficeGroupId] = ''
            } else {
                this.allUserSearchUserName = ''
            }
            this.searchForm.name = ''
            this.refreshUserList()
        },
        // 处理单行选中或取消选中, 判断选中项最后不在选中结果里, 说明删除了元素, 在结果中删除本元素
        handleRowSelect (selections, currentRow) {
            let result = selections.filter(row => row.id === currentRow.id)
            if (result.length === 0) {
                this.dataListSelections.splice(this.dataListSelections.findIndex(row => row.id === currentRow.id), 1)
            }
            this.$nextTick(() => {
                this.setTableRowSelect()
            })
        },
        // 行点击事件, 切换对应行的选中状态
        handleRowClick (currentRow, index) {
            // 判断点击的行是否已经出现在选中项列表
            let result = this.dataListSelections.filter(row => row.id === currentRow.id)
            // 如果点击的行未出现在选项中, 则将选项推送到选中项中
            if (result.length === 0) {
                //this.dataListSelections.push(currentRow)
                // 否则从选中项中删除点击的行
            } else {
                this.dataListSelections.splice(this.dataListSelections.findIndex(row => row.id === currentRow.id), 1)
            }
            this.$nextTick(() => {
                this.setTableRowSelect()
            })
        },
        allSelect (selection) {
            if (selection.length === 0) {
                this.dataListSelections = []
            } else if (this.limit > 0 && selection.length > this.limit) {
                this.dataListSelections = this.dataListSelections.slice(0, this.limit)
            }
        },
        handleLoadMore () {
            if (this.currentOfficeGroupId) {
                this.searchForm.name = this.officeGroupSearchUserName[this.currentOfficeGroupId]
                this.officeGroupLoading[this.currentOfficeGroupId] = true
            } else {
                this.searchForm.name = this.contactSearchUserName
                this.allUserLoading = true
            }
            this.$http({
                url: '/sys/user/list',
                method: 'get',
                params: {
                    'pageNo': ++this.pageNo,
                    'pageSize': 50,
                    'orderBy': this.orderBy,
                    ...this.searchForm
                }
            }).then(({ data }) => {
                if (data && data.success) {
                    if (this.currentOfficeGroupId) {
                        Vue.set(this.officeGroupUserList, this.currentOfficeGroupId, data.page.list)
                        this.officeGroupUserList[this.currentOfficeGroupId].push(data.page.list)
                    } else {
                        if (this.allUserList.length < data.page.count) {
                            for (var item in data.page.list) {
                                this.allUserList.push(data.page.list[item])
                            }
                        } else {
                            this.$message({
                                message: '已加载全部',
                                type: 'warning',
                                duration: 1500
                            })
                        }
                    }
                    if (this.currentOfficeGroupId) {
                        this.officeGroupLoading[this.currentOfficeGroupId] = false
                    } else {
                        this.allUserLoading = false
                    }
                }
                this.$nextTick(() => {
                    this.setTableRowSelect()
                })
            }).catch(() => {
                if (this.currentOfficeGroupId) {
                    this.officeGroupLoading[this.currentOfficeGroupId] = false
                } else {
                    this.allUserLoading = false
                }
            })
        },
        // 多选
        handleSelectionChange (selectionRows) {
            // 所有已选择的元素, id作为key, 元素作为value
            let selectedRowMap = {}
            if (this.dataListSelections) {
                this.dataListSelections.forEach(row => {
                    selectedRowMap[row.id] = row
                })
            }
            // 本次新选择的内容
            selectionRows.forEach(row => {
                if (!selectedRowMap[row.id]) {
                    selectedRowMap[row.id] = row
                }
            })
            // 全部选择的内容
            this.dataListSelections = []
            for (let key in selectedRowMap) {
                this.dataListSelections.push(selectedRowMap[key])
            }
        },
        // 删除选中的人员标签
        handleDelTag (tag) {
            this.dataListSelections.splice(this.dataListSelections.indexOf(tag), 1)
            this.$nextTick(() => {
                this.setTableRowSelect()
            })
        },
        // 排序
        handleSortChange (obj) {
            if (obj.prop === 'office.name') {
                obj.prop = 'o.name'
            }
            if (obj.prop === 'company.name') {
                obj.prop = 'c.name'
            }
            if (obj.order === 'ascending') {
                this.orderBy = obj.prop + ' asc'
            } else if (obj.order === 'descending') {
                this.orderBy = obj.prop + ' desc'
            } else {
                this.orderBy = ''
            }
            this.refreshUserList()
        },
        // 确认选择
        doSubmit () {
            if (this.limit <=0 && this.dataListSelections.length > this.limit) {
                this.$message({
                    showClose: true,
                    message: `你最多只能选择 ${this.limit} 个用户！`,
                    type: 'warning'
                })
                return
            }
            this.$emit('confirmSelect', this.dataListSelections)
            this.visible = false
        },
        // 设置禁止选中条件
        checkSelectableCondition (row) {
            return row.id !== this.checkSelectable
        },

        loadOfficeNode (node, resolve) {
            //如果展开第一级节点，从后台加载一级节点列表
            let treeKey = node.store.key
            let url = ''
            if (treeKey && treeKey !== 'all') {
                url = '/sys/officeGroup/office/list'
            } else {
                url = '/sys/office/list'
                treeKey = ''
            }
            if (node.level === 0) {
                this.node = node
                this.$http({
                    url: url,
                    method: 'get',
                    params: {
                        'id': treeKey,
                        'parent.id': '0'
                    }
                }).then(data => {
                    return resolve(data.data.list)
                })
            }
            //如果展开其他级节点，动态从后台加载下一级节点列表
            if (node.level >= 1) {
                this.$http({
                    url: url,
                    method: 'get',
                    params: {
                        'id': treeKey,
                        'parent.id': node.data.id
                    }
                }).then(data => {
                    return resolve(data.data.list)
                })
            }
        }
    }
}
</script>

<style lang="scss">
    .allOffice {
        .el-scrollbar__wrap {
            overflow-x: hidden;
        }
    }

    .select-modal-box {
        .tab-title{
            position: absolute;
            z-index: 1;
            line-height: 46px;
            color: #000;
            font-weight: 600;
            text-align: center;
            width: 150px;
        }
        .returnBtnClass{
            color: #FFF;
            background-color: #d9534f;
            border-color: #c64743;
            &:hover{
                background: #ef9997;
                border-color: #ef9997;
                color: #FFF;
            }
        }
        .greenBtnClass{
            color: #FFF;
            background-color: #5cb85c;
            border-color: #4ca64c;
            &:hover{
                background: #89e089;
                border-color: #89e089;
                color: #FFF;
            }
        }
        .el-row {
            border: 1px solid #ddd;
            border-right: none;
        }
        .el-tabs__nav{
            border-top: 1px solid #ddd;
        }

        .el-dialog__header {
            background: #E9ECF2;
            color: #303030;
        }

        .el-dialog__body {
            padding: 25px 45px 45px;
        }
        .el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable{
            padding: 48px 0 30px 0;
        }
        .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev{
            top: 10px;
            z-index: 999;
        }
        .el-tabs__header.is-left {
            height: 500px !important;
            background: #e9ecf2;
            margin-right: 0 !important;
            width: 150px;
        }

        .el-tabs__nav-wrap.is-left {
            padding-top: 47px;

            &:after {
                width: 1px !important;
                background-color: #dddddd;
            }
        }

        .el-tabs--left .el-tabs__active-bar.is-left {
            width: 1px !important;
            background: #ddd;
        }

        .el-tabs__item {
            padding: 0;
            height: initial !important;
            line-height: initial;
            border-bottom: 1px solid #ddd;
            font-weight: 600;

            &:hover .tab-pane {
                color: #F54D4F !important;
            }

            .tab-pane {
                text-align: center;
                padding: 10px 0;
                line-height: 24px;
                color: #000;

                img {
                    display: block;
                    margin: 0 auto;
                }
            }
        }

        .is-active {
            .tab-pane {
                background: #fff;
                color: #F54D4F;
                border-right: 1px solid #ddd;
            }
        }

        .el-table td {
            border-bottom: none;
        }

        .el-table th.is-leaf {
            background-color: #e9ecf2 !important;
            padding: 8px 0 !important;
            border-bottom: 1px solid #ddd;
            color: #505050;
        }

        .right-box {
            height: 500px;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;

            .title {
                line-height: 47px;
                border-bottom: 1px solid #ddd;
                background: #e9ecf2;
                padding: 0 15px;
                color: #505050;
                font-weight: 600;
            }

            .tag-box {
                padding: 10px;
            }
        }

        .el-tag {
            margin-right: 5px;
            margin-bottom: 5px;
            margin-left: 0px !important;
            white-space: normal;
            height: initial;
            background-color: #F54D4F;
            border-color: #F54D4F;
            color: #fff;
            .el-tag__close{
                color: #fff;
            }
        }

        .el-table th.gutter {
            display: none;
        }

        .el-table__body-wrapper::-webkit-scrollbar {
            width: 6px; // 横向滚动条
            height: 6px; // 纵向滚动条 必写
        }

        .el-table__body-wrapper::-webkit-scrollbar-thumb {
            background-color: rgba(144, 147, 153, .3);
            border-radius: 3px;
        }

        .el-table__header-wrapper {
            background: #e9ecf2;
        }

        .el-tree {
            padding: 0 15px;
            margin-top: 15px;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner{
            background-color: #F54D4F;
            border-color: #F54D4F;
        }
        .el-checkbox__input.is-indeterminate .el-checkbox__inner{
            background-color: #F54D4F;
            border-color: #F54D4F;
        }
    }
</style>
