<template>
  <div class="entry-list-view">
    <Transition name="fade-out">
      <div
        v-show="isShowForeword && !hasShownForword"
        class="foreword"
      >
        <article>
          <p>世界文化遗产与童心相遇，会呈现出哪般模样？</p>
          <p>符号，纹饰，陶器，玉器......这些博物馆和遗址中的文化明珠，恰似古老文明赠予孩童们的灵感之礼。良渚文化，经他们之手，褪去历史的沉重外衣，开始轻盈的青春舞动，向我们展示了无尽的生命力和成长力。</p>
          <p>蓝染、版画、陶艺、国画、水彩.......一百七十余件艺术作品，传递出包括残障儿童在内的孩子们对于古老文明的独特观察。让我们踏入2023“良渚童huà”儿童艺术展，在亚运会的盛大舞台之上，看孩童们用良渚文化为世界喝彩！</p>
        </article>
        <button
          class="skip"
          @click="onClickSkip"
        >
          跳过
        </button>
      </div>
    </Transition>

    <ul
      v-show="!isShowForeword || hasShownForword"
      ref="ulEl"
      class="entry-list"
      @wheel="onWheel"
    >
      <li
        v-for="idx in 6"
        :key="idx"
        @click="router.push({
          name: 'CommonDrawList',
          query: {
            idx,
          }
        })"
      >
        <img
          class=""
          :src="require(`@/assets/images/entry-${idx}.png`)"
          alt=""
          draggable="false"
        >
      </li>
      <!-- <li
        v-for="(entry, idx) in entryList"
        :key="entry.name"
        @click="router.push({
          name: 'DrawList',
          query: {
            idx,
          }
        })"
      >
        <img
          class=""
          :src="require(`@/assets/images/entry-${idx}.png`)"
          alt=""
          draggable="false"
        >
        <h3>{{ entry.name }}</h3>
      </li> -->
    </ul>
    <button
      class="return"
      @click="router.push({
        name: 'HomeView',
      })"
    />
  </div>
</template>

<script setup>
import { ref, computed, } from "vue"
import { useRoute, useRouter } from "vue-router"
import { hasShownForword } from "@/store/index.js"

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(724, 375)

const route = useRoute()
const router = useRouter()

const isShowForeword = ref(true)
let forewordTimeoutId = null
forewordTimeoutId = setTimeout(() => {
  isShowForeword.value = false
  hasShownForword.value = true
}, 12000)
function onClickSkip() {
  if (isShowForeword.value) {
    clearTimeout(forewordTimeoutId)
    forewordTimeoutId = null
    isShowForeword.value = false
    hasShownForword.value = true
  }
}

const ulEl = ref(null)
function onWheel(e) {
  ulEl.value.scrollLeft -= e.wheelDelta
}
</script>

<style lang="less" scoped>
.entry-list-view{
  height: 100%;
  padding-top: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  padding-bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-image: url(@/assets/images/foreword-bg.jpg);
  >.foreword{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-image: url(@/assets/images/foreword-bg-new.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    >article{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-top: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      padding-right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      padding-bottom: calc(97 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      padding-left: calc(38 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      overflow: auto;
      &::-webkit-scrollbar { height: 0; };
      >p{
        margin-bottom: 1em;
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Serif CN-Bold, Source Han Serif CN;
        font-weight: bold;
        color: #484238;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
    >button{
      position: absolute;
      right: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      width: calc(95 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-size: 16px;
      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 19px;
      background-color: rgba(239, 196, 27, 1);
      border-radius: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      border: solid calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #fff;
      box-shadow: 0 calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) rgba(0, 0, 0, 0.3);
    }
  }
  >ul.entry-list{
    height: 100%;
    width: 100%;
    padding-left: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    display: flex;
    align-items: center;
    overflow: auto;
    &::-webkit-scrollbar { height: 0; };
    >li{
      flex: 0 0 auto;
      height: 100%;
      margin-right: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      // background-image: url(@/assets/images/sdf);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      >h3{
        display: inline-block;
        text-align: center;
      }
    }
  }
  >button.return{
    position: absolute;
    bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background-image: url(@/assets/images/icon_back@2x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
}
</style>