<script setup lang="ts">
import { useRouter } from 'vue-router'

const props = withDefaults(
  defineProps<{
    bookData: anyObj
    isSeries?: boolean
  }>(),
  {
    isSeries: false,
    bookData: () => ({}),
  },
)
const emits = defineEmits(['change'])

const router = useRouter()

function goToBooksIntro(bookId: string) {
  if (props.isSeries) {
    emits('change')
  } else {
    router.push('/subject/happyRead/classicRead/singleBookIntroduction')
  }
}
</script>
<template>
  <div class="shelf_book_cover" @click="goToBooksIntro(bookData.id)">
    <div v-if="bookData.lexile" class="lexile">系列书</div>
    <div class="cover_pic">
      <img :src="bookData.pictureUrl" />
      <div v-if="bookData.alreadyReadPercent > 0" class="reading_progress_bar">
        <div
          :class="[
            'reading_progress',
            {
              complete: bookData.alreadyReadPercent >= 100,
            },
          ]"
          :style="{
            width: `${bookData.alreadyReadPercent}%`,
          }"
        >
          <span class="value_progress">{{ bookData.alreadyReadPercent }}%</span>
        </div>
      </div>
    </div>
    <div class="book_title">
      <span>{{ bookData.enName }}</span>
      <span>{{ bookData.znName }}</span>
    </div>
  </div>
</template>
<style scoped lang="scss">
//
.shelf_book_cover {
  position: relative;
  margin-right: 24px;
  width: 268px;
  height: 29.17vh;
  border: 0.33vh solid #90fcf7;
  border-radius: 2.5vh;
  box-sizing: border-box;
  background-color: #f2fffe;
  cursor: pointer;
  overflow: hidden;
  &:nth-child(n + 7) {
    margin-top: 3.33vh;
  }
  &:nth-child(6n) {
    margin-right: 0;
  }
  box-shadow: 0 0.33vh 0.5vh #00000030;

  .lexile {
    position: absolute;
    top: -0.33vh;
    left: -4px;
    z-index: 9;
    font-size: 1.25vh;
    width: 102px;
    height: 3.83vh;
    text-align: center;
    line-height: 3.83vh;
    border-bottom-right-radius: 32px;
    background-color: #90fcf7;
  }

  .cover_pic {
    width: 100%;
    height: 23.33vh;
    border-bottom: 0.33vh solid #90fcf7;
    position: relative;

    img {
      width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: 2.5vh 2.5vh 0 0;
    }

    .reading_progress_bar {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1.5vh;
      border-top: 0.33vh solid #90fcf7;
      background: rgba(0, 0, 0, 0.45);
      box-sizing: content-box;

      .reading_progress {
        position: relative;
        width: 25%;
        height: 100%;
        border-radius: 0 1.17vh 1.17vh 0;
        background: repeating-linear-gradient(135deg, #fff, #fff 3px, #fff01f 3px, #fff01f 20px);

        .value_progress {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 1.5vh;
          padding-right: 3px;
          text-align: right;
          color: #6a3906;
          font-family: $font-text;
          font-size: 1.5vh;
          line-height: 1.5vh;
        }

        &.complete {
          background: repeating-linear-gradient(135deg, #fff, #fff 3px, #c1f052 3px, #c1f052 20px);
        }
      }
    }
  }

  .book_title {
    padding: 0.67vh 16px;
    font-family: $font-special;
    color: $font-color;
    font-size: 1.67vh;
    text-align: center;

    span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
