<template>
  <div>
    <div class="userbox-content">
      <el-table ref="multipleTable" :data="userList" tooltip-effect="dark" style="width: 100%" :show-header="false" :row-class-name="rowClass" @row-click="rowClick">
        <el-table-column width="40">
          <template slot-scope="scope">
            <span class="tag-image"><img :src="scope.row.imageUrl" style="object-fit: cover;"/></span>
          </template>
        </el-table-column>
        <el-table-column prop="label" width="*">
          <template slot-scope="scope">
            <div :style="scope.row.jobTitle ? 'line-height:20px' : 'line-height:36px'">{{ scope.row.label }}</div>
            <div v-if="scope.row.jobTitle" style="font-size:12px; color:#C0C4CC; line-height:16px">{{ scope.row.jobTitle }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="value" width="50">
          <template slot-scope="scope">
            <span v-if="!scope.row.isSelected" style="display:inline-block; width:18px; height:18px; border-radius: 50%; border: 1px solid #E4E7ED;"> </span>
            <span v-if="scope.row.isSelected" style="font-size:20px; color:#67C23A;">
              <i class="el-icon-success" />
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'roletree',
  props: {
    value: { required: true },
    userData: { dafault: null },
    closeTag: { default: null },
    filterOrgId: { default: null },
    filterRoleId: { default: null },
    multiple: Boolean //是否多选
  },
  data() {
    return {
      title: '用户',
      userList: null
    }
  },
  computed: {
    rowClass() {
      return 'userbox-content-item'
    }
  },
  methods: {
    deepClone(obj) {
      var _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj)
      return objClone
    },
    rowClick(row, column, event) {
      console.log(row, column, event)
      let user = this.userList.find(user => user.id == row.id)

      if (this.multiple) {
        let index = this.value.findIndex(value => value.Id == row.id)
        if (index > -1) {
          this.value.splice(index, 1)
        } else {
          this.value.push({ Id: row.id, Label: row.label })
        }
      } else {
        if (this.value.length > 0) {
          this.value.splice(0, 1, { Id: row.id, Label: row.label })
        } else {
          this.value.push({ Id: row.id, Label: row.label })
        }
        this.userList
          .filter(user => {
            return user.isSelected
          })
          .forEach(user => {
            user.isSelected = false
          })
      }
      if (!user.isSelected) {
        user.isSelected = true
      } else {
        user.isSelected = false
      }
    },
    setUserList() {
      if (!this.userData) {
        this.userList = []
        return
      }
      let userList = []
      let filterOrgId = this.filterOrgId
      let filterRoleId = this.filterRoleId
      this.userData
        .filter(user => {
          if (filterOrgId) {
            if (filterOrgId == -1) {
              return !user.orgIds || user.orgIds.length == 0
            } else {
              return user.orgIds.findIndex(orgId => orgId == filterOrgId) > -1
            }
          } else {
            if (filterOrgId == 0) {
              return user.orgIds.findIndex(orgId => orgId == 0) > -1
            }
          }
          if (filterRoleId) {
            if (filterRoleId == -1) {
              return !user.roleIds || user.roleIds.length == 0
            } else {
              return user.roleIds.findIndex(roleId => roleId == filterRoleId) > -1
            }
          }
          return true
        })
        .forEach(user => {
          let isSelected = this.value.findIndex(val => val.Id == user.id) > -1
          let item = { id: user.id, label: user.label, imageUrl: user.imageUrl, jobTitle: user.jobTitle, isSelected: isSelected }
          userList.push(item)
        })
      this.userList = userList
    }
  },
  mounted() {},
  watch: {
    value: {
      handler() {},
      immediate: true,
      deep: true
    },
    userData: {
      handler() {
        this.setUserList()
      },
      immediate: true,
      deep: true
    },
    filterOrgId() {
      this.setUserList()
    },
    filterRoleId() {
      this.setUserList()
    },
    closeTag: {
      handler(val) {
        let user = this.userList.find(user => user.id == val.Id)
        if (user) {
          user.isSelected = false
        }
      },
      deep: true
    }
  }
}
</script>
