<!--
  @description: 供应商查询-供应商资源库-供货范围
  @author: qink/郝凤仙
  @routerPath:supperManagement/supplierRepository
              supperManagement/supplyEnquiry
  @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="3" style="border-right: 1px solid #E0E0E0">
        <div class="p8">
          <h4 class="mb10">
            供货范围
          </h4>
          <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
          <el-scrollbar class="scrollbar 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="getNodeData"
            >
              <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>
      </el-col>
      <el-col :span="21">
        <!--供应商资源库列表关联供货范围组件-->
        <supplyEnquiryChildren ref="supplyEnquiry" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import supplyEnquiryChildren from './supplyEnquiryChildren-list'
import { getPurcatalogCategoryTree } from '@/api/common/tools'
export default {
  name: 'Organization',
  components: {
    supplyEnquiryChildren
  },
  data() {
    return {
      defaultProps: {
        children: 'children', // 指定子树为节点对象的某个属性值-子节点集合
        label: 'categoryName', // 指定节点标签为节点对象的某个属性值-节点名称
        isLeaf: 'categoryIsLeaf' // 是否有子节点 0没有 1有
      },
      filterText: '' // 过滤树信息
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 过滤已选择的数据
    filterNode(value, data) {
      if (!value) return true
      return data.categoryName.indexOf(value) !== -1
    },
    // 树节点加载子集事件
    treeLoadNode(node, resolve) {
      this.initLoad(node, resolve)// 初始化数据
    },
    /*
    初始化数据
    resolve 添加树节点数据
    */
    initLoad(node, resolve) {
      const data = {
        parentId: node.key// 父节点id
      }
      getPurcatalogCategoryTree(data).then(res => {
        res.data.forEach(item => {
          item.categoryIsLeaf = !Number(item.categoryIsLeaf)// 指定节点是否为叶子节点
        })
        resolve(res.data)// 添加树节点
      })
    },
    getNodeData(node, data) {
      // 点击最后一级 传给列表供货范围信息
      if (node.categoryIsLeaf) {
        this.$refs.supplyEnquiry.getSupplyEnquiry(node.id)
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .supplyEnquiry-scrollbar {
    height: calc(100vh - 40px - 56px - 80px);
  }
  /deep/.el-tree {
    min-width: 100%;
    display:inline-block !important;
  }
</style>
