<template>
  <div>
    <div style="width:90%;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>质检模块管理</span>
          <el-button style="float: right; padding: 3px 0" icon="el-icon-plus" type="text" @click="add"/>
        </div>
        <el-tree
          v-loading= "treeLoading"
          ref="tree"
          :data="tree"
          :props="defaultProps"
          :default-expand-all="expandAllNode"
          :expand-on-click-node="expandNodeClick"
          node-key="id"
          class="filter-tree"
          @node-click = "handleNodeClick"
        />
      </el-card>
    </div>
    <edit-modular ref="editdialog" @refresh="refreshTree"/>
  </div>
</template>

<script>
import { getQModulerList } from '@/api/qualityCheck'
import EditModular from '../editModular'
export default {
  name: 'ModulerTree',
  components: { EditModular },
  data() {
    return {
      tree: null, // 树
      defaultProps: {
        children: 'children',
        label: 'modularName'
      }, // 配置项
      defaultChecked: ['1'],
      treeLoading: false, // 加载状态
      expandAllNode: true, // 是否展开所有节点
      expandNodeClick: true // 是否点击展开
    }
  },
  created() {
    this.fetchTypeTree()
  },
  methods: {
    // 获取组织结构树
    fetchTypeTree() {
      this.treeLoading = true
      getQModulerList().then(response => {
        // response.data = [
        //   { modularName: '标准模块', id: '2', pid: '1', deptName: '顶级', num: '1' },
        //   { modularName: '入门标准模块', id: '3', pid: '1', deptName: '顶级', num: '1' },
        //   { modularName: '完整标准模块', id: '4', pid: '1', deptName: '顶级', num: '1' }
        // ]
        this.tree = [{
          id: '1',
          modularName: '质检模块管理',
          disabled: true,
          children: response.data
        }]
        // this.$refs.tree.setCheckedKeys(['2'])
        // this.$refs.tree.setChecked(response.data[0])
        // this.$refs.tree.setCurrentKey('2')
        this.handleNodeClick(response.data[0])
        this.treeLoading = false
      })
    },
    // 点击左侧组织结构项触发
    handleNodeClick(data) {
      if (data.id !== '1') {
        this.$emit('change', data)
      }
    },
    // 添加模块
    add() {
      this.$refs.editdialog.initDialog('create', true)
    },
    // 刷新
    refreshTree() {
      this.fetchTypeTree()
    }
  }
}
</script>

<style scoped>

</style>