<template>
  <div class="max-big-box-min">
    <div class="big-max-box" v-if="pageType==1">
      <!--操作按钮-->
      <div class="top-box">
        <div class="input-box">
          <input class="search-input" type="text" v-model="inputData" placeholder="请输入物资编号/名称/具体位置/RFID标签关键字进行查询">
          <div class="dropdown-box" v-for="(item,index) in downList" :key="index">
            <p class="dropdown-left-title">{{item.name}}：</p>
            <div class="dropdown-right-box cursor_pointer"
                 @mouseenter="dropdownClickOpen(index,'1')" @mouseleave="dropdownClickOpen(index,'2')">
              <p class="dropdown-text">{{downList[index].downText}}</p>
              <div class="dropdown-for-max" v-if="downList[index].downType">
                <p v-for="(item,indexTwo) in downList[index].list" :key="indexTwo"
                   :class="{'color-A':downList[index].mouseColor == item}"
                   @mouseenter="colorTypeEnter(index,item)" @mouseleave="colorTypeLeave(index)"
                   @click="dropdownClick(index,item)">{{item}}</p>
              </div>
            </div>
          </div>
          <div class="button-box cursor_pointer" @click="clickQuery">
            <img src="~@/assets/images/icon_27.png">
            <p class="cursor_pointer">查询</p>
          </div>
        </div>
      </div>
      <div 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
              class="TabStrip"
              ref="multipleTable"
              :row-key="getRowKey"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%">
              <el-table-column
                type="index"
                :index="indexMethod"
                label="序号"
                width="85">
              </el-table-column>
              <el-table-column
                prop="materialNumber"
                label="物资编号"
                width="141">
              </el-table-column>
              <el-table-column
                prop="materialName"
                label="物资名称"
                width="119">
              </el-table-column>
              <el-table-column
                prop="unit"
                label="单位"
                width="77">
              </el-table-column>
              <el-table-column
                prop="bigTypeName"
                label="类型(大类)"
                width="134">
              </el-table-column>
              <el-table-column
                prop="smallTypeName"
                label="类型(小类)"
                width="140">
              </el-table-column>
              <el-table-column
                prop="organizationName"
                label="所在仓库"
                width="153">
              </el-table-column>
              <el-table-column
                prop="placeAdress"
                label="具体位置"
                width="113">
              </el-table-column>
              <el-table-column
                prop="rfid"
                label="RFID标签"
                width="136">
              </el-table-column>
              <!--<el-table-column-->
                <!--prop="money"-->
                <!--label="单价"-->
                <!--width="136">-->
              <!--</el-table-column>-->
              <!--<el-table-column-->
                <!--prop="status"-->
                <!--label="使用状态"-->
                <!--width="136">-->
              <!--</el-table-column>-->
              <!--<el-table-column-->
                <!--prop="money2"-->
                <!--label="所属医疗队所"-->
                <!--width="136">-->
              <!--</el-table-column>-->
              <!--<el-table-column-->
                <!--prop="money3"-->
                <!--label="物资来源信息"-->
                <!--width="136">-->
              <!--</el-table-column>-->
              <el-table-column
                prop="status"
                label="质量状态"
                width="105">
                <template slot-scope="scope">
                  <p :class="{'colorB':scope.row.status==1,'colorC':scope.row.status==2,'colorD':scope.row.status==3,'colorE':scope.row.status==4,}">{{scope.row.status==1?"新品":(scope.row.status==2?"堪用品":(scope.row.status==3?"待修品":(scope.row.status==4?"待报废":"")))}}</p>
                </template>
              </el-table-column>
              <el-table-column
                label="全寿命信息"
                width="124">
                <template slot-scope="scope">
                  <p class="table-button-p" @click="infoClick(scope.$index, scope.row)">查看</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="productDate"
                label="生产日期"
                width="193">
              </el-table-column>
              <el-table-column
                prop="expiryDate"
                label="有效期"
                width="105">
              </el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                width="277">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                width="197">
              </el-table-column>
              <el-table-column
                label="操作"
                width="117">
                <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>
        </div>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pagesize"
        :total="total">
      </el-pagination>
    </div>
    <lifetime-information-for-individual-items v-if="pageType==2" :itemsData="itemsData"></lifetime-information-for-individual-items>
    <details-page :dataInfo="dataInfo" v-if="pageType==3"></details-page>
  </div>
</template>

