<template>
  <div class="page" :style="pgStyle">
    <Image :src="backImg" :actions="actions" @load="onLoad" />
    <TGradient :style="gdStyle" color="#0f2c37" />
    <input class="input-box input-line" placeholder="请输入您的姓名!" :style="iiStyle" @input="onAuthor" ref="inputRef" />
    <textarea class="input-box input-area" placeholder="请输入您的祝福语!" :style="ttStyle" @input="onContent"></textarea>
  </div>
</template>

<script setup>
  import { onMounted, 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: [378, 1244], width: 180, height: 50, onClick: () => router.push('/makeSaving') },
  ];

  // 图上 input 位置
  const inputBound = [
    [66, 590],
    [687, 652],
  ];

  // 图上 textarea 位置
  const textareaBound = [
    [66, 670],
    [682, 1136],
  ];

  const router = useRouter();
  const inputRef = ref();
  const gdStyle = ref({});
  const ttStyle = ref({});
  const iiStyle = ref({});
  const pgStyle = ref({});
  const [user] = useModel('user');
  const [author, poemContent] = useModel('poem');

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

    const ttWidth = textareaBound[1][0] - textareaBound[0][0];
    const ttHeight = textareaBound[1][1] - textareaBound[0][1];
    const iiWidth = inputBound[1][0] - inputBound[0][0];
    const iiHeight = inputBound[1][1] - inputBound[0][1];

    gdStyle.value = {
      width: `${width}px`,
      height: '40px',
      left: 0,
      top: `${height - 20}px`
    };
    ttStyle.value = {
      left: `${textareaBound[0][0] * xRate}px`,
      top: `${textareaBound[0][1] * yRate}px`,
      width: `${ttWidth * xRate}px`,
      height: `${ttHeight * yRate}px`,
    };
    iiStyle.value = {
      left: `${inputBound[0][0] * xRate}px`,
      top: `${inputBound[0][1] * yRate}px`,
      width: `${iiWidth * xRate}px`,
      height: `${iiHeight * yRate}px`,
    }
    
    pgStyle.value = getPageStyle(height);
  }

  const onAuthor = (e) => {
    author.value = e.target.value;
  }

  const onContent = (e) => {
    poemContent.value = e.target.value;
  }

  onMounted(() => {
    inputRef.value.value = (user.value || {}).nickname || undefined;
    author.value = inputRef.value.value;
  })

</script>

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

.input-line {
  padding: 6px;
  font-size: 18px;
}
</style>
