<template>
  <div class="relic-list">
    <button
      class="return"
      @click="router.push({
        name: 'UnitList',
        query: {
          themeIdx: route.query.themeIdx,
        }
      })"
    />
    <div
      ref="tabbarEl"
      class="tabbar"
      @wheel="onTabbarWheel"
    >
      <button
        v-for="(item, idx) in store.state.data?.list"
        :key="item.id"
        :class="{
          active: idx === Number(route.query.unitIdx)
        }"
        @click="onClickTabItem(idx)"
      >
        {{ item.label }}
      </button>
    </div>
    <ul
      ref="relicListEl"
      class="relic-ul"
      @wheel="onRelicListWheel"
    >
      <li
        v-for="(item, idx) in unitInfo?.list"
        :key="`${route.query.unitIdx}-${idx}`"
        @click="router.push({
          name:'RelicDetail',
          query: {
            themeIdx: route.query.themeIdx,
            unitIdx: route.query.unitIdx,
            relicIdx: idx,
          }
        })"
      >
        <img
          class="cover"
          :src="'https://houseoss.4dkankan.com/project/yzdyh-h5/monument/' + item.imgs[0]"
          alt=""
          draggable="false"
        >
        <div class="not-img">
          <h3 :title="item.title">
            {{ item.title }}
          </h3>
          <div
            class="desc"
            :title="item.subtitle"
          >
            {{ item.subtitle }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router"
import { ref, computed } from "vue"
import { useStore } from "vuex"

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

const tabbarEl = ref(null)
function onTabbarWheel(e) {
  tabbarEl.value.scrollLeft -= e.wheelDelta
}

const unitInfo = computed(() => {
  return store.state.data?.list[route.query.unitIdx]
})

const relicListEl = ref(null)
function onRelicListWheel(e) {
  relicListEl.value.scrollLeft -= e.wheelDelta
}

function onClickTabItem(idx) {
  router.push({
    name: route.name,
    query: {
      themeIdx: route.query.themeIdx,
      unitIdx: idx,
    }
  })
}
</script>

<style lang="less" scoped>
.relic-list{
  height: 100%;
  position: relative;
  background-image: url(@/assets/images/relic-list-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  >button.return{
    position: absolute;
    top: 47px;
    left: 60px;
    width: 64px;
    height: 64px;
    background-image: url(@/assets/images/btn-return.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  >.tabbar{
    flex: 0 0 auto;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 50px;
    overflow: auto;
    &::-webkit-scrollbar { height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
    >button{
      flex: 0 0 auto;
      width: 180px;
      height: 70px;
      background-image: url(@/assets/images/tab-item-normal.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      font-size: 24px;
      font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
      font-weight: 400;
      color: #7F0007;
      line-height: 28px;
    }
    >button.active{
      background-image: url(@/assets/images/tab-item-active.png);
      color: #fff;
    }
  }
  >ul.relic-ul{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 70px;
    overflow: auto;
    padding-bottom: 40px;
    padding-left: 95px;
    padding-right: 95px;
    &::-webkit-scrollbar { height: 8px;}
    &::-webkit-scrollbar-thumb { background: rgba(186, 172, 153, 1); border-radius: 4px; }
    >li{
      flex: 0 0 auto;
      width: 473px;
      height: 63.17vh;
      cursor: pointer;
      &:hover{
        box-shadow: 6px 6px 10px 0px rgba(65,42,18,0.75);
      }
      >img{
        width: 100%;
        height: calc(100% - 141px);
        object-fit: cover;
      }
      >.not-img{
        height: 141px;
        overflow: hidden;
        padding-left: 10px;
        padding-right: 10px;
        >h3{
          font-size: 32px;
          font-family: Source Han Serif CN-Bold, Source Han Serif CN;
          font-weight: bold;
          color: #404036;
          overflow: hidden;
          white-space: pre;
          text-overflow: ellipsis;
          margin-top: 28px;
          margin-bottom: 20px;
        }
        >.desc{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          font-size: 20px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #404036;
          line-height: 28px;
        }
      }
    }
  }
}
</style>