<template>
  <div>
    <el-cascader
      popper-class="ebiz-other-cascader"
      v-model="values"
      size="medium"
      ref="selectRef"
      @change="handleChange"
      @visible-change="visibleChange"
      :options="options"
      :teleported="false"
      :show-all-levels="false"
      :props="cascaderProps"
      :filterable="values[0] !== 1 && values[0] !== 0"
      :filter-method="filterMethod"
      @remove-tag="removeTag"
    >
      <template #default="{ node, data }">
        <div v-if="node.level === 1" @click="chooseItem(node, data)">
          {{ data.realName }}
        </div>
        <div v-else @click="chooseItem(node, data)">
          <div
            class="flex align-items-c ellipsis"
            :class="data.id === userInfo.id ? 'disabled' : ''"
          >
            {{ data.realName }}
          </div>
        </div>
      </template>
    </el-cascader>
  </div>
</template>
<script>
import { getUserList } from '@/api/generatedApi/system'

export default {
  name: 'otherIndex',
  data() {
    return {
      values: [],
      userInfo: {},
      options: [
        {
          realName: '所有人可见',
          id: 0
        },
        {
          realName: '仅自己可见',
          id: 1
        },
        {
          realName: '部分人可见',
          id: 2,
          children: []
        }
      ]
    }
  },
  props: {
    model: {
      type: Object,
      default: () => {
        return {
          visibleRange: 0,
          userIds: []
        }
      }
    }
  },
  computed: {
    cascaderProps() {
      return {
        multiple: () => {
          return false
        },
        label: 'realName',
        value: 'id'
        // checkStrictly: true
      }
    }
  },

  methods: {
    removeTag(tag) {
      // 不能删除自己
      if (tag[1] === this.userInfo.id) {
        this.values.push([2, this.userInfo.id])
      }
    },

    filterMethod(path, queryString) {
      return (
        path.text.includes(queryString) &&
        path.path[0] !== 0 &&
        path.path[0] !== 1
      )
    },

    getUsers() {
      getUserList({
        userCodeLike: '',
        userNameLike: '',
        status: 0,
        realName: '',
        realNameLike: '',
        mobile: '',
        mobileLike: '',
        email: '',
        emailLike: '',
        sysUserRoleDTOs: [],
        page: 1,
        pageSize: 999999999
      }).then(res => {
        if (res) {
          this.options[2].children = res.content.content
        }
      })
    },
    chooseItem(node, data) {
      let userInfo = sessionStorage.getItem('userInfo')
      userInfo = JSON.parse(userInfo)
      if (data.id === userInfo.id) {
        return false
      }

      if (node.level === 1) {
        if (data.id === 0 || data.id === 1) {
          // this.cascaderProps.multiple = false
          this.$set(this.cascaderProps, 'multiple', false)
          this.values = [data.id]
        } else {
          this.values = []
          this.$set(this.cascaderProps, 'multiple', true)
          if (this.values.length === 0) {
            this.values.push([2, userInfo.id])
          }
        }
      } else {
        // 去重 如果包含就删除
        if (this.values.some(item => item[1] === data.id)) {
          this.values = this.values.filter(item => {
            return item[1] !== data.id
          })
        } else {
          let values = JSON.parse(JSON.stringify(this.values))

          values.push([2, data.id])
          this.values = values
        }
      }
    },

    visibleChange() {
      this.$refs.selectRef.visible = true // 重新展开下拉面板
    },
    handleChange(value) {}
  },
  created() {
    let userInfo = sessionStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
  },
  mounted() {
    this.getUsers()
  },
  watch: {
    model: {
      handler(newVal) {
        if (newVal.visibleRange === 0) {
          this.values = [0]
          this.cascaderProps.multiple = false
        } else if (newVal.visibleRange === 1) {
          this.values = [1]
          this.cascaderProps.multiple = false
        } else {
          this.values = []
          this.cascaderProps.multiple = true
          if (newVal.userIds.length > 0) {
            newVal.userIds.map(item => {
              this.values.push([2, item])
            })
          }
        }
      }
    },
    values: {
      handler(newVal) {
        if (!this.cascaderProps.multiple) {
          this.model.visibleRange = newVal[0]
          if (newVal[0] === 0) {
            this.model.userIds = []
          } else {
            this.model.userIds = []
            // 只有自己能看
            let userInfo = sessionStorage.getItem('userInfo')
            if (userInfo) {
              userInfo = JSON.parse(userInfo)
              this.model.userIds = [userInfo.id]
            }
          }
        } else {
          this.model.visibleRange = 2
          this.model.userIds = newVal.map(item => {
            return item[1]
          })
        }
      },
      immediate: true
    }
  }
}
</script>
<style scoped lang="scss">
.disabled {
  opacity: 0.5;
  cursor: no-drop;
}
</style>
