<template>
<!--  费用支付-->
<div class="expense">
  <navbar :name="name"/>
  <div class="box flex-center">
    <div class="left">
      <div class="title">温馨提示</div>
      <div class="content">请在二维码区域提示的时限内，尽快完成支付。如果操作超时，本次打印业务可能需要重新提交。</div>
    </div>
    <div class="right">
      <div class="code">
        <VueQr v-if="appSrc!=''" :logo-src="require('@/assets/logo.png')" :logoScale=".2" :logoMargin="0" logoBackgroundColor="white" :size="300" :margin="0" :auto-color="true" :dot-scale="1" :text="appSrc"></VueQr>
      </div>
      <div class="flex-center tip">提示：请在 {{num}} 秒内完成扫码支付</div>
    </div>
  </div>
</div>
</template>

<script>
import navbar from '@/components/nav'
// import {getPayQrCode, downloadPDF, getPrintTask} from "../api/resultApi";
import { downloadPDF, getPrintTask} from "../api/resultApi";
import VueQr from 'vue-qr'
import bdRequest from "../utils/bdRequest";

export default {
  name: "expense",
  components: {
    navbar,VueQr
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.cite.modeName,
      appSrc: '',
      client: '',
      num: 120,

      selectedFile: this.cite.selectedFile,
      listData: {
        "code":"20240104231724631239-0",
        "copies":1,
        "printFileId":112,
        "printFileType":"PDF",
        "printingColor":"BW",
        "printingFaces":"SINGLE"
      }
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    downloadPDF(id,name) {
      downloadPDF({id: id}).then(res => {
        const fileName = name
        const blob = new Blob([res], {type: 'application/octet-stream'})
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName)
        } else {
          let link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          window.URL.revokeObjectURL(link.href)
        }
      }).catch(() => {
      })
    },
    async dayin() {
      let _this = this
      let {listData,selectedFile} = _this
      let i = '', deta=''
      selectedFile.forEach((item,index) => {
        if(listData.printFileId == item.id) {
          i=index
          deta = item
        }
      })
      await this.downloadPDF(listData.printFileId,listData.printFileName)
      console.log('打印',deta,listData.copies)
      setTimeout(() =>{
        _this.selectedFile.splice(i, 1)
        // 按份数循环打印
        // for(let i=0;i<listData.copies;i++) {
        // }

        let res = bdRequest({
            method: 'post',
            url: '/api/Printer/Print',
            post: '8080',
            data: {
              "PrinterName": "EPSON WF-C5890 Series",
              // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName,
              "SourceFile": 'C:\\datasource\\'+listData.printFileName,
              "FileType": "pdf",
              "PrintColor": listData.printingColor || "",
              "DblPrt": listData.printingFaces || ""
            }
          })
          console.log(res)

        setTimeout(()=>{
          if(_this.selectedFile.length>0) {
            _this.getPrintTask()
          }else{
            _this.cite.orderId = ''
            _this.skip('complete',_this.name)
          }
        },1000)

      },2000)
    },
    async getPrintTask() {
      let _this = this
      if(_this.cite.orderId) {
        let res = await getPrintTask({orderId: _this.cite.orderId})
        console.log(res,'getPrintTask数据')
        if(res) {
          _this.listData = res
          _this.dayin()
        }else{
          setTimeout(()=>{
            _this.getPrintTask()
          },1000)
        }
      }
    },
    load() {
      let _this = this

      setTimeout(()=>{
        _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData)
      },800)

      // getPayQrCode({orderId: _this.cite.orderId,payMode: 'TZ_PAY'}).then(res => {
      //   // console.log(res.data.qrCode)
      //   if(res.qrCode) {
      //     // _this.appSrc = res.qrCode
      //
      //     _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData)
      //     // 循环查询是否需要调打印
      //     // setTimeout(() =>{
      //     //   // _this.dayin()
      //     //   _this.getPrintTask()
      //     // },1000)
      //   }
      // })
    },
    countDown(num) {
      if(num<1) {
        this.quit()
        return
      }
      setTimeout(()=>{
        this.num = num-1
        this.countDown(this.num)
      },1000)
    },
  },
  destroyed() {
    // 销毁监听
    // clearTimeout()
  },
  mounted() {
    this.countDown(120)
    this.load()
  }
}
</script>


<style scoped lang="less">
.box {
  height: 42.13rem;
  .css1 {
    height: 100%;
    background: #FFFFFF;
    box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14);
    border-radius: 1.63rem;
  }
  .left {
    width: 46.44rem;
    margin-right: 1.88rem;
    .css1();
    .title {
      font-size: 2.88rem;
      font-weight: bold;
      color: #D41212;
      line-height: 4.06rem;
      padding: 4.13rem 0 2.44rem;
    }
    .content {
      width: 37rem;
      font-size: 2.25rem;
      font-weight: bold;
      color: #323232;
      line-height: 3rem;
      margin: 0 auto;
      text-align: left;
    }
  }
  .right {
    width: 62.81rem;
    .css1();
    font-size: 2.25rem;
    font-weight: bold;
    color: #323232;
    line-height: 3.13rem;
    .code {
      display: inline-block;
      width: 23.25rem;
      height: 22.88rem;
      background: #FFFFFF;
      //border: 0.06rem solid #707070;
      margin: 2.94rem auto 1.19rem;
      img {
        width: 100%;
        height: auto;
      }
    }
  }
}
</style>