<template>
  <div class="page index-page" :style="pgStyle">
    <Image :src="backImg" :actions="actions" @load="onLoad" />
    <TGradient :style="gdStyle" color="#fdfcf0" />
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import Image from '@/components/Image.vue';
  import TGradient from '@/components/TGradient.vue';
  import { getPageStyle } from '@/utils/page';

  const backImg = './images/1.png';
  const actions = [
    { pos: [234, 1194], width: 140, height: 50, onClick: () => window.location.href = link1URL },
    { pos: [538, 1194], width: 140, height: 50, onClick: () => router.push('/creation') },
  ];

  const router = useRouter();
  const gdStyle = ref({});
  const pgStyle = ref({});

  const onLoad = (e) => {
    const { width, height } = e.target;
    gdStyle.value = {
      width: `${width}px`,
      height: '20px',
      left: 0,
      top: `${height - 10}px`
    }

    pgStyle.value = getPageStyle(height);
  }

</script>

<style lang="less" scoped>
.index-page {
  background: #fdfcf0;

  .page-back {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
  }
}
</style>