<!--
  @description: 入库专业-Tree-公用
  @Modifier: haofengxian/肖文龙
  @routerPath:
  @date: 2020-5-29-16:56
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    title="选择入库专业"
    width="840px"
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <div>
      <el-scrollbar style="height:400px">
        <el-tree
          ref="treeSelect"
          :class="dialogData.onlyOneSelected?'checkTree':''"
          :props="defaultProps"
          :load="treeLoadNode"
          :default-checked-keys="dialogData.selectCodes"
          show-checkbox
          check-strictly
          lazy
          node-key="id"
          @check="checkGroupNode"
        />
      </el-scrollbar>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure">确定</el-button>
      <el-button @click="dialogData.dialog = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { getPurcatalogProfessionalTree } from '@/api/common/tools'

export default {
  name: 'LibraryTree',
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {
          type: '', // 添加类型-同一个页面多次使用
          dialog: false, // 弹窗状态
          selectCodes: [], // 当前选中的专业Code
          onlyOneSelected: false, // 是否只能选最后一级且是单选
          multipleChoice: false // true多选 false单选（默认单选）
        }
      }
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children', // 指定子树为节点对象的某个属性值
        label: 'professionalName', // 指定节点标签为节点对象的某个属性值
        isLeaf: 'professionalIsLeaf' // 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
      }
    }
  },
  methods: {
    // 选择会触发checkGroupNode方法
    checkGroupNode(checkedNodes, checkedKeys) {
      // 是否只能选最后一级且是单选则执行
      if (!this.dialogData.multipleChoice && this.dialogData.onlyOneSelected && checkedKeys.checkedKeys.length > 0) {
        this.$refs.tree.setCheckedKeys([checkedNodes.id])
      }
    },
    /*
    初始化数据
    resolve 添加树节点数据
    */
    initLoad(node, resolve) {
      const data = {
        parentId: node.key// 父节点id
      }
      getPurcatalogProfessionalTree(data).then(res => {
        res.data.forEach(item => {
          item.professionalIsLeaf = !Number(item.professionalIsLeaf)// 指定节点是否为叶子节点
        })
        resolve(res.data)// 添加树节点
      })
    },
    // 树节点加载子集事件
    treeLoadNode(node, resolve) {
      this.initLoad(node, resolve)// 初始化数据
    },
    // 选择信息-确定
    ensure() {
      const nodes = this.$refs.treeSelect.getCheckedNodes()// 获取已选中信息
      if (nodes.length > 0) {
        const data = {
          keys: [], // id集合
          labels: []// 名称集合
        }
        nodes.forEach(item => {
          data.keys.push(item.id)
          data.labels.push(item.professionalName)
        })
        data.keys = data.keys.join(',')
        data.labels = data.labels.join(',')
        this.$emit('LibraryTreeInfo', data, this.dialogData.type)
        this.dialogData.dialog = false// 关闭弹框
      } else {
        this.$message.warning('必须选中一条记录')
      }
    }
  }
}
</script>

<style scoped lang="less">
  /deep/ .checkTree{
    .el-tree-node{
      .is-leaf + .el-checkbox .el-checkbox__inner{
        display: inline-block;
      }
      .el-checkbox .el-checkbox__inner{
        display: none;
      }
    }
  }
</style>
