<template>
  <div class="page making-page" :style="pgStyle">
    <div class="image-saved" v-if="creation">
      <img :src="creation" alt="">
    </div>
    <div class="poem-wrapper" :style="wraperStyle" ref="wrapper">
      <Image :src="backImg" :actions="actions" @load="onLoad"/>
      <img :src="qrcode" alt="" class="qrcode" :style="qrStyle">
      <div class="poem-content" :style="ttStyle" v-html="pureHtml"></div>
    </div>
    <TGradient :style="gdStyle" color="#0f2c37" />
    <template v-if="creation">
      <img class="next-img" :src="nextImg" alt="" @click="onNextClick">
      <img class="press-img" :src="pressImg" alt="" :style="psStyle">
    </template>
  </div>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useModel } from '@zjxpcyc/vue-tiny-store';
  import html2canvas from 'html2canvas';
  import Image from '@/components/Image.vue';
  import TGradient from '@/components/TGradient.vue';
  import { getPageStyle } from '@/utils/page';
  
  const backImg = './images/3.png';
  const nextImg = './images/next.png';
  const pressImg = './images/press2save.png';
  const actions = [
    // { pos: [368, 1244], width: 140, height: 50, onClick: () => router.push('/creation') },
  ];

  // 图上诗词展示位置
  const bound = [
    [290, 498],
    [540, 796],
  ]

  // 二维码中心
  const qrcodePos = [383, 1187];

  const router = useRouter();
  const wrapper = ref();
  const wraperStyle = ref({});
  const gdStyle = ref({});
  const ttStyle = ref({});
  const psStyle = ref({});
  const qrStyle = ref({ width: '1px', height: '1px' });
  const pgStyle = ref({});
  const creation = ref();
  const [poem] = useModel('poem');
  const [qrcode] = useModel('qrcode');

  const pureHtml = computed(() => (poem.value || '').replace(/[\r\n]/g, '<br>').replace(/[\n]/g, '<br>'));

  const onNextClick = () => {
    router.push('/creation');
  };

  const onLoad = (e) => {
    const { width, height, naturalHeight, naturalWidth } = e.target;
    const xRate = width / naturalWidth;
    const yRate = height / naturalHeight;

    const odWidth = bound[1][0] - bound[0][0];
    const odHeight = bound[1][1] - bound[0][1];

    psStyle.value = {
      width: `${xRate * 320}px`,
      height: `${yRate * 30}px`,
      top: `${height - 40}px`,
      left: `${(width - xRate * 320) / 2}px`,
    }

    wraperStyle.value = {
      width: `${width}px`,
      height: `${height}px`,
    };

    gdStyle.value = {
      width: `${width}px`,
      height: '40px',
      left: 0,
      top: `${height - 20}px`
    };

    ttStyle.value = {
      left: `${bound[0][0] * xRate}px`,
      top: `${bound[0][1] * yRate}px`,
      width: `${odWidth * xRate}px`,
      height: `${odHeight * yRate}px`,
      fontSize: `${36 * xRate}px`,
      lineHeight: `${50 * xRate}px`,
    };

    const qrCodeWidth = 40;
    qrStyle.value = {
      width: `${qrCodeWidth}px`,
      height: `${qrCodeWidth}px`,
      left: `${qrcodePos[0] * xRate - qrCodeWidth / 2}px`,
      top: `${qrcodePos[1] * yRate - qrCodeWidth / 2}px`
    };
    
    pgStyle.value = getPageStyle(height);

    // 延时生成
    const t = setTimeout(() => {
      html2canvas(wrapper.value).then(function(canvas) {
        creation.value = canvas.toDataURL(undefined, 0.9);
      });
    }, 500);
  }

</script>

<style lang="less" scoped>
  .making-page {
    .poem-wrapper {
      .poem-content {
        background: transparent;
        // background: rgba(255, 0,0, .5);
        position: absolute;

        writing-mode: vertical-rl;
        font-size: 18px;
        color: #0F3341;
        line-break: anywhere;
      }

      .qrcode {
        display: block;
        position: absolute;
      }
    }

    .image-saved {
      background: transparent;
      position: absolute;
      z-index: 10;
      left: 0;
      top: 0;

      & > img {
        display: block;
        width: 100%;
      }
    }

    .next-img {
      top: 0;
      right: 60px;
      width: 30px;
      position: absolute;
      z-index: 100;
    }

    .press-img {
      position: absolute;
      z-index: 100;
    }
  }

</style>