<template>
    <el-dialog :visible.sync ="value"
               :before-close="handleCloseDialog"
               :width="width"
               class="cbimui-person-x"
               :close-on-click-modal="false"
               :title="title">
        <el-input v-model="search.input" size="mini" clearable :placeholder="placeHolder" @change="getSearchValue"></el-input>
        <div class="cbimui-content">
            <div class="cbimui-content-left">
                <div class="cbimui-content-title">
                    人员选择
                </div>
                <el-tree v-if="search.show"
                         ref="tree0"
                         v-loading="search.loading"
                         class="cbimui-content-value"
                         show-checkbox
                         :node-key="nodeKey"
                         :default-checked-keys="defaultCheckedKeys"
                         :default-expanded-keys="defaultExpandedKeys"
                         :props="defaultProps"
                         :data="search.result"
                         @check-change="handleCheckChange">
                </el-tree>
                <el-tree v-else
                     ref="tree1"
                     v-loading="search.loading"
                     class="cbimui-content-value"
                     show-checkbox
                     :node-key="nodeKey"
                     :default-checked-keys="defaultCheckedKeys"
                     :default-expanded-keys="defaultExpandedKeys"
                     :props="defaultProps"
                     :data="allUsers"
                     @check-change="handleCheckChange">
                </el-tree>
            </div>
            <div class="cbimui-content-right">
                <div class="cbimui-content-title">
                    人员确认（共{{rightData.length}}人）
                </div>
                <div class="cbimui-content-value">
                    <slot :data="rightData"></slot>
                </div>
            </div>
        </div>
        <el-footer class="cbimui-dialog-footer">
            <el-button size="small" style="float: right" @click="handleCheckedUsers">确定</el-button>
            <el-button size="small" style="float: right;margin-right: 15px" @click="handleCloseDialog">取消</el-button>
        </el-footer>

    </el-dialog>
</template>

<script>
import SearchMixin from './mixins/search'
import TreeMethodsMixin from './mixins/treeRefMethods'

export default {
  name: 'CbimPersonSelect',
  mixins: [SearchMixin, TreeMethodsMixin],
  props: {
    title: {
      type: String,
      default: () => '添加管理员账号'
    },
    value: {
      type: Boolean,
      default: () => false
    },
    width: {
      default: () => '600px'
    },
    placeHolder: {
      type: String,
      default: () => '请输入姓名'
    },
    emptyText: {
      type: String,
      default: () => '查无数据'
    },
    nodeKey: {
      default: () => 'id'
    },
    nodeId: { // 左右两栏的人员关联id
      default: () => 'id'
    },
    defaultProps: {
      default: () => ({
        children: 'children',
        label: 'title',
        disabled: 'disabled',
      })
    },
    selectedUsers: {
      type: Array,
      default: () => []
    },
    allUsers: {
      type: Array,
      default: () => []
    },
    relationKey: {
      default: () => 'id' // 左右两部分数据的关联字段
    },
    userType: {
      type: String,
      default: () => 'user' // 左右两部分数据的关联字段
    },
    parentId: {
      type: String,
      default: () => 'parentId' // 左右两部分数据的关联字段
    }
  },
  data() {
    return {
      rightData: [],
      defaultExpandedKeys: []
    }
  },
  watch: {
    selectedUsers: {
      handler() {
        this.rightData = JSON.parse(JSON.stringify(this.selectedUsers || []))
        this.defaultExpandedKeys = []
        const keys = this.rightData.map(r => r[this.nodeKey])
        this.setDisabled(this.allUsers, keys)
        this.defaultExpandedKeys.push(...keys)
      },
      immediate: true
    },
    'allUsers.length': {
      handler() {
        this.setDisabled(this.allUsers, this.rightData.map(r => r[this.nodeKey]))
      }
    },
    allUsers: {
      handler() {
        this.setDisabled(this.allUsers, this.rightData.map(r => r[this.nodeKey]))
      }
    },
    value: {
      handler() {
        if (this.value && this.allUsers.length) {
          debugger
          this.setDisabled(this.allUsers, this.rightData.map(r => r[this.nodeKey]))
          debugger
        }
      },
      immediate: true
    }
  },
  computed: {
    selectedUserIds() {
      return (this.selectedUsers || []).map(s => s[this.nodeKey])
    },
    defaultCheckedKeys() {
      // 右侧传入的数据中id跟左侧协同的数据中的id不一致，但userName（部门没有该字段）是一致的
      return this.rightData.map(r => r[this.nodeKey]).filter(f => ![null, undefined].includes(f))
    }
  },
  methods: {
    handleCloseDialog() {
      this.rightData = JSON.parse(JSON.stringify(this.selectedUsers || []))
      this.search.input = ''
      this.search.show = false
      this.$emit('input', false)
    },
    handleCheckedUsers() {
      this.$emit('change', this.rightData)
      this.search.input = ''
      this.search.show = false
      this.$emit('input', false)
    },
    handleCheckChange(...args) {
      if (!this.value || args[0].type !== this.userType) {
        return
      }
      if (args[1]) { // false -> true
        this.rightData.push(args[0])
      } else { // true -> false
        this.rightData = this.rightData.filter(f => f[this.nodeKey] !== args[0][this.nodeKey])
      }
    }
  }
}
</script>

<style lang="scss">
    .cbimui-person-x {
        .cbimui-content {
            height: 350px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 12px;
            &-left, &-right {
                width: 50%;
                height: 100%;
                border-radius: 0px 0px 0px 2px;
                border: 1px solid #DFE4EB;
                .cbimui-content-title {
                    width: 100%;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    padding-left: 15px;
                    background: #F5F5F5;
                    border-bottom:1px solid #DFE4EB;
                    font-weight: bold;
                    position: relative;
                    &:before {
                        position: absolute;
                        left: 9px;
                        content: '';
                        background: #0084FF;
                        width: 4px;
                        height: 18px;
                        border-radius:2px;
                    }
                }
                .cbimui-content-value {
                    width: 100%;
                    height: calc(100% - 30px);
                    overflow: hidden;
                    &:hover {
                        overflow: auto;
                    }
                }
            }
        }
        .cbimui-dialog-footer {
            height: 30px !important;
            margin-top: 10px;
            padding: 0;
        }
    }
</style>
<style lang="scss">
    .cbimui-person-x {
        /deep/ .el-tree-node__content > label.el-checkbox {
            display: none;
        }
        /deep/ .el-tree-node__content > .is-leaf + label.el-checkbox {
            display: block;
        }
        /deep/ .el-input {
            width: 200px
        }
        /deep/ .el-dialog__body {
            padding-top: 12px !important;
        }
    }
</style>
