<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.chemicalDetail.chemicalName}}<p class="chemical-state">{{newData.chemicalDetail.status==1?'未出库':'出库'}}</p></li>
            <li>{{newData.chemicalDetail.chemicalShape==1?'固体':'液体'}}/{{newData.chemicalDetail.chemicalPurity}}/{{newData.chemicalDetail.casNum}}</li>
            <li>类别：{{newData.chemicalDetail.chemicalCategory}}<p class="control-state">{{newData.chemicalDetail.chemicalLevel==1?'管控':(newData.chemicalDetail.chemicalLevel==2?'非管控':'-')}}</p></li>
            <li>编码：{{newData.chemicalDetail.tagCode}}</li>
            <li>RFID标签：{{newData.chemicalDetail.rfidCode}}</li>
            <li>规格：{{newData.chemicalDetail.specNum}}{{newData.chemicalDetail.specUnit}}/{{newData.chemicalDetail.packUnit}}</li>
            <li>实时库存：{{newData.chemicalDetail.surplus}}{{newData.chemicalDetail.specUnit}}</li>
            <li>过期时间：{{newData.chemicalDetail.expireTime}} | {{newData.chemicalDetail.adventWarnDay}}</li>
            <li>领用时效：{{newData.chemicalDetail.duration}}小时</li>
            <li>实验室：{{newData.chemicalDetail.subName}}({{newData.chemicalDetail.subRoom?newData.chemicalDetail.subRoom:''}})</li>
            <li>安全员：{{newData.chemicalDetail.safeInfo}}</li>
            <li>位置：{{newData.chemicalDetail.cabinetName}}-{{newData.chemicalDetail.doorName}}-{{newData.chemicalDetail.layers}}层</li>
            <li>归属人：{{newData.chemicalDetail.belongName}}</li>
        </div>
        <div class="lines"></div>
        <div class="content-box-right scrollbar-box">
            <div class="record" v-for="(item,index) in newData.dataList">
              <div class="record-li">
                  <div class="record-li-t">
                      <div class="record-li-t-l">{{item.tagType}}</div>
<!--                      <div class="record-li-t-r">-->
<!--                        <p v-if="item.itemData2" @click="lookVideo(item.videoA)">操作视频</p>-->
<!--                        <p v-if="item.itemData3" @click="lookVideo(item.videoB)">开门视频</p>-->
<!--                      </div>-->
                  </div>
                  <div class="record-li-m">
                    <p>操作时间</p>
                    <p v-if="item.tagCode==1 || item.tagCode==3">领用量</p>
                    <p v-if="item.tagCode==0 || item.tagCode==3">使用量</p>
                    <p v-if="item.tagCode==0">余量</p>
                    <p v-if="item.tagCode==1 || item.tagCode==3">是否整瓶领用</p>
                    <p>称重方式</p>
                    <p>双人认证</p>
                    <p>操作人</p>
                  </div>
                  <!-- tagCode 1领用，0是归还，3是空瓶出库-->
                  <div class="record-li-b">
                      <p>{{parseTime(item.collectTime,"{y}-{m}-{d} {h}:{i}")}}</p>
                      <p v-if="item.tagCode==1 || item.tagCode==3">{{item.collectNowNum}}{{item.collectNowNum?item.specUnit:''}}</p>
                      <p v-if="item.tagCode==0 || item.tagCode==3">{{item.useAmount}}{{item.useAmount?item.specUnit:''}}</p>
                      <p v-if="item.tagCode==0">{{item.returnStockNum}}{{item.returnStockNum?item.specUnit:''}}</p>
                      <p v-if="item.tagCode==1 || item.tagCode==3">{{item.isBottle?item.isBottle:''}}</p>
                      <p>{{item.outType}}</p>
                      <p>{{item.doubleAuthen}}</p>
                      <p>{{item.userName}}</p>
                  </div>
              </div>
<!--              <div class="record-li">-->
<!--                <div class="record-li-t">-->
<!--                  <div class="record-li-t-l">{{item.itemData11}}</div>-->
<!--                  <div class="record-li-t-r">-->
<!--                    <p v-if="item.itemData12" @click="lookVideo(item.videoC)">操作视频</p>-->
<!--                    <p v-if="item.itemData12" @click="lookVideo(item.videoD)">开门视频</p>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="record-li-m">-->
<!--                  <p>操作时间</p>-->
<!--                  <p>领用量</p>-->
<!--                  <p>使用量</p>-->
<!--                  <p>是否整瓶领用</p>-->
<!--                  <p>称重方式</p>-->
<!--                  <p>双人认证</p>-->
<!--                  <p>操作人</p>-->
<!--                </div>-->
<!--                <div class="record-li-b">-->
<!--                  <p>{{item.itemData14}}</p>-->
<!--                  <p>{{item.itemData15}}</p>-->
<!--                  <p>{{item.itemData16}}</p>-->
<!--                  <p>{{item.itemData17}}</p>-->
<!--                  <p>{{item.itemData18}}</p>-->
<!--                  <p>{{item.itemData19}}</p>-->
<!--                  <p>{{item.itemData20}}</p>-->
<!--                </div>-->
<!--              </div>-->
            </div>
        </div>
    </div>

<!--    <full-screen-mpegts-video ref="fullScreenMpegtsVideo" :videoProps="videoProps"></full-screen-mpegts-video>-->
  </div>
</template>

<script>
  // import fullScreenMpegtsVideo from '@/components/fullScreenMpegtsVideo/fullScreenMpegtsVideo.vue'
  export default {
    name: 'infoPage',
    components: {
      // fullScreenMpegtsVideo,
    },
    props:{
      propsData:{},
    },
    data(){
      return{
        //视频配置
        videoProps:{
          id:50,        //(ID:非必传-默认随机生成)
          type:'mp4',   //(视频类型:非必传-默认'flv')
          isLive:true,  //(是否直播流:非必传-默认true)
          url:""        //(视频地址:必传)
        },
        videoType:false,
        //数据
        newData:{
          chemicalDetail:{},
          dataList:[],
        },
      }
    },
    created(){

    },
    mounted(){
      let self=this;
      this.newData=this.propsData;
      console.log(this.newData)
    },
    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>
