<template>
  <div class="page-container purchaseExamine-infoPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{newData.showType?'审核':'详情'}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p v-if="newData.showType" class="page-top-title-submit-p" @click="submitForm">提交</p>
    </div>
    <div class="content-box scrollbar-box">
      <div class="title-max-big-box">
        <p class="title-p">申购信息</p>
      </div>
      <div class="flex-text-max-box">
        <div>
          <p>实验室：</p>
          <p>{{newData.subName}}</p>
        </div>
        <div>
          <p>申购人：</p>
          <p>{{newData.applyUserName}}-{{newData.applyUserPhone}}</p>
        </div>
        <div>
          <p>导师：</p>
          <p>{{newData.mentorName}}-{{newData.mentorPhone}}</p>
        </div>
      </div>
      <div class="flex-text-max-box">
        <div>
          <p>课题组：</p>
          <p>{{newData.topicGroupName}}</p>
        </div>
        <div>
          <p>课题组负责人：</p>
          <p>{{newData.topicUserName}}-{{newData.topicUserPhone}}</p>
        </div>
        <div>
          <p>管控液体已存储量：</p>
          <p>{{newData.controlLiquids}}</p>
        </div>
        <div>
          <p>管控固体已存储量：</p>
          <p>{{newData.controlSolid}}</p>
        </div>
      </div>
      <div class="flex-text-max-big-box">
        <div class="flex-text-max-big-left-box">
          <p>用途：</p>
          <p>{{newData.applyReason}}</p>
        </div>
        <div class="flex-text-max-big-right-box">
          <div>
            <p>非管控液体已存储量：</p>
            <p>{{newData.unReguLiquids}}</p>
          </div>
          <div>
            <p>非管控固体已存储量：</p>
            <p>{{newData.unReguSolid}}</p>
          </div>
        </div>
      </div>
      <p class="border-p"></p>
      <div class="title-max-big-box">
        <p class="title-p">化学品信息</p>
        <div class="num-max-big-box">
          <p>本次申购量</p>
          <p>液体:{{newData.applyLiquid}}ml</p>
          <p>固体:{{newData.applySolid}}g</p>
        </div>
      </div>
      <div class="for-table-box">
        <el-table class="table-box" border :data="newData.hxpApplyDetailModelList">
          <el-table-column label="名称" prop="chemicalName" show-overflow-tooltip/>
          <el-table-column label="CAS" prop="casNum" width="150" show-overflow-tooltip/>
          <el-table-column label="类别" prop="chemicalCategoryName" width="150" show-overflow-tooltip/>
          <el-table-column label="纯度" prop="chemicalPurity" width="150" show-overflow-tooltip/>
          <el-table-column label="规格" width="240" align="left" prop="normsNum" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.normsNum}}{{scope.row.normsUnit}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="applyUnit" width="180" show-overflow-tooltip/>
          <el-table-column label="数量" prop="applyNum" width="150" show-overflow-tooltip/>
        </el-table>
      </div>
      <p class="border-p"></p>
      <div class="title-max-big-box">
        <p class="title-p">实验室现有库存</p>
      </div>
      <div class="for-table-box">
        <el-table class="table-box table-null-img-40" border :data="newData.chemicalStockList">
          <el-table-column label="名称" prop="chemicalName" show-overflow-tooltip/>
          <el-table-column label="纯度" prop="chemicalPurity" width="200" show-overflow-tooltip/>
          <el-table-column label="数量" prop="chemicalNumber" width="200" show-overflow-tooltip/>
          <el-table-column label="实验室库存量" prop="subSurplus" width="200" show-overflow-tooltip/>
          <el-table-column label="学院库存量" prop="deptSurplus" width="200" show-overflow-tooltip/>
        </el-table>
      </div>
      <p class="border-p"></p>
      <div class="title-max-big-box">
        <p class="title-p">审核记录</p>
        <p :class="newData.approvalStatus == 1?'title-type-a':(newData.applyStatus == 3?'title-type-c':'title-type-b')">
          {{newData.approvalStatus == 1?'已完成':(newData.applyStatus == 3?'已撤销':newData.auditNode)}}
        </p>
      </div>
      <div class="for-table-box">
        <el-table class="table-box" border :data="newData.applyTaskNodeModelList">
          <el-table-column label="审核人" prop="applyUserNames" width="200" show-overflow-tooltip/>
          <el-table-column label="审核节点" prop="auditNode" width="150" show-overflow-tooltip/>
          <el-table-column label="状态" prop="applyStatusStr" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="auditStatusColor-A" v-if="scope.row.nodeStatus==0 || scope.row.nodeStatus==3">{{scope.row.applyStatusStr}}</span>
              <span class="auditStatusColor-B" v-if="scope.row.nodeStatus==1">{{scope.row.applyStatusStr}}</span>
              <span class="auditStatusColor-C" v-if="scope.row.nodeStatus==2">{{scope.row.applyStatusStr}}</span>
            </template>
          </el-table-column>
          <el-table-column label="时间" prop="updateTime" width="250" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="content" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-if="scope.row.nodeStatus!=0">{{scope.row.nodeContent}}</div>
              <div class="table-form-max-box" v-if="newData.showType && scope.row.nodeStatus==0">
                <div class="table-form-box">
                  <p class="table-form-title">*</p>
                  <p class="table-form-name">审核状态：</p>
                  <el-select v-model="tableForm.passOrRefuse"
                             class="table-date"
                             placeholder="请选择学院" style="width: 120px">
                    <el-option label="通过" :value="1"/>
                    <el-option label="驳回" :value="0"/>
                  </el-select>
                </div>
                <div class="table-form-box">
                  <p class="table-form-title">*</p>
                  <p class="table-form-name">审核意见：</p>
                  <el-input
                    class="table-date"
                    maxLength="30"
                    v-model="tableForm.nodeContent"
                    placeholder="请输入审核意见"
                    style="width: 300px"
                  />
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  import {
    chemicalApplyTaskApprovalTask,
    chemicalApplyUpdate,
    chemicalStockGetStockBysubId, chemicalStockStockListBySubId
  } from '@/api/chemicalManage'

  export default {
    name: 'infoPage',
    props:{
      propsData:{},
    },
    data(){
      return{
        newData:{
          subId:'',
          subName:'',
          roomNum:'',
          applyUserAll:'',
          applyUserId:'',
          applyUserName:'',
          applyUserPhone:'',
          data3:false,
          topicGroupId:'',
          topicGroupName:'',
          data5:'',
          applyReason:'',
          mentorAll:'',
          mentorId:'',
          mentorName:'',
          mentorPhone:'',
          applyLiquid:'',//液体申购量
          liquidUnit:'',//液体单位
          applySolid:'',//固体申购量
          solidUnit:'',//固体单位
          applyStatus:'',//1表示提交，2表示保存草稿
          hxpApplyDetailModelList:[],
          inventoryList:[{},{},{}],
          applyTaskNodeModelList:[],
        },
        tableForm:{
          taskId:'',
          passOrRefuse:1,
          nodeContent:'',
        },
      }
    },
    created(){
      this.newData=this.propsData;
      this.tableForm.taskId=this.newData.applyId;
      this.chemicalStockGetStockBysubId(this.newData.subId)
      this.chemicalStockStockListBySubId(this.newData.subId)
      this.computeFun()
    },
    mounted(){

    },
    methods:{

      //实验室-实验室现有库存列表
      chemicalStockStockListBySubId(subId){
        chemicalStockStockListBySubId({"subId":subId}).then(response => {
          this.$set(this.newData,'chemicalStockList',response.data);

        });
      },
      //实验室-固体液体液体已存储量
      chemicalStockGetStockBysubId(subId){
        chemicalStockGetStockBysubId({"subId":subId}).then(response => {
          this.$set(this.newData,'controlLiquids',response.data.controlLiquids);
          this.$set(this.newData,'controlSolid',response.data.controlSolid);
          this.$set(this.newData,'unReguLiquids',response.data.unReguLiquids);
          this.$set(this.newData,'unReguSolid',response.data.unReguSolid);
        });
      },
      //计算本次申购量
      computeFun(){
        let self=this;
        let list=0;
        let list2=0;
        if(self.newData.hxpApplyDetailModelList[0]){
          for (let i=0;i<self.newData.hxpApplyDetailModelList.length;i++){
            if (self.newData.hxpApplyDetailModelList[i].normsUnit=='ml'){
              list+=(self.newData.hxpApplyDetailModelList[i].normsNum*self.newData.hxpApplyDetailModelList[i].applyNum)
            }else if (self.newData.hxpApplyDetailModelList[i].normsUnit=='g'){
              list2+=(self.newData.hxpApplyDetailModelList[i].normsNum*self.newData.hxpApplyDetailModelList[i].applyNum)
            }
          }
          this.$set(this.newData,'applyLiquid',list);
          this.$set(this.newData,'applySolid',list2);
        }
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton('out');
      },
      /** 提交按钮 */
      submitForm() {
        let self=this;
        console.log(self.tableForm)
        if (!self.tableForm.nodeContent){
          self.msgError("请输入审核意见")
          return
        }
        chemicalApplyTaskApprovalTask(self.tableForm).then( response => {
          self.msgSuccess("成功")
          self.$parent.tableButton('out');
        });
      }
    },
  }
</script>

<style scoped lang="scss">
  .purchaseExamine-infoPage{
    .content-box{
      flex:1;
      display: flex;
      flex-direction: column;
      .title-max-big-box{
        display: flex;
        height:80px;
        padding:0 80px;
        .title-p{
          flex:1;
          line-height:80px;
          font-size:16px;
        }
        .num-max-big-box{
          display: flex;
          margin:20px 0;
          line-height:40px;
          border:1px solid #A9A9A9;
          border-radius:4px;
          overflow: hidden;
          p{
            font-size:16px;
            text-align: center;
            width:120px;
          }
          p:nth-child(1){
            background-color: #F5F5F5;
          }
          p:nth-child(2){

          }
          p:nth-child(3){

          }
        }
        .add-item-button{
          width:120px;
          margin:20px 0;
        }
        .title-type-a{
          line-height:80px;
          font-size:16px;
          color:#1BBC46;
        }
        .title-type-b{
          line-height:80px;
          font-size:16px;
          color:#FF8C11;
        }
        .title-type-c{
          line-height:80px;
          font-size:16px;
          color:#666666;
        }
      }
      .border-p{
        border-top:20px solid #F5F5F5;
      }
      .flex-text-max-box{
        display: flex;
        div{
          display: flex;
          p{
            font-size:16px;
            line-height:20px;
            margin-bottom:30px;
          }
          p:nth-child(1){
            width:144px;
            text-align: right;
          }
          p:nth-child(2){
            width:250px;
          }
        }
      }
      .flex-text-max-big-box{
        display: flex;
        .flex-text-max-big-left-box{
          display: flex;
          flex: 1;
          p{
            font-size:16px;
            line-height:20px;
            margin-bottom:30px;
          }
          p:nth-child(1){
            width:144px;
            text-align: right;
          }
          p:nth-child(2){
            flex:1;
          }
        }
        .flex-text-max-big-right-box{
          display: flex;
          flex: 1;
          div{
            display: flex;
            flex: 1;
          }
          p{
            font-size:16px;
            line-height:20px;
            margin-bottom:30px;
          }
          p:nth-child(1){
            width:164px;
            text-align: right;
          }
          p:nth-child(2){
            flex:1;
          }
        }
      }
      .for-table-box{
        padding:0 80px 40px;
        .table-form-max-box{
          display: flex;
          .table-form-box{
            display: flex;
            .table-form-title{
              color:red;
              font-size:14px;
              line-height:34px;
              margin-left:20px;
            }
            .table-form-name{
              color:#333;
              font-size:14px;
              line-height:27px;
              margin-left:2px;
            }
            .table-date{
              height:26px;
              ::v-deep input{
                display: block;
                height:26px!important;
              }
              ::v-deep .el-input--medium .el-input__icon{
                line-height:28px;
              }
            }
          }
        }
      }
    }
    .auditStatusColor-A{
      display: inline-block;
      font-weight: 400;
      font-size: 14px;
      color: #FF8C11;
      line-height: 14px;
      width: 80px;
      border-radius: 2px;
      border: 1px solid #FF8C11;
      text-align: center;
      padding: 4px 14px;
    }
    .auditStatusColor-B{
      display: inline-block;
      font-weight: 400;
      font-size: 14px;
      color: #1BBC46;
      line-height: 14px;
      width: 80px;
      border-radius: 2px;
      border: 1px solid #1BBC46;
      text-align: center;
      padding: 4px 14px;
    }
    .auditStatusColor-C{
      display: inline-block;
      font-weight: 400;
      font-size: 14px;
      color: #E10000;
      line-height: 14px;
      width: 80px;
      border-radius: 2px;
      border: 1px solid #E10000;
      text-align: center;
      padding: 4px 14px;
    }
  }
</style>
