<template>
  <div class="page-container 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">
      <div class="content-box-left scrollbar-box">
        <li class="chemical-name">{{newData.stock.chemicalName}}<p class="chemical-state">{{newData.stock.statusStr}}</p></li>
        <li>{{newData.stock.chemicalShape==1?'固体':'液体'}}/{{newData.stock.chemicalPurity}}/{{newData.stock.casNum}}</li>
        <li>类别：{{newData.stock.chemicalCategoryName}}<p class="control-state">{{newData.stock.chemicalLevel?'管控':'非管控'}}</p></li>
        <li>编码：{{newData.stock.tagCode}}</li>
        <li>RFID标签：{{newData.stock.rfidCode}}</li>
        <li>规格：{{newData.stock.specNum}}{{newData.stock.specUnit}}/{{newData.stock.packUnit}}</li>
        <li>实时库存：{{newData.stock.surplus}}{{newData.stock.specUnit}}</li>
        <li>过期时间：{{newData.stock.expireTime}} | {{newData.stock.anotherName}}</li>
        <li>领用时效：{{newData.stock.usageDuration}}小时</li>
        <li>实验室：{{newData.stock.subName}}({{newData.stock.subRoom?newData.stock.subRoom:''}})</li>
        <li>安全员：{{newData.stock.safeUser}}</li>
        <li>位置：{{newData.stock.position}}</li>
        <li>归属人：{{newData.stock.belongName}}</li>
      </div>
      <div class="lines"></div>
      <div class="content-box-right scrollbar-box">
        <div class="record" v-for="(item,index) in newData.userecordList">
          <div class="record-li">
            <div class="record-li-t">
              <div class="record-li-t-l">{{item.statusStr}}</div>
            </div>
            <div class="record-li-m">
              <p>操作时间</p>
              <p v-if="item.status==1 || item.status==3 || item.status==5">领用量</p>
              <p v-if="item.status==0 || item.status==3">使用量</p>
              <p v-if="item.status==0">余量</p>
              <p v-if="item.status==4">作废量</p>
              <p v-if="item.status!=0">是否整瓶领用</p>
              <p>称重方式</p>
              <p>双人认证</p>
              <p>操作人</p>
            </div>
            <!-- useStatus 0已归还，1使用中，2超时未归还，3用结出库，4作废出库，5整瓶领用-->
            <div class="record-li-b">
              <!--操作时间-->
              <p>{{parseTime(item.operateTime,"{y}-{m}-{d} {h}:{i}")}}</p>
              <!--领用量-->
              <p v-if="item.status==1 || item.status==3 || item.status==5">{{item.receiveAmount}}{{item.specUnit}}</p>
              <!--使用量-->
              <p  v-if="item.status==0 || item.status==3">{{item.useAmount}}{{item.specUnit}}</p>
              <!--余量-->
              <p  v-if="item.status==0">{{item.amount}}{{item.specUnit}}</p>
              <!--作废量-->
              <p v-if="item.status==4">{{item.receiveAmount}}{{item.specUnit}}</p>
              <!--是否整瓶领用-->
              <p v-if="item.status!=0">{{item.isBottle?item.isBottle:''}}</p>
              <!--称重方式-->
              <p>{{item.weighType}}</p>
              <!--双人认证-->
              <p>{{item.doubleAuth}}</p>
              <!--操作人-->
              <p>{{item.operateName}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'infoPage',
  components: {

  },
  props:{
    propsData:{},
  },
  data(){
    return{
      //视频配置
      videoProps:{
        id:50,        //(ID:非必传-默认随机生成)
        type:'mp4',   //(视频类型:非必传-默认'flv')
        isLive:true,  //(是否直播流:非必传-默认true)
        url:""        //(视频地址:必传)
      },
      videoType:false,
      //数据
      newData:{
        stock:{},
        userecordList:[],
      },
    }
  },
  created(){
    let self=this;
    this.newData=this.propsData;
  },
  mounted(){

  },
  methods:{
    // 返回按钮
    backPage(){
      this.$parent.tableButton('out','');
    },
    //浏览视频
    lookVideo(url){
      this.$set(this.videoProps,'url',url);
      this.$refs.fullScreenMpegtsVideo.openVideo()
    },
  }
}
</script>

<style scoped lang="scss">
.infoPage{
  .content-box{
    flex:1;
    display: flex;
    padding:20px;
    overflow: hidden;
    .content-box-left{
      width: 412px;
      padding: 10px 28px 0 60px;
      box-sizing: border-box;
      >li{
        list-style-type: none;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        margin-bottom: 20px;
        display: flex;
      }
      .chemical-name{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .chemical-state{
          width: 80px;
          height: 30px;
          background: #0183FA;
          border-radius: 6px 6px 6px 6px;
          font-size: 16px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 30px;
          text-align: center;
        }
      }

      .control-state{
        width: 50px;
        height: 24px;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid #FC7F1A;
        font-size: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #FC7F1A;
        line-height: 22px;
        text-align: center;
        margin-left:10px;
        float: right;
      }
    }
    .lines{
      width:1px ;
      height: 760px;
      opacity: 1;
      border: 1px dashed #D8D8D8;
    }
    .content-box-right{
      flex:1;
      margin-left:56px ;
      padding-top:10px;
      .record:nth-child(1){
        padding-top:0;
        border-top:none;
      }
      .record{
        width: 1028px;
        height:auto;
        opacity: 1;
        border-top: 1px dashed #D8D8D8;
        margin:0 0 10px;
        overflow: hidden;
        padding-top:30px;
        .record-li{
          margin-bottom: 20px;
          .record-li-t{
            display: flex;
            justify-content: space-between;
            .record-li-t-l{
              width: 150px;
              height: 40px;
              background: #0183FA;
              border-radius: 8px 8px 0px 0px;
              font-size: 16px;
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              line-height: 40px;
              text-align: center;
            }
            .record-li-t-r{
              display: flex;
              >p{
                width: 100px;
                height: 30px;
                border-radius: 6px 6px 6px 6px;
                opacity: 1;
                border: 1px solid #0183FA;
                font-size: 16px;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                color: #0183FA;
                line-height: 28px;
                text-align: center;
                margin-left:10px;
                cursor: pointer;
              }
            }
          }
          .record-li-m{
            display: flex;
            justify-content: flex-start;
            border: 1px solid #E0E0E0;
            >p{
              font-weight:700;
              flex: 1;
              height: 40px;
              background: #F5F5F5;
              font-size: 16px;
              font-family: Microsoft YaHei, Microsoft YaHei;
              color: #333333;
              line-height: 40px;
              text-align: center;
              border-right: 1px solid #E0E0E0;
            }
          }
          .record-li-b{
            display: flex;
            justify-content: flex-start;
            border-bottom: 1px solid #E0E0E0;
            border-left: 1px solid #E0E0E0;
            border-right: 1px solid #E0E0E0;
            >p{
              flex: 1;
              height: 40px;
              font-size: 14px;
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 40px;
              text-align: center;
              border-right: 1px solid #E0E0E0;
            }
          }
        }
      }
    }
  }
}
</style>
