<template>
  <div class="max-big-box">
    <div v-if="pageType" class="big-max-box">
      <div class="left-max-box">
        <!--树结构-->
        <el-tree class="max-tree-box TabStrip" :indent="0"
                 ref="dataConfigTree"
                 default-expand-all
                 :expand-on-click-node="false"
                 node-key="id" :highlight-current="false"
                 :data="leftTopData" icon-class="none">
          <div class="tree-box" slot-scope="{ node, data }" @click="clickTree(data,node)">
            <!--<img :class="{'levelImg':node.level==1}" v-if="node.expanded&&node.childNodes[0]"-->
                 <!--src="~@/assets/images/icon_42.png">-->
            <!--<img :class="{'levelImg':node.level==1}" v-if="!node.expanded&&node.childNodes[0]"-->
                 <!--src="~@/assets/images/icon_43.png">-->
            <p class="label-p"
               :class="{'level1':node.level==1,'level2':node.level==2,'level3':node.level==3,'levelColorA':node.checked||node.indeterminate,'levelColorB':!node.checked&&!node.indeterminate}"
            >{{ node.label }}</p>
          </div>
        </el-tree>
      </div>
      <div class="right-max-box">
        <div class="table-box">
          <el-table
            ref="multipleTable"
            :row-key="getRowKey"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%">
            <el-table-column
              type="index"
              :index="indexMethod"
              label="序号"
              width="92">
            </el-table-column>
            <el-table-column
              prop="materialName"
              label="物资名称"
              width="128">
            </el-table-column>
            <el-table-column
              prop="bigTypeName"
              label="类型(大类)"
              width="148">
            </el-table-column>
            <el-table-column
              prop="smallTypeName"
              label="类型(小类)"
              width="148">
            </el-table-column>
            <el-table-column
              prop="num"
              label="数量"
              width="118">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              width="102">
            </el-table-column>
            <el-table-column
              prop="organizationName"
              label="仓库名称"
              width="235">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              width="309">
            </el-table-column>
            <el-table-column
              label="操作"
              width="209">
              <template slot-scope="scope">
                <div class="table-min-button">
                  <div class="cursor_pointer" @click="handleEdit(scope.$index, scope.row)">
                    <img src="~@/assets/images/icon_36.png">
                    <p>详情</p>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          background
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :current-page="currentPage"
          :page-size="pagesize"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <material-details v-if="!pageType" :materialData="materialData"></material-details>
  </div>
</template>

