<template>
  <div v-show="showDeptSelect" class="dept-select">
    <select-tree v-if="multiData" v-model="selected" :options="deptTreeList" :props="defaultProps" :placeholder="placeholder"/>
    <el-select v-else v-model="selected" :placeholder="placeholder" clearble>
      <el-option
        v-for="item in deptTreeList"
        :key="item.id"
        :label="item.name"
        :value="item.id"/>
    </el-select>
  </div>
</template>

<script>
  import { judgeTree, toTreeList } from '@/utils/structure'
  import SelectTree from '@/components/SelectTree/singleSelect'
  import { getDeptTreeList } from '@/api/dept'
  export default {
    name: 'DeptSelect',
    components: {
      SelectTree
    },
    props: {
      // 数据绑定
      value: {
        type: [Number, String],
        default: ''
      },
      placeholder: {
        type: String,
        default: '请选择父级'
      },
      needTop: { // 是否需要顶级
        type: Boolean,
        default: true
      },
      deptType: {
        type: String,
        default: ''
      },
      deptShow: {
        type: Boolean,
        default: false
      }
    }, // 接收绑定参数
    data() {
      return {
        deptTreeList: [],
        multiData: false,
        defaultProps: {
          parent: 'pid',
          value: 'id',
          label: 'name',
          children: 'children'
        },
        selected: '' + this.value,
        showDeptSelect: true
      }
    },
    watch: {
      value: function(val) {
        this.selected = '' + this.value
      },
      selected: function(val) {
        console.log('watch selected')
        this.$emit('input', val)
      }
    },
    mounted() {
      this.fetchPcode()
    },
    methods: {
      // 加载父组织树形下拉菜单
      fetchPcode: function() {
        let listQuery = {}
        if (this.deptType !== '') {
          listQuery = {
            deptType: this.deptType
          }
        }
        getDeptTreeList(listQuery).then(response => {
          const list = response.data.list
          if (!this.deptShow && list.length <= 1) {
            this.showDeptSelect = false
          } else {
            // list.push({ id: '0', name: '顶级', open: true, value: '0' })
            if (list) {
              // 如果有必要转树
              if (judgeTree(list)) {
                this.multiData = true
                this.deptTreeList = toTreeList(response.data.list, '0', this.needTop)
                // 如果不需要顶级,将顶级去掉
                if (!this.needTop && this.deptTreeList.length === 1) {
                  this.deptTreeList = this.deptTreeList[0].children
                }
              } else {
                this.deptTreeList = list
                this.multiData = false
              }
            }
          }
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .el-select{
    width: 100%;
  }
</style>