<template>
  <div class="relic-detail">
    <button
      class="return"
      @click="router.go(-1)"
    />
    <div
      class="swiper-root"
    >
      <div class="swiper-button-prev" />
      <div class="swiper-button-next" />
      <div class="swiper-wrapper">
        <img
          v-for="(item, index) in relicInfo?.imgs"
          :key="index"
          class="swiper-slide"
          :src="'https://houseoss.4dkankan.com/project/yzdyh-h5/monument/' + item"
          alt=""
          draggable="false"
        >
      </div>
    </div>
    <div class="desc">
      <div class="article">
        <h1 :title="relicInfo?.title">
          {{ relicInfo?.title }}
        </h1>
        <h2 class="sub-title">
          {{ relicInfo?.subtitle }}
        </h2>
        <div
          class="main-body"
          v-html="relicInfo?.content"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router"
import { computed, ref, onMounted, watch } from "vue"
import { useStore } from "vuex"
import Swiper from 'swiper/bundle'
import 'swiper/css/bundle'
import { watchArray } from "@vueuse/core"

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

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

setTimeout(() => {
  console.log(relicInfo.value)
}, 1000)

function initSwiper() {
  new Swiper('.swiper-root', {
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // on: {
    //   afterInit: function (e) {
    //     activeSwiperItemIndex.value = e.activeIndex
    //   },
    //   slideChange: function(e) {
    //     activeSwiperItemIndex.value = e.activeIndex
    //   }
    // }
  })
}

onMounted(() => {
  initSwiper()
})
</script>

<style lang="less" scoped>
.relic-detail{
  height: 100%;
  position: relative;
  background-image: url(@/assets/images/relic-list-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 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;
    z-index: 2;
  }
  >.swiper-root{
    width: 100%;
    height: 63.8%;
    background: rgba(250, 246, 240, 1);
    overflow: hidden;
    position: relative;
    >.swiper-button-prev{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 3.9%;
      width: 54px;
      height: 54px;
      background-image: url(@/assets/images/arrow-left.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      &::after{
        display: none;
      }
    }
    >.swiper-button-next{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 3.9%;
      width: 54px;
      height: 54px;
      background-image: url(@/assets/images/arrow-right.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      &::after{
        display: none;
      }
    }
    >.swiper-wrapper{
      width: 100%;
      height: 100%;
      >.swiper-slide {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
  >.desc{
    height: 36.2%;
    padding-bottom: 8vh;
    position: relative;
    >.article{
      margin-left: auto;
      margin-right: auto;
      height: 100%;
      width: 1134px;
      max-width: calc(100% - 210px);
      >h1{
        margin-top: 38px;
        font-size: 32px;
        font-family: Source Han Serif CN-Bold, Source Han Serif CN;
        font-weight: bold;
        color: #404036;
        text-align: center;
        margin-bottom: 20px;
        overflow: hidden;
        white-space: pre;
        text-overflow: ellipsis;
      }
      >h2{
        font-size: 20px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #404036;
        margin-bottom: 35px;
        text-align: center;
      }
      >.main-body{
        height: calc(100% - 130px);
        overflow: auto;
        &:deep(*) {
          font-size: 22px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #404036;
          line-height: 26px;
        }
      }
    }
  }
}
</style>