<template>
  <div class="entry-list-view">
    <ul
      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="like"
      :class="{
        liked: hasLiked,
      }"
      @click="onClickLike"
    >
      <img
        v-show="!hasLiked"
        class=""
        src="@/assets/images/like.png"
        alt=""
        draggable="false"
      >
      <img
        v-show="hasLiked"
        class=""
        src="@/assets/images/liked.png"
        alt=""
        draggable="false"
      >
      <span class="txt">{{ likeCount }}</span>
    </button>
    <button
      class="return"
      @click="router.replace({
        name: 'HomeView',
      })"
    />
  </div>
</template>

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


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

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

const hasLiked = computed(() => {
  return likeRecord.value[route.query.idx - 1]
})

const likeCount = ref()
function onClickLike(e) {
  if (hasLiked.value) {
    return
  }
  likeRecord.value[route.query.idx - 1] = true
  api.like(route.query.idx)
  likeCount.value++ // 从接口拿到的数据不会立刻变化
  setTimeout(() => {
    utils.animateCSS(e.target, 'heartBeat')
  }, 100)
}


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

onMounted(() => {
  getLikeCount()
})

const getLikeCount = () => {
  // 总点赞量
  likeCount.value = 0
  api.getAllLikeCount().then((res) => {
    likeCount.value += res
  })
}


</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);

  >ul.entry-list {
    // height: 100%;
    height: 95%;
    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;
      }

      >img {
        // height: 100%;
        height: 100%;
      }
    }
  }

  >button.like {
    position: absolute;
    bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    right: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background: #FFD73C;
    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0, 0, 0, 0.25);
    border-radius: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    opacity: 1;
    border: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFFFFF;
    width: calc(88 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    padding-left: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    padding-right: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0, 0, 0, 0.25);

    >img {
      width: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }

    >.txt {
      font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #FFFFFF;
      line-height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
  }


  >button.like.liked {
    background: #fbf0d8;

    >.txt {
      color: rgba(215, 173, 13, 1);
    }
  }


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