<template>
  <div class="page" :style="pgStyle">
    <Image :src="backImg" :actions="actions" @load="onLoad" />
    <TGradient :style="gdStyle" color="#0f2c37" />
    <textarea class="input-area" placeholder="一起来创造属于你自己的灵魂诗篇吧" :style="ttStyle" @input="onInput"></textarea>
  </div>
</template>

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

  // 图上 textarea 位置
  const bound = [
    [66, 568],
    [682, 1136],
  ]

  const router = useRouter();
  const gdStyle = ref({});
  const ttStyle = ref({});
  const pgStyle = ref({});
  const [,updatePoem] = useModel('poem');

  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];

    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`,
    };
    
    pgStyle.value = getPageStyle(height);
  }

  const onInput = (e) => {
    updatePoem(e.target.value);
  }

</script>

<style lang="less" scoped>
.input-area {
  background: transparent;
  // background: rgba(255, 0,0, .5);
  position: absolute;
  outline: none;
  border: none;
  box-sizing: border-box;
  padding: 12px;

  writing-mode: vertical-rl;
  font-size: 24px;
  color: #E6DCD3;
}
</style>
