<script setup lang="ts">
import { px2px, px2px_h, px2vh, px2vw } from '@/utils'
import hud from '@/utils/hud'
import { book_sync_locked } from '@/api/subject/subject'
import type { TextBook } from '@/api/subject/subject'
import { Lock } from '@element-plus/icons-vue'
import { $font_color } from '@/styles/variate'

const props = withDefaults(
  defineProps<{
    books: TextBook[]
    add?: boolean
    remove?: boolean
    progress?: boolean
    width: number
    title?: string
    onRemove?: (book: any) => Promise<any>
  }>(),
  {
    add: false,
    remove: false,
    progress: false,
    title: '教材',
  },
)
const emit = defineEmits(['add', 'select'])
defineOptions({ name: 'BookShelf' })
const OSS_URL = import.meta.env.VITE_OSS_URL

const { add, remove, width } = props

// 整体的宽度
const paddingW = 45
// 故意增加多1像素，就怕宽度不够，导致书本放不下一行，就错乱了
const shelfWidth = width
const shelfWidthPx = px2vw(shelfWidth)
const paddingWPx = px2vw(paddingW)

// 间距
const shelfPaddingW = 60
const shelfPaddingWPx = px2vw(shelfPaddingW)
let bookMarginW = 48
// 书本的宽度
const bookWidth = 180
const bookWidthPx = px2vh(bookWidth)
const tagsWidthPx = px2vh(bookWidth - 10)
// 木板的宽度
const boardWidth = shelfWidth - 2 * paddingW
const boardWidthPx = px2vw(boardWidth)
// 阴影的宽度
const shadowWidthPx = px2vw(boardWidth - 106)
const contentWidth = boardWidth - shelfPaddingW * 2

// （真实屏幕下的尺寸）
const bookMarginW_c = px2px(bookMarginW)
const bookWidth_c = px2px_h(bookWidth)
const contentWidth_c = px2px(contentWidth)

// 计算列数
let columns = 2
while (columns * bookWidth_c + (columns - 1) * bookMarginW_c < contentWidth_c) {
  columns++
}
columns -= 1

// 计算最终的书本间距
bookMarginW = (contentWidth_c - columns * bookWidth_c) / (columns - 1)
// 转换为1920宽度下的尺寸
bookMarginW = (bookMarginW * 1920) / window.innerWidth - 1
const bookMarginWPx = px2vw(bookMarginW)

function isLineFirst(i: number) {
  if (add) {
    i += 1
  }
  return i % columns === 0
}

// function isLineEnd(i: number) {
//   if (add) {
//     i += 1
//   }
//   return (i + 1) % columns === 0
// }

function removeBook(book: any) {
  if (!props.onRemove) return
  hud.confirmLoad({
    dialog: `确定${hud.highlight('删除')}《${hud.highlight(book.clean.fullName, 'green')}》？`,
    task: async () => await props.onRemove!(book),
    option: '删除',
  })
}
</script>

<template>
  <board-bg class="book-shelf">
    <div class="title">
      <LineFont :text="title" :border-color="$font_color" size="48" space="20" />
    </div>
    <el-scrollbar>
      <div class="book-list">
        <div v-if="add" class="book add line-first" @click="emit('add')">
          <div class="book-cover">
            <div class="book-cover-add">
              <Icon name="add_book" size="70" />
              <div class="book-cover-text">添加书本</div>
            </div>
          </div>
        </div>
        <div
          v-for="(book, i) in books"
          :key="book.id"
          class="book"
          :class="{
            'line-first': isLineFirst(i),
          }"
          @click="emit('select', 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 && book.syncFlag !== book_sync_locked"
              class="close"
              name="close_dia"
              size="32"
              @click.stop="removeBook(book)"
            />
            <div
              v-if="book.syncFlag === book_sync_locked"
              class="book-sync-locked"
              :style="{
                background: book.version.clean.color.color,
              }"
            >
              <el-icon size="2vh"><Lock /></el-icon>
            </div>
            <div
              v-if="progress"
              class="book-progress"
              :style="{
                background: book.version.clean.color.color,
              }"
            >
              {{ Math.trunc(Number((book.progress / 100).toFixed(2))) }}%
            </div>

            <div class="tags">
              <span
                v-for="tag in book.clean.all_tags"
                :key="tag"
                :style="`background-color: ${book.clean.color.color}`"
                class="tag"
                >{{ tag }}</span
              >
            </div>
          </div>
          <div class="book-desc book-version-name">
            <span>{{ book.version.clean.name }}</span>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </board-bg>
</template>

<style lang="scss" scoped>
$shelf_h: 26.67vh;
$shelf_b: 1vh;
$shadow_b: -0.5vh;

.book-shelf {
  width: v-bind(shelfWidthPx);
  padding: 4.17vh v-bind(paddingWPx) 3.33vh;

  .el-scrollbar {
    width: 100%;
    height: 16.67vh;
    flex: 1;
  }

  .title {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 1.67vh;
  }

  .book-list {
    width: 100%;
    display: flex;
    margin-top: 0.83vh;
    flex-wrap: wrap;
    padding: 1.67vh v-bind(shelfPaddingWPx) 0;
    position: relative;
    gap: 3.33vh v-bind(bookMarginWPx);

    // 每行的第一个
    .line-first {
      &::after {
        content: '';
        display: block;
        width: v-bind(boardWidthPx);
        height: 6.67vh;
        background: $book-shelf-color;
        border-radius: 2.5vh;
        position: absolute;
        left: -60px;
        bottom: $shelf_b;
        z-index: -1;
        box-shadow: 0 0.67vh 0.08vh #4971d1;
      }
      &::before {
        content: '';
        position: absolute;
        border-radius: 2.5vh;
        bottom: $shadow_b;
        left: -19px;
        width: v-bind(shadowWidthPx);
        height: 2.17vh;
        flex-shrink: 0;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: -2;
      }
    }

    // 每行的最后一个
    // .line-end {
    //   margin-right: 0 !important;
    // }

    .book {
      width: v-bind(bookWidthPx);
      height: $shelf_h;
      position: relative;
      z-index: 1;
      // margin: 0 v-bind(bookMarginWPx) 3.33vh 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;
          font-family: $font-text;
        }

        .close {
          position: absolute;
          top: -0.83vh;
          right: -0.83vh;
        }
      }
      &-desc {
        // 版本名
        height: 6vh;
        color: #fff;
        text-align: center;
        line-height: 1.2em;
        font-size: 2.33vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &-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-text;
        font-size: 1.67vh;
        background: #fc5ec9;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 1.67vh 0 1.67vh 0;
      }
      .book-sync-locked {
        min-width: 4.17vh;
        max-width: 10vh;
        height: 3.67vh;
        line-height: 3.67vh;
        color: #fff;
        font-family: $font-text;
        font-size: 1.67vh;
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 0 1.67vh 0 1.67vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tags {
        width: v-bind(tagsWidthPx);
        position: absolute;
        left: 0.42vh;
        bottom: 0.67vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.42vh;

        .tag {
          color: $book-tag-color;
          font-size: 1.5vh;
          line-height: 2vh;
          padding: 0.25vh 10px;
          border-radius: 1.5vh;
          text-align: center;
          font-weight: bold;
        }
      }
    }

    .add {
      .book-cover {
        background: #d5f2ff;
        border: 0.33vh dashed #80b5fe;
        padding: 0;

        &-add {
          font-family: $font-text;
          font-size: $font-size-3;
          line-height: 1.5em;
          text-align: center;
          color: #80b5fe;
        }
        &-text {
          margin-top: $space-2_h;
        }
      }
    }
  }
}
</style>
