<template>
  <el-dialog :visible="visible" :title="title" :close-on-click-modal="false" :show-close="false" :width="dialogWidth" append-to-body>
    <el-row>
      <el-col :span="leftSpan">
        <div style="line-height:28px">选择</div>
        <div class="userbox">
          <div class="userbox-header">
            <el-input placeholder="输入关键字进行过滤" v-model="filterKey" size="mini" clearable> </el-input>
          </div>
          <div class="userbox-container">
            <el-row v-if="!filterKey">
              <el-col :span="24">
                <div class="userbox-tree">
                  <div class="userbox-content" :class="noTags">
                    <org-tree
                      v-model="tagValue"
                      :treeData="orgTreeData"
                      :closeTag="closeTag"
                      :multiple="multiple"
                      :defaultExpandedKeys="orgDefaultExpandedKeys"
                      :defaultCheckedKeys="orgDefaultCheckedKeys"
                      :currentNodeKey="orgCurrentNodeKey"
                    />
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col v-if="showSelected" :span="12">
        <div style="line-height:28px">已选</div>
        <div class="tagbox">
          <div class="tagbox-content">
            <el-table ref="multipleTable" :data="tagValue" tooltip-effect="dark" style="width: 100%" :show-header="false">
              <el-table-column width="40">
                <template slot-scope="scope">
                  <span class="tag-image"><img src="/img/org.png" style="object-fit: cover;"/></span>
                </template>
              </el-table-column>
              <el-table-column prop="label" width="*">
                <template slot-scope="scope"> {{ scope.row.Label }}</template>
              </el-table-column>
              <el-table-column prop="value" width="50">
                <template slot-scope="scope">
                  <el-button @click="handleCloseTag(scope.row.Type, scope.row.Id)" icon="el-icon-close" size="small" circle></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()" size="small">取消</el-button>
      <el-button @click="handleOK()" size="small" type="primary">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import OrgTree from './orgtree.vue'

export default {
  name: 'selectdialog',
  components: {
    OrgTree
  },
  props: {
    value: { required: true },
    visible: { type: Boolean, default: false },
    multiple: Boolean,
    orgData: { dafault: null },
    rootNode: { dafault: null },
    excludedUserIds: { dafault: null },
    showInvalid: { default: false } //显示禁用用户
  },
  data() {
    return {
      title: '选择数据',
      tabName: '',
      filterValue: null,
      filterKey: '',
      filterOrgId: null,
      filterRoleId: null,
      tagValue: null,
      closeTag: null,
      userList: null,
      orgTreeData: null,
      roleTreeData: null,
      showTree: true,
      orgDefaultExpandedKeys: null,
      orgDefaultCheckedKeys: null,
      orgCurrentNodeKey: null
    }
  },
  computed: {
    orgTag() {
      return this.tabName == 'org' ? 'primary' : ''
    },
    roleTag() {
      return this.tabName == 'role' ? 'primary' : ''
    },
    noTags() {
      return 'no-tags'
    },
    showSelected() {
      if (this.multiple) {
        return true
      } else {
        return false
      }
    },
    dialogWidth() {
      let width = 480
      if (this.showSelected) {
        width += 300
      }
      return `${width}px`
    },
    leftSpan() {
      if (this.showSelected) {
        return 12
      }
      return 24
    }
  },
  methods: {
    deepClone(obj) {
      var _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj)
      return objClone
    },
    handleClose() {
      this.tagValue = []
      this.$emit('update:visible', false)
    },
    handleOK() {
      this.$emit('input', this.tagValue)
      this.$emit('update:visible', false)
    },
    setOrgTree(orgData) {
      let buildOrgNode = function(parentId) {
        let orgNode = []
        if (!orgData) {
          return orgNode
        }
        orgData
          .filter(node => {
            const orgParentId = node.parentId != undefined ? node.parentId : node.ParentId
            return orgParentId === parentId
          })
          .forEach(node => {
            const orgId = node.id ? node.id : node.Id
            const orgLabel = node.label ? node.label : node.Label
            const orgValue = `org_${orgId}`
            let childrenNode = buildOrgNode(orgId)
            orgNode.push({ id: orgId, value: orgValue, label: orgLabel, icon: 'el-icon-folder', imageUrl: null, type: 'org', parentId: `org_${parentId}`, children: childrenNode })
          })
        return orgNode
      }

      let children = buildOrgNode(0)

      if (this.rootNode) {
        const rootId = this.rootNode.id != undefined ? this.rootNode.id : this.roleData.Id
        let rootLabel = this.rootNode.label ? this.rootNode.label : this.rootNode.name
        this.orgTreeData = [{ id: rootId, value: `org_${rootId}`, label: rootLabel, icon: 'el-icon-school', type: 'org', parentId: ``, children: children }]
        this.orgDefaultExpandedKeys = [`org_${rootId}`]
      } else {
        this.orgDefaultExpandedKeys = null
        this.orgTreeData = children
      }

      // this.orgTreeData = children
      this.orgDefaultExpandedKeys = []
      this.orgDefaultCheckedKeys = []
      if (this.value) {
        this.value.filter(x => {
          if (x.Type == 'org') {
            this.orgDefaultCheckedKeys.push(`${x.Type}_${x.Id}`)
          }
        })
        if (!this.multiple && this.value[0]) {
          this.orgDefaultExpandedKeys.push(`org_${this.value[0].Id}`)
          this.orgCurrentNodeKey = `${this.value[0].Type}_${this.value[0].Id}`
        }
      }
    },
    handleCloseTag(type, id) {
      this.closeTag = this.tagValue.find(tag => tag.Id == id && tag.Type == type)
      let index = this.tagValue.findIndex(tag => tag.Id == id && tag.Type == type)
      this.tagValue.splice(index, 1)
    }
  },
  watch: {
    visible(value) {
      if (value) {
        this.tagValue = []
        this.filterKey = ''
        if (this.orgData) {
          this.setOrgTree(this.orgData)
        }
        this.tagValue = this.deepClone(this.value)
      } else {
        this.tagValue = []
        this.orgTreeData = null
        this.roleTreeData = null
      }
    }
  }
}
</script>

