<template>
  <view>
    <view class="qrCodeInfoWrapper">
      <view class="currencyAmountLabel">{{ $t('deposit.remittanceAmount') }}</view>
      <view class="currencyAmount">{{ depositData.currency_amount }}</view>
      <view class="qrCodeImgWrapper" @longpress="showDetailDialog">
        <div class="qrCodeImgBg"></div>
        <image crossOrigin="" v-if="qrCodeImg" :src="qrCodeImg" mode="aspectFill" class="qrCodeImg"></image>
      </view>
      <view class="paymentIcons">
<!--        <image src="/static/capital/alipay.svg" mode="aspectFit" class="paymentIcon"></image>-->
      </view>
      <view style="margin-top: 24px; padding: 0px 62px; text-align: center; font-size: 12px; line-height: 17px">
<!--        <text style="color: #29bbe4">{{ $t('deposit.longPressCode1') }}</text>-->
<!--        <text style="color: #aaaaaa">{{ $t('deposit.longPressCode2') }}\n{{ $t('deposit.longPressCode3') }}</text>-->
      </view>
    </view>
  </view>
</template>

<script>
import { getBankImg } from '@/services/capital/deposit.ts';
export default {
  name: 'QrCodeInfo',
  props: {
    imgUrl: {
      type: String,
      required: true,
      default: ''
    },
    depositData: {
      type: Object,
      required: true,
      default: () => ({})
    },
    next: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      canvasId: 'myCanvas',
      qrCodeImg: '',
      gradientBg: '/static/capital/gradientBg.svg',
      htfxLogo: '/static/logo.svg',
      weChatPayIcon: '/static/capital/weChatPay.svg',
      aliPayIcon: '/static/capital/aliPay2.svg',
      unionPayIcon: '/static/capital/unionPay.svg',
      huabeiIcon: '/static/capital/huabei.svg',
      imgBaseUrl: '',
      qrCodeImgUrl: '',
      hour: 0,
      minute: 0,
      second: 0
    };
  },
  methods: {
    async getImgPathData() {
      this.qrCodeImg = 'data:image/png;base64,' + this.imgUrl;
    },
    async getBankImgData(id) {
      const res = await getBankImg(id);
      console.log('res=>', res);
      const temp = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((res, byte) => res + String.fromCharCode(byte), ''));
      console.log('temp==>', temp);
      this.qrCodeImgUrl = temp;
    },
    showDetailDialog() {
      this.$refs.alertDialog.open();
      this.$nextTick(() => {
        this.drawCanvas();
      });
    },
    closeDetailDialog() {
      this.$refs.alertDialog.close();
    },
    drawCanvas() {
      const ctx = uni.createCanvasContext(this.canvasId, this);
      // 绘制白色背景
      ctx.setFillStyle('#fff');
      ctx.fillRect(0, 0, 243, 328);

      // 绘制渐变色背景
      ctx.drawImage(this.gradientBg, 0, 0, 243, 328);

      // 绘制logo
      ctx.drawImage(this.htfxLogo, 72, 29, 100, 36);

      // 绘制圆角矩形
      this.roundedRectangleDrawer(ctx);

      // 绘制渐变色边框
      this.gradientBorderDrawer(ctx);

      // 绘制支付图标
      // ctx.drawImage(this.weChatPayIcon, 26, 269, 29, 29);
      // ctx.drawImage(this.aliPayIcon, 80, 269, 29, 29);
      // ctx.drawImage(this.unionPayIcon, 134, 269, 29, 29);
      // ctx.drawImage(this.huabeiIcon, 188, 269, 29, 29);
      ctx.drawImage(this.aliPayIcon, 108, 269, 29, 29);
      // 绘制自定义图片
      ctx.drawImage(this.qrCodeImg, 75, 108, 93, 93);

      ctx.draw(); // 绘制到 canvas 上
    },
    roundedRectangleDrawer(ctx) {
      // 设置矩形参数
      const x = 60; // x 坐标
      const y = 92; // y 坐标
      const width = 124; // 矩形宽度
      const height = 124; // 矩形高度
      const radius = 7; // 圆角半径

      ctx.beginPath();
      ctx.moveTo(x + radius, y); // 起始点
      ctx.lineTo(x + width - radius, y); // 上边
      ctx.quadraticCurveTo(x + width, y, x + width, y + radius); // 右上角
      ctx.lineTo(x + width, y + height - radius); // 右边
      ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); // 右下角
      ctx.lineTo(x + radius, y + height); // 下边
      ctx.quadraticCurveTo(x, y + height, x, y + height - radius); // 左下角
      ctx.lineTo(x, y + radius); // 左边
      ctx.quadraticCurveTo(x, y, x + radius, y); // 左上角
      ctx.closePath();

      // 填充颜色
      ctx.setFillStyle('#fff');
      ctx.fill();
    },
    gradientBorderDrawer(ctx) {
      // 矩形参数
      const x = 73.5;
      const y = 106.5;
      const width = 96;
      const height = 96;
      const borderWidth = 3; // 边框宽度

      // 创建渐变
      const gradient = ctx.createLinearGradient(x, y, x + width, y); // 从左到右渐变
      gradient.addColorStop(0, '#4068A8'); // 开始颜色
      gradient.addColorStop(1, '#29BBE4'); // 结束颜色

      // 填充矩形
      ctx.fillStyle = '#ffffff'; // 矩形填充颜色
      ctx.fillRect(x, y, width, height);

      // 绘制渐变边框
      ctx.lineWidth = borderWidth;
      ctx.strokeStyle = gradient;
      ctx.strokeRect(x, y, width, height);
    },
    saveImage() {
      // #ifdef H5
      this.saveToAlbum(this.qrCodeImgUrl);
      this.closeDetailDialog();
      this.$cusModal.showModal({ type: 'message', status: 'success', contentText: this.$t('common.success.qrCodeSave') });
      // #endif

      // #ifndef H5
      const canvasId = this.canvasId;
      uni.canvasToTempFilePath({
        canvasId: canvasId,
        success: (res) => {
          this.saveToAlbum(res.tempFilePath);
          this.closeDetailDialog();
          this.$cusModal.showModal({ type: 'message', status: 'success', contentText: this.$t('common.success.qrCodeSave') });
        },
        fail: (err) => {
          console.error(err);
        }
      });
      // #endif
    },
    saveToAlbum(tempFilePath) {
      // #ifdef H5
      var oA = document.createElement('a');
      oA.download = 'HTFX';
      oA.href = tempFilePath;
      document.body.appendChild(oA);
      oA.click();
      oA.remove();
      // #endif
      // #ifndef H5
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: () => {
          uni.showToast({
            title: this.$t('common.success.saveDone'),
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error(err);
          uni.showToast({
            title: this.$t('common.success.saveFail'),
            icon: 'none'
          });
        }
      });
      // #endif
    }
  },
  created() {
    this.hour = Math.floor(this.depositData.pay_time / 3600000);
    this.minute = Math.floor((this.depositData.pay_time % 3600000) / 60000);
    this.second = (this.depositData.pay_time % 60000) / 1000;
  },
  async mounted() {
    await this.getImgPathData();
    if (this.depositData?.obj?.goldInId) {
      await this.getBankImgData(this.depositData.obj.goldInId);
    }
    this.drawCanvas();
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
