<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    book: any
    remove?: boolean
    progress?: boolean
  }>(),
  {
    remove: false,
    progress: false,
  },
)

const emit = defineEmits(['remove'])

defineOptions({ name: 'Book' })

const tagBg = props.book.clean.color.color
</script>

<template>
  <div :key="book.id" class="book">
    <div
      class="book-cover"
      :style="{
        background: book.version.clean.color.bgColor,
      }"
    >
      <LineFont
        :text="book.clean.name"
        :size="book.clean.name.length > 10 ? 28 : 30"
        :border="book.clean.name.length > 10 ? 6 : 8"
      />
      <Icon v-if="remove" class="close" name="close_dia" size="32" @click.stop="emit('remove')" />
      <div
        v-if="progress"
        class="book-progress"
        :style="{
          background: book.version.clean.color.color,
        }"
      >
        {{ (book.progress / 100).toFixed(0) }}%
      </div>

      <div class="tags">
        <span v-for="tag in book.version.clean.tags" :key="tag" class="tag">{{ tag }}</span>
      </div>
    </div>
    <div class="book-desc book-version-name">
      <span>{{ book.version.clean.name }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.book {
  width: 180px;
  height: 25vh;
  position: relative;
  z-index: 1;
  margin: 0 $space-6 $space-6 0;
  cursor: pointer;
  &-cover {
    width: 100%;
    height: 20vh;
    background: #ffacf0;
    border-radius: $radius-5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px 0 24px;
    text-align: center;
    box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.25);
    position: relative;

    .x-line-font {
      letter-spacing: 10px;
      margin-top: -0.83vh;
    }

    .close {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  &-desc {
    height: 6vh;
    color: #fff;
    text-align: center;
    line-height: 1.2em;
    // margin-top: 8px;
    font-size: 2.67vh;
    display: flex;
    align-items: center;
    justify-content: center;
    // @include multiple_ellipsis(2);
  }

  &-version-name {
    white-space: pre-wrap;
  }
  &-progress {
    min-width: 78px;
    max-width: 120px;
    height: 3.67vh;
    line-height: 3.67vh;
    color: #fff;
    font-family: $font-special;
    font-size: 1.67vh;
    background: #fc5ec9;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1.67vh 0 1.67vh 0;
  }
  .tags {
    width: 170px;
    position: absolute;
    left: 5px;
    bottom: 0.83vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;

    .tag {
      background-color: v-bind(tagBg);
      // color: #fff;
      color: $book-tag-color;
      font-size: 1.5vh;
      line-height: 2vh;
      padding: 0.25vh 10px;
      border-radius: 1.5vh;
      text-align: center;
    }
  }
}
</style>
