<template>
  <div class="tableAllDate"> 
     <!-- <div>
       <el-table
       v-loading="loading"
       style="width: 100%">
      </el-table>
     </div>  -->
     <div class="loading"  v-if="urls.length==0&&status==0"></div>
     <div v-if="status==-2">
       <h1>该车还未装货！</h1>
     </div>
     <div v-if="status==-1">
       <h1>质保书正在紧张制作中，请耐心等待！</h1>
     </div>
      <div id="pdfDom">
    <div class="demo-image__lazy" v-for="(img,index) in urls" :key="index">
       <!-- <el-image v-for="(img,index) in urls" :key="index" :src="img" lazy></el-image> -->
       <el-image   style='width: 100%; height: 100%; justify-content: center;
            align-items: center;' :src='img'></el-image>
     </div> 
      </div>
      <!-- <el-button style="margin-left: 45%;" type="primary" @click="getPdf()">
        <i class="el-icon-download"></i>导出(pdf)
      </el-button> -->
      <div class="button-box">
        <el-button v-if="urls.length>0&&status==0" type="primary" v-print="'#pdfDom'" @click="backScan()">
          <i class="el-icon-printer"></i>打印
        </el-button>
        <el-button type="primary" @click="backScan()">
          <i class="el-icon-back"></i>返回
        </el-button>
      </div>
  </div>
</template>

<script>
import table from '@/components/DilCommonUI/packages/table/src/table.vue';
export default {
  components: { table },
  name: "Login",
  data() {
    return {
      urls:[],
      //定义质保书正在紧张制作中、未装货和打印中的状态
      status:0,
      name: 'Loading'
    };
  }, 
  mounted() {
    this.information();
    //三十秒不操作，自动返回扫码页面
    const timer = setInterval(()=>{
        this.backScan();
    },30000)
    this.$once('hook:beforeDestroy', ()=>{
        clearInterval(timer)
    })
  },
  methods: {
     information() {
      //编辑
      console.log("this.$route.query.orderNumber",this.$route.query.orderNumber)
      this.axios
        .post(
          "/api/v1/uc/getWarranty?orderNumber="+this.$route.query.orderNumber 
        )
        .then((res) => {
          // console.log("res.data.data",res.data.data)
          // console.log("res.data.code",res.data.code)  
          if(res.data.data==-1){
            this.$message("质保书正在紧张制作中，请耐心等待！")
            this.status = -1;
          }else if(res.data.data==-2) {
            this.$message("该车还未装货")
            this.status = -2;
          }else{
            res.data.data.forEach((e) => {
              // console.log(e)
              this.urls.push(e)
          
            })
          }
        });
        },
       
        
      backScan(){
        this.$router.go(-2);
      },
      
  },
};
</script>

<style lang="scss" scoped>
.demo-image__lazy{
  position: relative;
}
.title{
  font-size:25px;
}
.tableBody{
  table, th, td
  {
      border: 1px solid black;
      font-size:20px;
      margin: auto;
  }
  .tablePart1 th{
      border-top: 1px solid black;
  }
  .tablePart2 td,th{
    border-top: 0px
  }
  .tablePart3 td,th{
    border-top: 0px
  }
  .tablePart4 td,th{
    border-top: 0px
  }
  .tablePart5 td,th{
    border-top: 0px
  }
}
.loading {
  position: fixed;
  left: 0;
  top: 0;
  background: url('~@/assets/loading_images/loading.gif') center center no-repeat #fff;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
}
.button-box{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 0.3125rem;
  margin-bottom: 1.25rem;
}
</style>
