<template>
  <div style="position: relative;">
    <WWOpenData type="departmentName" :openid="dept_id" v-if="dept_id" class="WWOpenData"></WWOpenData>
    <el-cascader :props="dept_props" v-model="dept_ids" :options="dept_tree" ref="dept" clearable placeholder="全公司">
      <template slot-scope="{ node, data }">
        <span><WWOpenData type="departmentName" :openid="data.name"></WWOpenData></span>
      </template>
    </el-cascader>
  </div>
</template>
<script>
export default {
  name: 'ShowDeptName',
  props: {
    deptId: {
      type:Number,
      default:0,
    }
  },
  data() {
    return {
      dept_id:0,
      dept_ids:'',
      dept_tree: [],
      dept_props:{
        label: 'name',
        value: 'id',
        checkStrictly: true
      }
    };
  },
  watch:{
    dept_ids(val) {
      this.dept_id =val.length>0? val[val.length-1]:0;
      this.$nextTick(() => {
        this.$refs.dept.dropDownVisible = false;
        this.$emit('update:deptId',this.dept_id);
        this.$emit('confirm',this.dept_id);
      });
    },
  },
  methods: {
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
  },
  mounted() {
    if (this.$getCache('dept_tree')) {
      this.dept_tree = this.getTreeData(this.$getCache('dept_tree'));
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
.WWOpenData {
  color: #606266;
  pointer-events: none;

  position: absolute;
  z-index: 9;
  margin-top: 1px;
  margin-left: 1px;
  box-sizing: border-box;
  background-color: #fff;
  right: 30px;
  left: 15px;
  height: 34px;
  line-height: 34px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
  white-space:nowrap
}
</style>
