<template>
  <div class="entry-list-view">
    <ul class="entry-list">
      <li
        v-for="(entry, idx) in entryList"
        :key="entry.name"
        @click="router.push({
          name: 'DrawList',
          query: {
            idx,
          }
        })"
      >
        <h3>{{ entry.name }}</h3>
      </li>
    </ul>
    <div class="bottom-wrap">
      <h2>良渚童画</h2>
      <button
        class="return"
        @click="router.go(-1)"
      >
        返回
      </button>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router"

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

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

const entryInfo = config.entryList[route.params.idx]

</script>

<style lang="less" scoped>
.entry-list-view{
  height: 100%;
  padding: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  >ul.entry-list{
    height: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: 100%;
    background-color: blue;
    display: flex;
    align-items: center;
    overflow: auto;
    &::-webkit-scrollbar { height: 0; };
    padding-left: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    >li{
      flex: 0 0 auto;
      background-color: red;
      height: 100%;
      width: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      // background-image: url(@/assets/images/sdf);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      border-radius: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      display: inline-flex;
      justify-content: center;
      align-items: center;
      >h3{
        display: inline-block;
        text-align: center;
      }
    }
  }
  >.bottom-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    >h2{

    }
    >button.return{

    }
  }
}
</style>