<template>
  <div v-show="showDeptSelect" class="dept-select">
    <el-select v-model="selected" :placeholder="placeholder" :disabled="disabled" 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/system/dept'
export default {
  name: 'DeptSingle',
  components: {
    SelectTree
  },
  props: {
    tips: {
      type: String,
      default: ''
    }, // tips,company或dept
    pid: {
      type: String,
      default: ''
    }, // pid
    // 数据绑定
    value: {
      type: [Number, String],
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择父级'
    },
    needTop: { // 是否需要顶级
      type: Boolean,
      default: true
    },
    deptType: {
      type: String,
      default: ''
    },
    deptShow: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  }, // 接收绑定参数
  data() {
    return {
      deptTreeList: [],
      multiData: false,
      defaultProps: {
        parent: 'pid',
        value: 'deptid',
        label: 'name',
        children: 'children'
      },
      selected: '' + this.value,
      showDeptSelect: true
    }
  },
  watch: {
    value: function(val) {
      this.selected = '' + this.value
    },
    pid: function(val) {
      console.log('watchPid')
      if (val) {
        this.selected = ''
        this.fetchDeptList()
      } else {
        this.selected = ''
        this.deptTreeList = []
      }
    },
    selected: function(val) {
      console.log('watch selected')
      this.$emit('input', val)
    }
  },
  created() {
    this.fetchDeptList()
  },
  methods: {
    // 加载父组织树形下拉菜单
    fetchDeptList: function() {
      let listQuery = {}
      if (this.deptType !== '') {
        listQuery = {
          deptType: this.deptType,
          tips: this.tips,
          pid: this.pid
        }
      }
      getDeptTreeList(listQuery).then(response => {
        const list = response.data
        if (!this.deptShow && list.length <= 1) {
          this.showDeptSelect = false
        } else {
          if (list) {
            this.deptTreeList = list
            this.multiData = false
          }
        }
      })
    }
  }
}
</script>

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

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