<style lang="scss">
.tag-group {
  padding: 5px;
  .el-tag {
    margin: 2px;
  }
}
.el-tree {
  background: none;
}
.userbox {
  //   margin-right: 5px;
  border: 1px solid #ebeef5;
  overflow: hidden;
  background-color: #f4f6f8;
  .userbox-header {
    height: 28px;
    margin: 5px;
  }
  .userbox-container {
    background-color: #fff;

    .userbox-filter {
      height: 400px;
      background-color: #f1f1f2;
      border-right: 1px solid #ebeef5;
      padding: 5px;

      .userbox-content {
        height: 390px;
        overflow: auto;

        .userbox-content-item {
          cursor: pointer;
          .tag-image {
            display: block;
            overflow: hidden;
            width: 28px;
            height: 28px;
            line-height: 28px;
            border-radius: 50%;

            img {
              object-fit: cover;
              display: block;
              height: 100%;
              vertical-align: middle;
            }
          }
        }
      }
    }

    .userbox-tree {
      height: 400px;
      background-color: #f1f1f2;
      border-right: 1px solid #ebeef5;
      padding: 5px;

      .userbox-tags {
        height: 28px;
        margin-bottom: 5px;
      }

      .userbox-content {
        height: 357px;
        overflow: auto;
      }

      .no-tags {
        height: 395px;
      }
    }
    .userbox-list {
      height: 400px;
      padding: 5px;

      .userbox-content {
        height: 390px;
        overflow: auto;

        .userbox-content-item {
          cursor: pointer;
          .tag-image {
            display: block;
            overflow: hidden;
            width: 28px;
            height: 28px;
            line-height: 28px;
            border-radius: 50%;

            img {
              object-fit: cover;
              display: block;
              height: 100%;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}

.tagbox {
  margin-left: 5px;
  border: 1px solid #ebeef5;
  padding: 5px;
  overflow: hidden;
  background-color: #f4f6f8;
  .tagbox-content {
    height: 428px;
    overflow: auto;

    .tag-image {
      display: block;
      overflow: hidden;
      width: 28px;
      height: 28px;
      line-height: 28px;
      border-radius: 50%;

      img {
        object-fit: cover;
        display: block;
        height: 100%;
        vertical-align: middle;
      }
    }

    .el-tag {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 2px 0 2px 6px;
    }
  }
}
</style>
