<template>
  <div class="page-container savePending-infoPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">详情</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
    </div>
    <div class="content-box scrollbar-box">
      <div class="title-max-big-box">
        <p class="title-p">申购信息</p>
      </div>
      <div class="form-item-box">
        <div class="form-item-text-box">
          <p>实验室：</p>
          <p>{{newData.subName}}</p>
        </div>
        <div class="form-item-text-box">
          <p style="font-weight:700;">管控液体已存储量：</p>
          <p style="font-weight:700;">{{newData.controlLiquids}}</p>
        </div>
        <div class="form-item-text-box">
          <p style="font-weight:700;">管控固体已存储量：</p>
          <p style="font-weight:700;">{{newData.controlSolid}}</p>
        </div>
      </div>
      <div class="form-item-box">
        <div class="form-item-text-box">
          <p>归属人：</p>
          <p>{{newData.applyUserName}}-{{newData.applyUserPhone}}</p>
        </div>
        <div class="form-item-text-box">
          <p style="font-weight:700;">非管控液体已存储量：</p>
          <p style="font-weight:700;">{{newData.unReguLiquids}}</p>
        </div>
        <div class="form-item-text-box">
          <p style="font-weight:700;">非管控固体已存储量：</p>
          <p style="font-weight:700;">{{newData.unReguSolid}}</p>
        </div>
      </div>
      <div class="form-item-box">
        <div class="form-item-text-box">
          <p>用途：</p>
          <p>{{newData.applyReason}}</p>
        </div>
        <div class="form-item-text-box">
          <p>课题组：</p>
          <p>{{newData.topicGroupName}}</p>
        </div>
        <div class="form-item-text-box">
          <p>课题组负责人：</p>
          <p>{{newData.topicUserName}}-{{newData.topicUserPhone}}</p>
        </div>
      </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" border :data="newData.hxpStockWaitModelList">
          <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="厂家" prop="factory" width="210" show-overflow-tooltip/>
          <el-table-column label="过期时间" prop="expireTime" width="170" show-overflow-tooltip/>
          <el-table-column label="规格" prop="normsNum" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.normsNum}}{{scope.row.normsUnit}}/{{scope.row.applyUnit}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="applyUnit" width="120" show-overflow-tooltip/>
          <el-table-column label="数量" prop="applyNum" width="100" show-overflow-tooltip/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { chemicalStockGetStockBysubId } from '@/api/chemicalManage'

  export default {
    name: 'infoPage',
    props:{
      propsData:{},
    },
    data(){
      return{
        showType:false,
        newData:{
          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表示保存草稿
          },
        },
      }
    },
    created(){

    },
    mounted(){
      let self=this;
      this.newData=this.propsData;
      //化学品信息
      if (self.newData.chemicalId){
        self.newData.hxpStockWaitModelList=[
          {
            chemicalId:self.newData.chemicalId,
            chemicalName:self.newData.chemicalName,
            casNum:self.newData.casNum,
            chemicalCategory:self.newData.chemicalCategory,
            chemicalCategoryName:self.newData.chemicalCategoryName,
            chemicalLevel:self.newData.chemicalLevel,
            chemicalPurity:self.newData.chemicalPurity,
            normsNum:self.newData.normsNum,
            normsUnit:self.newData.normsUnit,
            applyUnit:self.newData.applyUnit,
            applyNum:self.newData.applyNum,
            expireTime:self.newData.expireTime,
            factory:self.newData.factory,
          }
        ]
      }
      this.chemicalStockGetStockBysubId(this.newData.subId)
    },
    methods:{
      //实验室-固体液体液体已存储量
      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);
        });
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton('out');
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {

          }
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .savePending-infoPage{
    .content-box{
      flex:1;
      display: flex;
      flex-direction: column;
      .title-max-big-box{
        display: flex;
        padding:0 80px;
        .title-p{
          flex:1;
          /*line-height:80px;*/
          font-size:16px;
          line-height: 20px;
          margin-top:30px;
        }
        .num-max-big-box{
          display: flex;
          margin:20px 30px;
          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;
        }
      }
      .form-item-box{
        display: flex;
        .form-item-text-box{
          width:430px;
          display: flex;
          p{
            font-size:14px;
            color:#333;
            line-height:16px;
            margin-top:36px;
          }
          p:nth-child(1){
            width:140px;
            text-align: right;
          }
          p:nth-child(2){
            width:290px;
            /*单行省略号*/
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
        .form-check-max-box{
          display: flex;
          .form-check-box{
            width:270px;
            display: flex;
            margin-right:20px;
            cursor: pointer;
            .form-check{
              width:18px;
              height: 18px;
              border-radius:50%;
              border:1px solid #999;
              margin:11px 11px 11px 198px;
              p{
                width:12px;
                height:12px;
                margin:2px;
                border-radius:50%;
              }
            }
            .form-check-a{
              border:1px solid #0183FA;
              p{
                background-color: #0183FA;
              }
            }
            .form-check-title{
              line-height:40px;
              font-size:14px;
              color:#333;
            }
          }
        }
      }
      .border-p{
        border-top:20px solid #F5F5F5;
        margin-top:40px;
      }
      .for-table-box{
        margin-top:30px;
        padding:0 80px 40px;
        min-height:300px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
    }
  }
</style>
