<template>
  <!--  费用支付-->
  <div class="expense">
    <navbar :name="name" />
    <div :class="['box', 'flex-center', { 'vertical-box-colum': isVertical }]">
      <div :class="['left', { 'vertical-box': isVertical }]">
        <div class="title">温馨提示</div>
        <div class="content">请在二维码区域提示的时限内，尽快完成支付。如果操作超时，本次打印业务可能需要重新提交。</div>
      </div>
      <div :class="['right', { 'vertical-box': isVertical }]">
        <div class="code">
          <VueQr
            v-if="appSrc != ''"
            :logo-src="require('@/assets/logo.png')"
            :logoScale="0.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>
<!--    <audio ref="audio" class="aud">-->
<!--      <source src="../assets/audio/Remind2Pay.mp3" autoplay />-->
<!--    </audio>-->
  </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'
import alert from "@/utils/alert";
import {bdPlayAudio} from "../api/bdResultApi";

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'
      },
      isVertical: false
    }
  },
  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(error => {alert(error,this)})
    },
    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() {
      if (this.$route.name == 'expense') {
        let num = this.num
        if (num == 0) {
          this.quit()
          return
        } else if (num > 0) {
          setTimeout(() => {
            this.num = num - 1
            this.countDown()
          }, 1000)
        }
      }
    },
    play() {
      // this.$refs.audio.play()
      bdPlayAudio({fileName: 'Remind2Pay'}).then(res => {
        console.log('音频触发', res)
      })
    }
  },
  destroyed() {
    // 销毁监听
    // clearTimeout()
    this.num = -1
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  mounted() {
    // this.play()
    this.num = 120
    this.countDown()
    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;
      }
    }
  }
}
.vertical-box {
  width: 80% !important;
  height: 35rem !important;
}
.vertical-box-colum {
  height: 90rem;
  flex-direction: column-reverse;
  justify-content: space-around;
  align-items: center;
}
</style>