<template>
  <div class="org-list">
    <div class="left">
      <div class="title">选择：</div>
      <div class="content">
        <div class="org-breadcrumb">
          <div v-for="(item, index) in breadcrumb" :key="index" style="display: flex; align-items: center">
            <div class="one-ellipsis" @click="getOrg(item)">{{ item.name }}</div>
            <i
              v-if="index < breadcrumb.length - 1"
              class="iconfont icon-youjiantou1"
              style="margin-right: 0px;"
            />
          </div>
        </div>
        <div class="content-item-box">
          <div v-for="(item, index) in orgData" :key="index">
            <div class="content-item-left">
              <i v-if="!item.type" class="iconfont icon-24gf-folderOpen" style="margin-right: 10px;" />
              <div v-if="!item.type">{{ item.name }}</div>
              <el-checkbox v-if="item.type" v-model="item.checked" @change="checkboxChange(item, $event)">
                <i class="iconfont icon-yonghu" style="margin-right: 0px;" />
                {{ item.name }}
              </el-checkbox>
            </div>
            <div class="content-item-rigth">
              <span v-if="!item.type" @click="getOrg(item)">子部门</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title">已选：</div>
      <div class="content">
        <div class="content-item-box">
          <div v-for="(item, index) in checkedData" :key="index">
            <div class="content-item-left">
              <i class="iconfont icon-yonghu" style="margin-right: 10px;" />
              <div>{{ item.name }}</div>
            </div>
            <div class="content-item-rigth" @click="deleteData(item, index)">
              <i class="iconfont icon-guanbi" style="margin-right: 0px;" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default  {
  props: {
    isMultiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      breadcrumb: [],
      orgData: [],
      checkedData: []
    }
  },
  methods: {
    initData() {
      this.breadcrumb = [],
      this.orgData = [],
      this.checkedData = []
      this.getOrg()
    },
    getOrg(row = { id: '' }) {
      const params = {
        parentId: row.id
      }
      this.$api.dictionary.getOrgInfo(params).then(({ data }) => {
        this.orgData = data.map(item => {
          item.checked = false
          this.checkedData.forEach(row => {
            if (item.id === row.id) {
              item.checked = true
            }
          })
          return item
        })
        const { id, name } = row
        if (row.id) {
          const breadcrumbStatus = this.breadcrumb.findIndex(item => item.id === id)
          if (breadcrumbStatus === -1) {
            this.breadcrumb.push({ name, id })
          } else {
            this.breadcrumb = this.breadcrumb.slice(0, breadcrumbStatus + 1)
          }
        } else {
          this.breadcrumb = [
            {
              name: '组织机构',
              id: ''
            }
          ]
        }
      })
    },
    checkboxChange(row, e) {
      if (!this.isMultiple) {
        if (this.checkedData.length) {
          this.orgData = this.orgData.map(item => {
            if (item.id === row.id) {
              item.checked = false
            }
            this.checkedData.forEach(row => {
              if (item.id === row.id) {
                item.checked = true
              }
            })
            return item
          })
          this.$message.warning('只能选择一个分配的人员')
          return
        }
        if (!e && this.checkedData.length === 1) {
          this.$message.warning('只能选择一个分配的人员')
          return
        }
      }
      this.checkedData = this.$utils.deduplicateArray([
        ...this.checkedData,
        ...this.orgData.filter(item => item.checked)
      ])
    },
    deleteData(row, index) {
      this.orgData = this.orgData.map(item => {
        if (item.id === row.id) {
          item.checked = false
        }
        return item
      })
      this.checkedData.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.org-list {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.org-list > div {
  width: calc(50% - 10px);
}
.org-list .title {
  margin-bottom: 10px;
}
.org-list > div .content {
  height: 50vh;
  background-color: #F0F9FC;
  border: 1px solid #E8F0F7;
  border-radius: 0.03rem;
  padding: 10px;
  padding-right: 0px;
}

.org-list .org-breadcrumb {
  display: flex;
  color: #5AC4FC;
  margin-left: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.org-list .org-breadcrumb > div {
  max-width: 33%;
  cursor: pointer;
}
.org-list .org-breadcrumb i {
  color: #333;
}
.org-list .content-item-box {
  overflow-y: auto;
  height: 94%;
  padding-right: 10px;
}
.org-list .content-item-box > div {
  line-height: 36px;
  display: flex;
  justify-content: space-between;
  padding: 0px 10px
}
.org-list .content-item-box > div:hover {
  background-color: #e7eaef;
}
.org-list .content-item-box .content-item-left {
  display: flex;
  align-items: center;
}
.org-list .content-item-box .content-item-left > div {
  cursor: pointer;
}
.org-list .content-item-box .content-item-left .iconfont {
  color: #5AC4FC;
}
.org-list .content-item-box .content-item-rigth {
  color: #5AC4FC;
  cursor: pointer;
}
</style>
