<template>
    <div class="testdiv" ref="outdiv" style="overflow:auto;">
      <div class="newSearchDiv">
        <div class="filter">
            <label>编号二维码：</label>
            <Input class="searchInput middleWidth" type="text" disabled v-model="sn"/>
        </div>
      </div>
      <div class="content" ref="content">
          <List class="list" header="基本信息" border size="small">
              <ListItem>
                <div class="detailcon"><span>工单：</span>{{wo}}</div>
              </ListItem>
              <ListItem>
                <div class="detailcon"><span>品名：</span>{{productname}}</div>
              </ListItem>
              <ListItem>
                <div class="detailcon"><span>规格：</span>{{specs}}</div>
              </ListItem>
              <ListItem>
                <div class="detailcon"><span>完成日期：</span>{{completiondate}}</div>
              </ListItem>
          </List>

          <List class="list assembling" header="装配信息" border size="small">
              <ListItem v-for="(item,index) in assembling" :key="index" style="cursor:pointer;" @click.native="getBatchInfo(item.batch)">
                <div class="detailcon"><span>品名：</span>{{item.name}}</div>
                <div class="detailcon"><span>型号：</span>{{item.drawingcode}}</div>
                <div class="detailcon"><span>数量：</span>{{item.number}}</div>
                <div class="detailcon"><span>{{item.type===1?'SN':'批次号'}}：</span>{{item.batch}}</div>
                <div class="detailcon"><span>产线层级：</span>{{item.section}}</div>
                <div class="detailcon"><span>工序：</span>{{item.productRoute}}</div>
                <div class="detailcon"><span>人员：</span>{{item.uid}}</div>
                <div class="detailcon"><span>时间：</span>{{item.dateTime}}</div>
              </ListItem>
          </List>

          <List class="list inspectionData" header="检验数据" border size="small">
              <ListItem v-for="(item,index) in inspectionData" :key="index">
                <div class="detailcon"><span>产线层级：</span>{{item.section}}</div>
                <div class="detailcon"><span>时间：</span>{{item.dateTime}}</div>
                <div class="detailcon"><span>检验人员：</span>{{item.uid}}</div>
                <div class="detailcon"><span>检验类型：</span>{{item.checkType}}</div>
                <div class="detailcon"><span>工序：</span>{{item.productRoute}}</div>
                <div class="detailcon"><span>结果：</span>{{item.result}}</div>
                <div class="detailcon" v-for="(ele,i) in item.traceDetials" :key="i"><span>{{ele.item}}：</span>
                  <a v-if="ele.code ==1" :href="ele.value" style="color:blue;">{{ele.value}}</a>
                  <span v-else>{{ele.value}}</span>
                </div>
              </ListItem>
          </List>
      </div>

    </div>
</template>
<script>
import moment from 'moment'
export default {
    data () { // 基础数据
        return {
            sn: '', // 编号二维码
            wo: '', // 工单
            productname: '', // 品名
            specs: '', // 规格
            completiondate: '', // 完成日期
            assembling: [], // 装配信息
            inspectionData: []// 检验数据
        }
    },
    created () {
        if (this.$route.query.sn != '' && this.$route.query.sn != undefined) {
            this.sn = this.$route.query.sn
            this.search()
        }
    },
    mounted(){
      this.$nextTick(()=>{
        setTimeout(() => {
          this.getClientHeight()
        }, 500);
      })
    },
    methods: {
        getClientHeight(){
          var divnode = document.getElementsByClassName("detailcon").length;
          var divnum = 0;
          var divHeight = 26;
          divnum = Math.ceil(parseInt(divnode));
          this.$refs.content.style.height = 7*35 + (divnum-7)*divHeight + 250 + 'px';
          this.$refs.outdiv.style.height = window.innerHeight + 'px'
        },
        search () {
            var data = {
                sn: this.sn
            }
            this.axios.request({
                url: '/acc/AppAssemb/QueryData',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    var info = res.data.data
                    this.wo = info.wo // 工单
                    this.productname = info.name // 品名
                    this.specs = info.drawingcode // 规格
                    this.completiondate = info.dateTime // 完成日期

                    // 装配信息
                    this.assembling = info.assembList
                    // 检验数据
                    this.inspectionData = info.inspectionData
                    if(info.inspectionData!=null&&info.inspectionData!=undefined&&info.inspectionData.length >0){
                      info.inspectionData.forEach((item,index) => {
                        if(item.traceDetials.length > 0){
                          item.traceDetials.forEach((v,k)=>{
                            let valueInfo = v.value;
                            let code1 = valueInfo.indexOf('.xls');
                            let code2 = valueInfo.indexOf('.xlsx');
                            if(code1!=-1||code2!=-1){
                              v.code = 1
                              v.value = this.axios.publicPath + v.value
                            }else{
                              v.code = 0
                            }
                          })
                        }
                      });
                    }
                }
            })
        },
        getBatchInfo(sninfo){
          if(sninfo!=""&&sninfo!=null&&sninfo!=undefined){
            let routeUrl = this.$router.resolve({
              path: "/mtsSearch",
              query: { sn: sninfo },
            });
            window.open(routeUrl.href, "_blank");
          }
        }
    }
}
</script>
<style lang="less" scoped>
  .content{
    height:100%;
    padding:0px 10px;
    li{
      display:inline-block;
      width:100%;
    }
    .detailcon{
      width:100%;
      font-weight: normal;
      display: inline-block;
      span{
        font-weight: bold;
      }
    }
  }
  .assembling .detailcon,.inspectionData .detailcon{
    padding:3px;
  }
  .content>div{
    margin-bottom:10px;
  }
  .list{
      font-weight: bold;
  }
</style>
