<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" @click="skip('complete',name)">
        <VueQr :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">提示：请在 120 秒内完成扫码支付</div>
    </div>
  </div>
</div>
</template>

<script>
import navbar from '@/components/nav'
import {getPayQrCode, 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.$route.params.name,
      appSrc: '',
      client: '',

      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)
      setTimeout(() =>{
        _this.selectedFile.splice(i, 1)
        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.PrintColor || "",
            "DblPrt": listData.printingFaces || ""
          }
        })
        setTimeout(()=>{
          if(_this.selectedFile.length>0) {
            _this.getPrintTask()
          }else{
            _this.cite.orderId = ''
            _this.skip('complete',_this.name)
          }
        },1000)
        console.log(res)
      },2000)
    },
    async getPrintTask() {
      let _this = this
      if(_this.cite.orderId) {
        let res = await getPrintTask({orderId: _this.cite.orderId})
        // console.log(res,'数据')
        if(res.data) {
          _this.listData = res.data
          _this.dayin()
        }else{
          setTimeout(()=>{
            _this.getPrintTask()
          },1000)
        }
      }
    },
    load() {
      let _this = this
      getPayQrCode({orderId: _this.cite.orderId}).then(res => {
        // console.log(res.data.qrCode)
        if(res.qrCode) {
          _this.appSrc = res.qrCode
          setTimeout(() =>{
            // _this.dayin()
            _this.getPrintTask()
          },1000)
        }
      })
    },
  },
  mounted() {
    console.log(this.selectedFile)
    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>