<!--name: "lifetimeInformationForIndividualItems",//单个物资全寿命信息-->
<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-data-text-box">
      <div>
        <p>物资编号：</p>
        <p>{{newData.nameNumber}}</p>
      </div>
      <div>
        <p>物资名称：</p>
        <p>{{newData.name}}</p>
      </div>
      <div>
        <p>上级机构：</p>
        <p>{{newData.upName}}</p>
      </div>
      <div>
        <p>仓库名称：</p>
        <p>{{newData.address}}</p>
      </div>
    </div>
    <div class="top-data-text-box">
      <div>
        <p>具体位置：</p>
        <p>{{newData.specificAddress}}</p>
      </div>
      <div>
        <p>生产日期：</p>
        <p>{{newData.productionTime}}</p>
      </div>
      <div>
        <p>有效期：</p>
        <p>{{newData.effectiveTime}}</p>
      </div>
      <div>
        <p>当前状态：</p>
        <p :class="{'colorB':newData.state==1,'colorC':newData.state==2,'colorD':newData.state==3,'colorE':newData.state==4,}">{{newData.state==1?"新品":(newData.state==2?"堪用品":(newData.state==3?"待修品":(newData.state==4?"待报废":"")))}}</p>
      </div>
    </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="96">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="处理人"
          width="344">
        </el-table-column>
        <el-table-column
          prop="deptName"
          label="部门"
          width="276">
        </el-table-column>
        <el-table-column
          prop="treatmentStatus"
          label="处理状态"
          width="271">
          <template slot-scope="scope">
            <p :class="{'colorB':scope.row.state==1,'colorC':scope.row.state==2,'colorD':scope.row.state==3,'colorE':scope.row.state==4,}">{{scope.row.state==1?"新品":(scope.row.state==2?"堪用品":(scope.row.state==3?"待修品":(scope.row.state==4?"待报废":"")))}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="treatmentDate"
          label="处理时间"
          width="354">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="369">
        </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 { materialInfo } from '@/api/userApi'
  export default {
    name: "lifetimeInformationForIndividualItems",//单个物品信息
    props:["itemsData"],
    data () {
      return {
        //数据信息
        newData:{
          nameNumber:"H000231231",
          name:"止疼药",
          upName:"西南医院",
          address:"第一仓库",
          specificAddress:"1排00001号",
          productionTime:"2020-01-01 12:12:12",
          effectiveTime:"12个月",
          state:2,
        },
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        /*数据*/
        tableData:[],
        //id
        id:"",
      }
    },

    created(){

    },
    mounted() {
      this.id = this.itemsData.id;
      this.newData.nameNumber = this.itemsData.materialNumber;
      this.newData.name = this.itemsData.materialName;
      this.newData.upName = this.itemsData.deptName;
      this.newData.address = this.itemsData.organizationName;
      this.newData.specificAddress = this.itemsData.placeAdress;
      this.newData.productionTime = this.itemsData.productDate;
      this.newData.effectiveTime = this.itemsData.expiryDate;
      this.newData.state = this.itemsData.status;
      this.getListData();
    },
    methods: {
      //数据列表
      async getListData (){
        let self = this;
        let param = new FormData();
        param.append('id ',this.id);
        param.append('pageSize ',self.pagesize);
        param.append('pageNum ',self.currentPage);
        const { data } = await materialInfo(param);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.$forceUpdate();
        }
      },
      outButton(){
        this.$parent.outPage();
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: `,val);
        this.currentPage = val;
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    display flex
    flex:1;
    flex-direction: column;
    //返回按钮
    .out-page-button
      height:30px;
      width:93px;
      margin:27px 0 10px 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-data-text-box
      display flex
      margin:0 105px 0;
      div
        display flex
        p
          font-size:$font_14;
          line-height:32px;
          text-align left
        p:nth-child(1)
          color:$color_ff;
          width:96px;
        p:nth-child(2)
          color:$theme;
          width:230px;
        .colorB
          color :$theme1 !important;
        .colorC
          color :$theme2 !important;
        .colorD
          color :$theme3 !important;
        .colorE
          color :$theme4 !important;
    //表格
    .table-box
      width:1710px !important;
      margin:6px 105px 20px;
      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:$theme3;
      .colorB
        color :$theme1;
      .colorC
        color :$theme2;
      .colorD
        color :$theme3;
      .colorE
        color :$theme4;
      .table-min-button
        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;
    //修改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>