<script>
  import { deptTreeselect,typeBig,typeSmall,materialInfoAll } from '@/api/userApi'
  export default {
    name: "listInfo",//列表信息
    components:{
      detailsPage: resolve => {require(['@/components/detailsPage'], resolve)},//详情组件
      lifetimeInformationForIndividualItems: resolve => {require(['@/components/equipmentSituation/lifeInformationOfEquipmentMaterialsView/lifetimeInformationForIndividualItems'], resolve)},//单个物品信息
    },
    data () {
      return {
        //搜索数据
        inputData:"",
        //下拉框
        downList:[
          {
            name:"类型(大型)",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:[],
            idType:[]
          },
          {
            name:"类型(小型)",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:[],
            idType:[]
          },
          {
            name:"质量状态",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:["全部","新品","堪用品","维修品","待报废",],
            idType:["0","1","2","3","4"]
          },
        ],
        //页面切换状态
        pageType:1,
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        //树数据
        leftTopData: [],
        /*数据*/
        tableData:[],
        //给详情组件传参数据
        dataInfo:[],
        //查看传参
        itemsData:{},
      }
    },

    created(){

    },
    mounted() {
      this.deptTreeselect();
    },
    methods: {
      //点击查询
      clickQuery(){
        this.currentPage = 1;
        this.getListData();
      },
      //数据列表
      async getListData (){
        let self = this;
        let obj={
          repertoryId:"",
          searchValue:this.inputData,
          bigTypeId:"",
          smallTypeId:"",
          status:"",
          pageSize:self.pagesize,
          pageNum:self.currentPage,
        };
        let list = self.$refs.dataConfigTree.getCheckedNodes();
        if(list[0]){
          obj.repertoryId = list[0].id;
        }
        for(let i=0;i<self.downList[0].list.length;i++){
          if(self.downList[0].downText==self.downList[0].list[i]){
            obj.bigTypeId = self.downList[0].idType[i];
          }
        }
        for(let i=0;i<self.downList[1].list.length;i++){
          if(self.downList[1].downText==self.downList[1].list[i]){
            obj.smallTypeId = self.downList[1].idType[i];
          }
        }
        for(let i=0;i<self.downList[2].list.length;i++){
          if(self.downList[2].downText==self.downList[2].list[i]){
            obj.status = self.downList[2].idType[i];
          }
        }
        const { data } = await materialInfoAll(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.typeBig();
        }
      },
      //大类
      async typeBig () {
        let self = this;
        const { data } = await typeBig();
        if(data.code==200){
          let list = [];
          let idType = [];
          list.push("全部");
          idType.push("");
          for(let i=0;i<data.data.length;i++){
            list.push(data.data[i].bigTypeName);
            idType.push(data.data[i].id);
          }
          self.downList[0].list = list;
          self.downList[0].idType = idType;
          this.typeSmall();
        }
      },
      //小类
      async typeSmall () {
        let self = this;
        const { data } = await typeSmall();
        if(data.code==200){
          let list = [];
          let idType = [];
          list.push("全部");
          idType.push("");
          for(let i=0;i<data.data.length;i++){
            list.push(data.data[i].smallTypeName);
            idType.push(data.data[i].id);
          }
          self.downList[1].list = list;
          self.downList[1].idType = idType;
          this.getListData();
        }
      },
      //下拉菜单进入悬浮状态
      colorTypeEnter(type,item){
        this.downList[type].mouseColor=item;
      },
      //下拉菜单离开悬浮状态
      colorTypeLeave(type){
        this.downList[type].mouseColor = "";
      },
      // 下拉菜单选项悬浮事件
      dropdownClickOpen(type,state){
        if(state==1){
          this.downList[type].downType = true
        }else if(state==2){
          this.downList[type].downType = false
        }
      },
      // 下拉菜单点击事件
      dropdownClick(type,item){
        this.downList[type].downText = item;
        this.downList[type].downType = false;
      },
      outPage(){
        this.pageType = 1;
      },
      //单品查看
      infoClick(index,row){
        this.itemsData = {
          id:row.id,
          materialNumber:row.materialNumber,
          materialName:row.materialName,
          deptName:row.deptName,
          organizationName:row.organizationName,
          placeAdress:row.placeAdress,
          productDate:row.productDate,
          expiryDate:row.expiryDate,
          status:row.status,
        }
        this.pageType = 2;
      },
      //详情
      handleEdit(index, row){
        this.dataInfo =[
          {
            name:"物资编号",
            value:row.materialNumber,
          },
          {
            name:"物资名称",
            value:row.materialName,
          },
          {
            name:"单位",
            value:row.unit,
          },
          {
            name:"类型(大类)",
            value:row.bigTypeName,
          },
          {
            name:"类型(小类)",
            value:row.smallTypeName,
          },
          {
            name:"所在仓库",
            value:row.organizationName,
          },
          {
            name:"具体位置",
            value:row.placeAdress,
          },
          {
            name:"RFID标签",
            value:row.rfid,
          },
          {
            name:"质量状态",
            value:row.status==1?"新品":(row.status==2?"堪用品":(row.status==3?"待修品":(row.status==4?"待报废":""))),
          },
          {
            name:"生产日期",
            value:row.productDate,
          },
          {
            name:"有效期",
            value:row.expiryDate,
          },
          {
            name:"备注",
            value:row.remark,
          },
          {
            name:"创建时间",
            value:row.createTime,
          },
        ]
        if(row.state==1){
          this.dataInfo[8].value='新品';
          this.dataInfo[8].color="#2fda26";
        }else if(row.state==2){
          this.dataInfo[8].value='堪用品';
          this.dataInfo[8].color="#f99a00";
        }else if(row.state==3){
          this.dataInfo[8].value='待修品';
          this.dataInfo[8].color="#ff6b6a";
        }else if(row.state==4){
          this.dataInfo[8].value='待报废';
          this.dataInfo[8].color="#7e7e7e";
        }
        this.pageType = 3;
      },
      //数结构点击事件
      clickTree(data,node){
        if(node.checked){
          this.$refs.dataConfigTree.setCheckedKeys([]);
        }else{
          this.$refs.dataConfigTree.setCheckedKeys([node.data.id]);
        }
      },
      //表格绑定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-min
  display flex
  flex:1;
  .big-max-box
    display flex
    flex-direction column
    flex:1;
    //搜索与操作按钮
    .top-box
      height:30px;
      display flex
      margin:30px 0
      .input-box
        width:1710px;
        display flex
        margin-left:105px;
        .search-input
          height:28px;
          width:360px;
          border:1px solid $theme;
          padding-left:10px;
        .dropdown-box
          display flex
          color:$color_ff;
          z-index:1;
          margin-left:15px;
          .dropdown-left-title
            line-height:30px;
            font-size:$font_14;
          .dropdown-right-box
            font-size:$font_12;
            .dropdown-text
              width:160px;
              height:30px;
              line-height:30px;
              background:url("~@/assets/images/button_15.png");
              background-size:100% 100%;
            .dropdown-for-max
              background:$backColor1;
              border-bottom-right-radius 4px
              border-bottom-left-radius 4px
              p
                width:160px;
                height:30px;
                line-height:30px;
              .color-A
                /*
                background:$backColor2 !important;
                color:$color_ff !important;
                */
                color:$theme !important;
                border-bottom-right-radius 4px
                border-bottom-left-radius 4px
        .button-box
          display: flex;
          flex-direction: row;
          margin-left:32px;
          display flex
          height:30px;
          width:80px;
          background:url("~@/assets/images/button_03.png");
          background-size:100% 100%;
          img
            display block
            height:20px;
            width:20px;
            margin:5px 6px 0 13px;
          p
            line-height:30px;
            font-size:$font_12;
            color:$color_ff;
    .big-max-box
      margin:0 105px;
      height:100%;
      width:100%;
      display flex
      display: flex;
      flex: 1;
      flex-direction: row;
      .left-max-box
        width:219px;
        .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: 1;
        flex-direction: column;
        .table-box
          width:1490px !important;
          .table-button-p
            line-height:20px;
            height:20px;
            width:60px;
            color:#333;
            background:url("~@/assets/images/button_03.png");
            background-size 100% 100%
            margin:0 auto;
            cursor:pointer
        .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:0 auto;
            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/ .el-table__empty-text
    width: 100%;
    text-align left
    margin-left:825px;
  .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px $theme;
    background: $theme;
  .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-track
    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
    border-radius: 0;
    background: rgba(255,255,255,0);
  .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;
  .colorB
    color :$theme1;
  .colorC
    color :$theme2;
  .colorD
    color :$theme3;
  .colorE
    color :$theme4;
  ::-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>
