<!--
 * @Date: 2023-12-30 22:43:25
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-04-11 13:29:29
 * @FilePath: /fxPark/src/views/fxPark/share.vue
 * @Description: 文件描述
-->
<template>
  <div class="share-page">
    <div v-if="flag" ref="canvasRef" class="share-bg">
      <div style="width: 90vw; height: 90vh;position: relative; overflow: hidden;">
        <img src="https://cdn.ipadbiz.cn/gy/new_year_2024/-h-%E6%96%B0%E5%B9%B4%E7%AD%BE.png" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%;">
      </div>
      <div style="text-align: center; position: absolute; top: 27.5vh; left: calc(50% - 10vw); font-size: 0.6rem;color:#000;">交往 · 交流 · 交融</div>
      <div class="desc-text" v-for="(item, index) in sloganStyle" :key="index" :style="{ ...item }">{{ stringToArray(slogan)[index] }}</div>
      <!-- <img :src="qr_code" :style="{ ...qrCodeStyle }"> -->
      <div style="text-align: center; position: absolute; bottom: 11vh; left: calc(50% - 15vw); font-size: 0.8rem;color:#c53447;">收听来自远方的祝福</div>
    </div>
    <div v-if="imgUrl" class="share-img">
      <img :src="imgUrl" alt="" crossOrigin="anonymous" :style="{ width: ref_width, height: ref_height }">
    </div>
    <div v-if="wish_list.length > 1" class="control-wrapper">
      <div class="prev" @click="prevWish">上一个</div>
      <div>长按保存到相册分享</div>
      <div class="next" @click="nextWish">下一个</div>
    </div>
    <div v-else class="control-wrapper" style="justify-content: center;">
      <div>长按保存到相册分享</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { shareWishListAPI } from '@/api/new_year_2024.js'
import { showToast } from 'vant';
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
// import qr_code from '@images/new_year_2024/http_qr_code.png'

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const wish_index = ref(0);
const slogan = ref('');
const wish_list = ref([]);

const canvasRef = ref(null);
const imgUrl = ref('');
const flag = ref(true);
const ref_width = ref('');
const ref_height = ref('');

// TAG: slogan位置配置
const sloganStyle = [{
  top: '34vh',
  left: '26vw',
  fontSize: '14vw'
}, {
  top: '34vh',
  right: '26vw',
  fontSize: '14vw'
}, {
  top: '48vh',
  left: '26vw',
  fontSize: '14vw'
}, {
  top: '48vh',
  right: '26vw',
  fontSize: '14vw'
}];

const qrCodeStyle = ref({
  position: 'absolute',
  bottom: '15.5vh',
  left: '36vw',
  width: '19vw',
  height: '10vh',
})

onMounted(async () => {
  nextTick(() => {
    let canvasDom = canvasRef.value;
    ref_width.value = canvasDom.offsetWidth + 'px';
    ref_height.value = canvasDom.offsetHeight + 'px';
    // const screenWidth = window.innerWidth;
    // alert(screenWidth); // 输出移动设备屏幕的宽度
  });
  const { code, data } = await shareWishListAPI();
  if (code) {
    wish_list.value = data;
    if (wish_list.value.length) {
      slogan.value = wish_list.value[wish_index.value].slogon;
      createImage();
    }
  }
});

const stringToArray = (str) => {
  return str.split('');
}

const prevWish = () => {
  if (!wish_index.value) {
    showToast('已经是第一张了');
    return;
  }
  wish_index.value -= 1;
  slogan.value = wish_list.value[wish_index.value].slogon;
  // 生成图片
  imgUrl.value = '';
  flag.value = true;
  createImage();
}

const nextWish = () => {
  if (wish_index.value === wish_list.value.length - 1) {
    showToast('已经是最后一张了');
    return;
  }
  wish_index.value += 1;
  slogan.value = wish_list.value[wish_index.value].slogon;
  // 生成图片
  imgUrl.value = '';
  flag.value = true;
  createImage();
}

// 获取像素比
const DPR = () => {
  // 获取设备dpi
  if (window.devicePixelRatio && window.devicePixelRatio > 1) {
    return window.devicePixelRatio * 2
  }
  // 直接返回高像素比
  return 8
}

const createImage = () => {
  nextTick(() => {
    // 获取要生成图片的 DOM 元素
    let canvasDom = canvasRef.value;
    const options = {
      backgroundColor: '#d21f2c',
      // canvas: canvas,
      useCORS: true,//配置允许跨域
      scale: DPR(),
      // windowWidth: document.body.scrollWidth,
      // windowHeight: document.body.scrollHeight,
      // x: 0,
      // y: window.pageYOffset,
      // allowTaint: true,
      // background: "#d21f2c", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
      // dpi: 300 // 处理模糊问题
    };
    // console.log("获取指定的宽高", width, height, canvas);
    html2canvas(canvasDom, options)
      .then(canvas => {
        try {
          // 生成图片地址
          imgUrl.value = canvas.toDataURL("image/png");
          // console.log("canvas.toDataURL('image/png')", this.imgUrl);
          flag.value = false;
        } catch (e) {
          alert("图片跨域,保存失败");
        }
      })
      .catch(error => {
        console.error("绘制失败");
        console.error(error);
      });
  });
}
</script>

<script>
import mixin from 'common/mixin';
import html2canvas from "html2canvas";
import wx from 'weixin-js-sdk'

export default {
  mixins: [mixin.init],
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.share-page {
  position: relative;
  background-color: #d21f2c;
  height: 100vh;
  width: 100vw;
  .share-bg {
    position: absolute;
    // top: 8vh;
    top: 0;
    left: 5vw;
    width: 90vw;
    height: 90vh;
    // background-image: url('https://cdn.ipadbiz.cn/gy/new_year_2024/%E6%96%B0%E5%B9%B4%E7%AD%BE@2x.png');
    // background-image: url('https://cdn.ipadbiz.cn/gy/new_year_2024/-h-%E6%96%B0%E5%B9%B4%E7%AD%BE.png');
    // background-repeat: no-repeat;
    // background-size: contain;
    // background-position: center;
    .desc-text {
      color: #c53447;
      // font-size: 13vw;
      // font-size: 7vh;
      // font-size: 3.5rem;
      position: absolute;
      font-weight: bold;
    }
  }

  .share-img {
    position: absolute;
    // top: 8vh;
    top: 0;
    left: 5vw;
  }

  .control-wrapper {
    display: flex;
    position: absolute;
    bottom: 5vh;
    width: 100%;
    justify-content: space-between;
    color: #FFF;
    align-items: center;
    .prev {
      background: #B41C1E;
      border-radius: 0px 33px 33px 0px;
      padding: 0.5rem 1rem 0.5rem 0.35rem;
    }
    .next {
      background: #B41C1E;
      border-radius: 33px 0px 0px 33px;
      padding: 0.5rem 0.35rem 0.5rem 1rem;
    }
  }
}
</style>