<template>
  <div class="max-big-box">
    <!--返回按钮-->
    <div class="out-page-button cursor_pointer" @click="outButton">
      <img src="~@/assets/images/icon_25.png">
      <p>返回</p>
    </div>
    <!--操作按钮-->
    <div class="top-box">
      <p>物资名称：<span>{{textData.name}}</span></p>
      <p>位置：<span>{{textData.address}}</span></p>
    </div>
    <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="109">
        </el-table-column>
        <el-table-column
          prop="materialNumber"
          label="物资编号"
          width="281">
        </el-table-column>
        <el-table-column
          prop="organizationName"
          label="物资具体位置"
          width="266">
        </el-table-column>
        <el-table-column
          prop="rfid"
          label="RFID信息"
          width="249">
        </el-table-column>
        <el-table-column
          prop=" status"
          label="质量状态"
          width="227">
          <template slot-scope="scope">
            <p :class="{'colorA':scope.row.status==1,'colorB':scope.row.status!=1,}">{{scope.row.status==1?"新品":(scope.row.status==2?"堪用品":(scope.row.status==3?"待修":(scope.row.status==4?"待报废":"")))}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="productDate"
          label="生产日期"
          width="313">
        </el-table-column>
        <el-table-column
          prop="expiryDate"
          label="有效期"
          width="265">
        </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>
</template>

<script>
import { materialStrengthInfo } from '@/api/userApi'
  export default {
    name: "materialDetails",//物资详情信息
    props:["materialData"],
    data () {
      return {
        textData:{
          id:"",
          name:"",
          address:"",
        },
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        /*数据*/
        tableData:[],
        //翻页
        handleCurrentChange(val) {
          console.log(`当前页: `,val);
          this.currentPage = val;
        },
      }
    },
    created(){

    },
    mounted() {
      this.textData.id = this.materialData.id;
      this.textData.name = this.materialData.materialName;
      this.textData.address = this.materialData.organizationName;
      this.getListData();
    },
    methods: {
      //数据列表
      async getListData (){
        let self = this;
        let obj={
          id:this.textData.id,
        };
        const { data } = await materialStrengthInfo(obj);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.$forceUpdate();
        }
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      // 调用父组件方法退出当前页面
      outButton(){
        this.$parent.outPage();
      },
      //下拉菜单悬浮状态
      colorTypeEnter(item){
        this.mouseColor = item.value;
      },
      colorTypeLeave(){
        this.mouseColor = "";
      },
      // 左侧下拉菜单
      leftDropdownClickOpen(type){
        this.downLeftType = type == 1;
      },
      leftDropdownClick(item){
        this.downLeft = item.value;
        this.downLeftType = !this.downLeftType;
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    flex-direction: column;
    .out-page-button
      height:30px;
      width:93px;
      margin:0 0 0 106px;
      background:url("~@/assets/images/button_02.png");
      background-size 100% 100%
      display flex
      img
        display block
        height:12px;
        width:7px;
        margin:9px 10px 0 22px;
      p
        line-height:30px;
        font-size:$font_12;
        color:$color_ff;
        text-align left
    .top-box
      height:30px;
      display flex
      margin-left:105px;
      margin-top:20px;
      p
        line-height:30px;
        font-size:$font_14;
        color:$color_ff;
        margin-right:50px;
      span
        color:$theme;
    //表格
    .table-box
      width:1710px !important;
      margin:20px 105px;
      text-align center !important
      /*点击详情*/
      .table-info-p-one
        display inline-block
      .table-info-p-two
        display inline-block
        width:60px;
        height:20px;
        color:$color_33;
        font-size:$font_12;
        background url("~@/assets/images/button_14.png")
        background-size 100% 100%
        border-radius:4px;
      .colorA
        color:$success;
      .colorB
        color:$warning;
      .table-min-button
        width:60px;
        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:$theme;
          display flex
          margin-right:11px;
          img
            display block
            height:20px;
            width:20px;
            margin-right:4px;
        div:nth-child(3)
          height:20px;
          width:70px;
          font-size:$font_14;
          color:$theme3;
          display flex
          img
            display block
            height:20px;
            width:20px;
            margin-right:4px;
  //修改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
    color:$color_a1
  .el-table /deep/ th
    text-align-last: center;
  .el-table /deep/ td
    text-align-last: center;
  .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;

</style>
