<!--
  @description: 合格供应库需要申报
  @author: qink/haofengxian
  @routerPath:supperManagement/supplierQualified
  @date:  2020/4/15 13:52
-->
<template>
  <div>
    <!--标题-->
    <div class="title title_border p0-16">
      <i class="el-icon-s-home" />供应商资源库
    </div>
    <el-row>
      <el-col :span="4" style="border-right: 1px solid #E0E0E0">
        <div class="p8">
          <h4 class="mb10">
            组织机构树
          </h4>
          <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
          <div class="tree-container">
            <el-scrollbar class="supplyEnquiry-scrollbar">
              <el-tree
                ref="tree"
                :props="defaultProps"
                :load="treeLoadNode"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                check-strictly
                lazy
                node-key="id"
                @node-click="handleNodeClick"
              >
                <span slot-scope="{ node, data }" class="custom-tree-node">
                  <img v-if="data.categoryIsLeaf" src="@assets/img/common/tree/tree02.png">
                  <img v-else src="@assets/img/common/tree/tree01.png">
                  {{ node.label }}
                </span>
              </el-tree>
            </el-scrollbar>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <el-tabs v-model="activeName" class="el-tabs-border-card-shadow-none" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="合格供应商" name="1" />
          <!-- <el-tab-pane label="合格供应商(含下级)" name="2" /> -->
        </el-tabs>
        <supplierQualifiedChilerdn ref="supplierQualified" class="p0-16" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { listSupplierDeclarationInfoByDepartId } from '@/api/supplier/declaraTionrecord.js'// 组织机构树
import { ListMixin } from '@/mixins/ListMixin'
/* 组件*/
import supplierQualifiedChilerdn from './supplierQualifiedChilerdn-list'
export default {
  name: 'Organization',
  components: {
    supplierQualifiedChilerdn
  },
  mixins: [ListMixin],
  data() {
    return {
      activeName: '1', // 初始化选中tab页下标
      filterText: '', // 过滤树信息
      defaultProps: {
        children: 'bodyCompany', // 指定子树为节点对象的某个属性值-子节点集合
        label: 'departname', // 这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数）
        isLeaf: 'categoryIsLeaf' // 是否有子节点 0没有 1有
      }
    }
  },
  watch: {
    // 过滤树信息
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 过滤已选择的数据
    filterNode(value, data) {
      if (!value) return true
      return data.departname.indexOf(value) !== -1
    },
    // 树节点加载子集事件
    treeLoadNode(node, resolve) {
      if (typeof node === 'undefined') {
        return
      }
      // 一级节点处理
      if (node.level === 0) {
        this.initLoad('', resolve)
      }
      // 其余节点处理
      if (node.level >= 1) {
        // 注意！把resolve传到你自己的异步中去
        this.getIndex(node, resolve)
      }
    },
    // 处理树数据
    getIndex(node, resolve) {
      const parentId = node.data.id
      this.initLoad(parentId, resolve)
    },
    /* 初始化数据 resolve 添加树节点数据*/
    initLoad(parentId, resolve) {
      listSupplierDeclarationInfoByDepartId(parentId).then(res => {
        res.data.forEach(value => {
          if (value.orgType === '0') {
            value.categoryIsLeaf = false // 不为子节点
          } else {
            value.categoryIsLeaf = true // 为子节点
          }
        })
        resolve(res.data)// 添加树节点
      })
    },
    handleNodeClick(node, data) {
      // 点击最后一级 传给列表供货范围信息
      if (node.categoryIsLeaf) {
        this.$refs.supplierQualified.loadData(node.id, this.activeName)
      }
    },
    // 点击tab
    handleClick(tab, event) {
      this.$refs.supplierQualified.loadData('', tab.name)
    }
  }
}
</script>
<style lang="less" scoped>
  .supplyEnquiry-scrollbar {
    height: calc(100vh - 40px - 56px - 80px);
  }
  /deep/.el-tree {
    min-width: 100%;
    display:inline-block !important;
  }
  /deep/.el-tabs--border-card.el-tabs-border-card-shadow-none {
  .el-tabs__content {
    padding: 0px 0 0 0;
  }
}
</style>
