<template>
  <div class="row">
    <div class="col-3">
      <t-select v-model="companyTypeId" width="200px" @change="getOrgId">
        <t-option v-for="item in companyTypesList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
      </t-select>
    </div>
    <div class="col-3" style="margin-left:35px">
      <!-- <t-select v-model="departmentTypeId" width="200px">
            <t-option v-for="item in departmentTypesList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
          </t-select> -->
      <template>
        <t-select-tree v-model="departmentTypeId" :node-data="departmentTypesList" width="200px" node-key="id" @change="getDepId"></t-select-tree>
      </template>
    </div>
    <div class="col-3" style="margin-left:35px">
      <t-select v-model="staffTypeId" width="200px" @change="getStaffId">
        <t-option v-for="item in staffTypesList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
      </t-select>
    </div>
  </div>
</template>

<script>
import commonApi from '@/api/common'
export default {
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      source: [],
      // 公司、部门、员工、列表
      companyTypesList: [],
      departmentTypesList: [],
      staffTypesList: [],
      companyTypeId: '',
      departmentTypeId: '',
      staffTypeId: '',
      firstCreated: true
    }
  },
  computed: {
    staff: {
      get() {
        const { orgId, depId, userid } = this.value
        return [ orgId, depId, userid ]
      },
      set(val) {
        const [ orgId, depId, userid ] = val
        Object.assign(this.value, { orgId, depId, userid })
      }
    }
  },
  watch: {
    companyTypeId (val) {
      // 重置部门回显
      this.departmentTypeId = ''
      // 查询部门列表
      this.queryCycleChildOrg(val)
    },
    departmentTypeId (val) {
      // 重置人员回显
      this.staffTypeId = ''
      // 重置人员列表
      this.staffTypesList = []
      // 减少查询请求
      if (val !== '') {
        this.getStaffTypesList(val)
      }
    }
  },
  created() {
    this.getCompanyTypesList()
  },
  methods: {
    getOrgId() {
      this.$emit('getOrgId', this.companyTypeId)
    },
    getDepId() {
      this.$emit('getDepId', this.departmentTypeId)
    },
    getStaffId() {
      this.$emit('getStaffId', this.staffTypeId)
    },
    // 向服务器发送请求获取公司类型列表数据
    async getCompanyTypesList () {
      const res = await commonApi.getCompanyTypesList()
      if (res.status === 200) {
        this.companyTypesList = res.data.data
        this.companyTypeId = 10086
        this.getOrgId()
      } else {
        this.$Message.danger('公司类型列表数据获取失败！')
      }
    },
    // 获取部门列表
    async queryCycleChildOrg (id) {
      const res = await commonApi.queryCycleChildOrg(id)
      if (res.status === 200) {
        const data = []
        // 递归 实现tree组件所需部门数据结构
        this.nextDepartment(res.data, data)
        // 深拷贝data
        const data1 = JSON.parse(JSON.stringify(data))
        // 用部门id映射关系代替code与parentCode父子映射关系
        data.forEach(item => {
          // 删除pid为"-1"的的pid属性，否则tree渲染的时候没有根节点渲染不出来
          if (item.pid === '-1') {
            delete item.pid
          }
          item.id = item.orgId
          data1.some((item1) => {
            if (item.pid === item1.id) {
              item.pid = item1.orgId
            } else {
              return false
            }
          })
        })
        // eslint-disable-next-line no-return-assign
        this.departmentTypesList = data.filter(item => item.data = item.id)
        this.$nextTick(() => {
          if (this.firstCreated === true) {
            this.departmentTypeId = '10087'
            this.getDepId()
            this.firstCreated = false
          }
        })
      } else {
        this.$Message.danger('部门类型列表数据获取失败！')
      }
    },
    // 向服务器发送请求获取用户类型列表数据
    async getStaffTypesList (id) {
      const res = await commonApi.getStaffTypesList(id)
      if (res.status === 200) {
        this.staffTypesList = res.data.data
      } else {
        this.$Message.danger('用户类型列表数据获取失败！')
      }
    },
    // 如果部门还有下级 递归
    nextDepartment (data, arr) {
      if (data.length > 0) {
        data.forEach(item => {
          arr.push({
            orgId: item.id + '',
            id: item.code,
            label: item.name,
            pid: item.parentCode
          })
          this.nextDepartment(item.departments, arr)
        })
      }
    },
    loadStuffData(item, callback) {
      item.loading = true
      commonApi.getEmployeeByOrgid(item.value).then(res => {
        console.log(res)
        let arr = []

        setTimeout(() => {
          for (let index in res.data) {
            let children = {
              label: res.data[index].name,
              value: res.data[index].userid
            }
            arr.push(children)
          }
          arr.unshift({
            label: '全部',
            value: ''
          })
          item.children = arr
          item.loading = false
          callback()
          this.staff[2] = ''
        }, 1000)
      }, err => {
        this.$Message.danger('获取员工列表失败！')
        console.log(err)
      })
    }
  }
}
</script>