<!--
  @description: 物料库
  @author: 张远远
  @routerPath:/material/materialLibrary/materialLibrary-list
  @date:  2021/3/16 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">
          <!-- 物料分类树 -->
          <materialTypeTree
            ref="organizationTree"
            :height="materialTypeTreeData.height"
            :highlight-current="materialTypeTreeData.highlightCurrent"
            :on-click-node="materialTypeTreeData.onClickNode"
            @nodeClickData="treeNodeClick"
            @clearSelectTypeData="clearSelectTypeData"
          />
        </div>
      </el-col>
      <el-col :span="20">
        <materialChilerdnList ref="material" class="p0-16" :material-type="materialTypeInformation" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
/* 组件*/
import materialChilerdnList from './materialChilerdn-list'
import materialTypeTree from './materialTypeTree' // 组织机构
export default {
  name: 'MaterialStoreList',
  components: {
    materialChilerdnList, // 物料列表
    materialTypeTree // 物料分类
  },
  data() {
    return {
      materialTypeInformation: {
        smallCode: '', // 物资小类编码
        smallName: '' // 物资小类名称
      }, // 当前选中物料分类信息
      materialTypeTreeData: {
        height: 'calc(100vh - 40px - 20px - 90px)', // 树容器高度
        highlightCurrent: true, // 选中高亮
        onClickNode: true // 点击结点
      }
    }
  },
  watch: {
  },
  methods: {
    // 树节点点击
    treeNodeClick(data) {
      this.materialTypeInformation = {
        smallCode: data.id, // 物资小类编码
        smallName: data.categoryName, // 物资小类名称
        categoryIsLeaf: data.categoryIsLeaf // 是否是叶子节点 1是 0不是
      }
    },
    // 当树搜索的时候进行数据清空
    clearSelectTypeData() {
      this.materialTypeInformation = {
        smallCode: '',
        smallName: '',
        categoryIsLeaf: ''
      }
    }
  }
}
</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>