<script>
  import { deptTreeselect,materialStrength } from '@/api/userApi'
  export default {
    name: "pressTheManagementUnitToInquire",//按管理单位查询
    components:{
      materialDetails: resolve => {require(['@/components/equipmentSituation/equipmentMaterialStrengthInformationView/materialDetails'], resolve)},//物资详情信息
    },
    data () {
      return {
        //页面切换状态
        pageType:true,
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        //树数据
        leftTopData: [],
        /*数据*/
        tableData:[],
        /*传参数据*/
        materialData:{},
      }
    },

    created(){

    },
    mounted() {
      this.deptTreeselect();
    },
    methods: {
      //数据列表
      async getListData (){
        let self = this;
        let obj={
          repertoryId:"",
          pageSize:self.pagesize,
          pageNum:self.currentPage,
        };
        let list = self.$refs.dataConfigTree.getCheckedNodes();
        if(list[0]){
          obj.repertoryId = list[0].id;
        }
        const { data } = await materialStrength(obj);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.$forceUpdate();
        }
      },
      //获取组织架构树状数据
      async deptTreeselect () {
        let self = this;
        const { data } = await deptTreeselect();
        if(data.code==200){
          this.leftTopData = data.data;
          this.getListData();
        }
      },
      outPage(){
        this.pageType = !this.pageType;
      },
      handleEdit(index,row){
        this.materialData = {
          id:row.id,
          materialName:row.materialName,
          organizationName:row.organizationName,
        };
        this.pageType = !this.pageType;
      },
      //数结构点击事件
      clickTree(data,node){
        if(node.checked){
          this.$refs.dataConfigTree.setCheckedKeys([]);
        }else{
          this.$refs.dataConfigTree.setCheckedKeys([node.data.id]);
        }
        this.getListData();
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: `,val);
        this.currentPage = val;
        this.getListData();
      },
      //勾选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.tableNum = this.multipleSelection.length
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    display flex
    flex:1;
    .big-max-box
      display flex
      flex:1;
      .left-max-box
        width:219px;
        margin-left:105px;
        .max-tree-box
          z-index:1;
          overflow-x:hidden;
          overflow-y:scroll;
          white-space: nowrap;
          .tree-box
            display flex
            img
              display block
              width:20px;
              height:20px;
            p
              margin-left:8px;
      .right-max-box
        width:1490px;
        display flex
        flex-direction column
        flex:1;
        .table-box
          width:1490px !important;
        .table-min-button
          width:66px;
          margin:0 auto;
          display flex
          div:nth-child(1)
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme;
            display flex
            margin-right:11px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          div:nth-child(2)
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme3;
            display flex
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
  //分页按钮样式
  .el-pagination
    margin-top:20px;
  //修改table表格样式
  .el-table
    background rgba(6,177,240,0.2)
  .el-table /deep/ tr
  .el-table /deep/ th
    background rgba(6,177,240,0)
  .el-table::before
    height:0;
  .el-table /deep/ .cell
    max-height:46px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  .el-table /deep/ td
  .el-table /deep/ th.is-leaf
    border-bottom:0!important;
  .el-table /deep/ .el-checkbox__inner
    //background rgba(6,177,240,0.2)
    border 1px solid #216f93 !important
  .el-table /deep/ thead
    color:$color_ff;
  .el-table /deep/ th
    text-align-last: center;
  .el-table /deep/ td
    text-align-last: center;
  .el-table
    color:$color_a1
  .el-table /deep/ tbody tr:hover > td
    background rgba(6,177,240,0.2)
    color:$theme;
  .el-table /deep/ .el-checkbox
    width:14px;
    margin:0 auto;
    display block
  //修改动作条样式
  .el-pagination.is-background /deep/ .btn-next
  .el-pagination.is-background /deep/ .btn-prev
  .el-pagination.is-background /deep/ .el-pager li
    background:url("~@/assets/images/button_13.png");
    color:$color_ff;
  .el-pagination.is-background /deep/ .el-pager li:not(.disabled).active
    background:url("~@/assets/images/button_14.png");
    color:$color_ff;
  .colorA
    color :$theme;
  ::-webkit-input-placeholder
    color: $border_1;
  ::-moz-placeholder
    color: $border_1;
  ::-ms-input-placeholder
    color: $border_1;

  //树状图
  .el-tree
    background rgba(0,0,0,0) !important
  /*多层级样式*/
  .levelImg{
    margin-top: 7px;
  }
  .level1{
    font-size:$font_17;
    color:$theme !important;
    height:34px;
    line-height 34px
  }
  .level2{
    font-size:$font_14;
    height:22px;
    line-height 22px
  }
  .level3{
    font-size:$font_12;
    height:20px;
    line-height 20px
  }
  .levelColorA{
    color:$color_ff;
  }
  .levelColorB{
    color:$color_91;
  }
  /*层级指引线*/
  .tree-container /deep/ .el-tree > .el-tree-node :after {
    border-top: none;
  }
  .el-tree /deep/ .el-tree-node .el-tree-node {
    position: relative;
    padding-left: 16px !important;
  }
  .el-tree /deep/ .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree /deep/ .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree /deep/ .el-tree-node .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree /deep/ .el-tree-node .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree /deep/ .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree /deep/ .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }

  .tree-container { //树的parent，样式自定
  }
  .el-tree /deep/ .el-tree-node__content .el-tree-node__expand-icon{
    padding:1px !important
  }
  //修改悬浮样式
  .el-tree /deep/ .el-tree-node:focus > .el-tree-node__content {
    background-color: rgba(0,0,0,0) !important;
  }
  .el-tree /deep/ .el-tree-node__content:hover {    background-color: rgba(0,0,0,0);
  }
  .el-tree /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: rgba(0,0,0,0);
  }
</style>
