<!--
@name: 部门组件-template写法
@author: 张泽贤
@time: 2022-07-13
@doc:
-->
<template>
  <a-tree-select
    v-model="value"
    class='tms-tree-select'
    dropdownClassName='p-tree'
    multiple
    :maxTagCount="1"
    :treeCheckable="true"
    :treeCheckStrictly="true"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="treeData"
    :replaceFields="{ key: 'code', title: 'name', value: 'id' }"
    placeholder="请选择部门"
    allow-clear
    treeDefaultExpandAll
    :filterTreeNode="filterTreeNode"
    :disabled="disabled"
    @change="departmenTreeChange"
  >
    <a-icon slot="suffixIcon" theme="filled" type="folder" />
  </a-tree-select>
</template>

<script>
import { axios } from '@/utils/request'
import { SERVICE_PLATFORM_POWER_BASE } from '@/config/serviceSettings.js'
const PinyinMatch = require('pinyin-match').default

export default {
  props: {
    departmentId: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    departmentId(v) {
      if (v) {
        this.value = v.split(',').map((item) => { return { value: item } })
      }

    },
  },
  data() {
    return {
      treeData: [],
      treeDefaultExpandedKeys: [],
      value:[],
      DEPARTMENT:[]
    }
  },
  created() {
    axios.get(SERVICE_PLATFORM_POWER_BASE + '/organization/all').then((res) => {
      if (res.success) {
        this.DEPARTMENT=res.data
        this.treeData = this.resultTreeNodes(this.DEPARTMENT)
        let item = this.treeData.find((item) => item.parentId == '0')
        this.treeDefaultExpandedKeys = item?[item.id]:[]
        this.value=this.departmentId?this.departmentId.split(',').map((item) => { return { value: item } }):[]
      } else {
        this.$exception(res)
      }

    })
  },
  methods: {
    resultTreeNodes(data, map = {}) {
      if (!data) return []
      data.forEach((item) => {
        delete item.children
        item.scopedSlots = { icon: 'custom' }
        item.isLeaf = !!item.isLeaf

        map[item.id] = item
      })
      let value = []

      data.forEach((item) => {
        var p = map[item.parentId]
        if (p) {
          if (!p.children) {
            p.children = []
          }
          //item.isLeaf = true
          p.children.push(item)
        } else {
          value.push(item)
        }
      })
      return value
    },
    filterTreeNode(inputValue, treeNode) {
      return PinyinMatch.match(treeNode.data.props.title, inputValue).length > 0 && treeNode
    },
    departmenTreeChange(value, label, extra) {
      this.value=value
      if (!value || value.length === 0) {
        this.$emit('getDepartment', { departmentId: '', departmentId: '', departmentName: '' })
      } else {
        label=[]
        let _value = value.map(item => {
            label.push(item.label)
            return item.value
        })
        let departmentId = _value.join(), departmentCode = [], departmentName = label.join()
        this.DEPARTMENT.forEach(item => {
            if (departmentId.includes(item.id)) {
              departmentCode.push(item.code)
            }
          })
          departmentCode=departmentCode.join()

        this.$emit('getDepartment', { departmentId, departmentCode, departmentName})
      }
    },
  },
}
</script>