<script setup lang="ts">
import { wordTableService } from '@/api/service/word-table'
import { familiarity_master } from '@/page/subject/learnWord/word-table'
import { isWebEvn } from '@/utils'
import obj from '@/utils/obj'
import { useRoute } from 'vue-router'
import { useWordPrint } from './hooks/word-print'
import { useUserWordBook, word_book_mode_print } from './hooks/main'
import { userStore } from '@/stores'
import { nav_stage } from '@/components/word-book-selector'

defineOptions({ name: 'UserWordBook' })

// 请求参数
const route = useRoute()
let { userId, userName, mode } = route.query
if (!userId) {
  const { userInfo } = storeToRefs(userStore())
  userId = userInfo.value.userId
}
// 格子
const gridRef = ref()

const wordBookRef = ref()

// 主要工作
const { time, timeOptions, grasp, graspOptions, getTimeParams } = useUserWordBook()

// 是否要打印
const isPrint = `${mode}` === word_book_mode_print && isWebEvn

// 打印相关的功能
const {
  printBtnText,
  clearAll,
  selectAll,
  wordClick,
  showWordPrint,
  selectedWords,
  wordPrintData,
  print,
} = isPrint ? useWordPrint() : ({} as any)

// 当前这一页的数据
let curPageData = [] as any

// 加载数据
const loadData = async (pager: any) => {
  let res: any
  const graspVal = grasp.value
  let startTime: any
  let endTime: any
  if (graspVal === familiarity_master) {
    const params = getTimeParams()
    startTime = params.startTime
    endTime = params.endTime
  }
  if (wordBookRef.value.nav === nav_stage) {
    res = await wordTableService.findStage({
      current: pager.current,
      size: pager.size,
      vocabularyId: wordBookRef.value.stage,
      grasp: graspVal,
      userId,
      startTime,
      endTime,
    })
  } else {
    res = await wordTableService.findBook({
      current: pager.current,
      size: pager.size,
      textbookId: wordBookRef.value.book.bookId,
      grasp: graspVal,
      userId,
      startTime,
      endTime,
    })
  }
  for (const item of graspOptions.value) {
    item.label = item.originLabel + '(' + res[item.key] + ')'
  }
  curPageData = res.rows
  return {
    total: res.totalRows,
    rows: res.rows,
    current: res.current,
  }
}

// 获得item的cls
const getItemClass = (item: any) => {
  return `lv-${item.grasp}`
}

watch(
  [
    () => wordBookRef.value?.stage,
    () => wordBookRef.value?.book?.bookId,
    () => grasp.value,
    () => time?.value,
  ],
  () => {
    if (!gridRef.value) {
      return
    }
    gridRef.value.reload()
  },
)
</script>

<template>
  <div class="user-word-book">
    <div class="top">
      <div class="left">
        <BackBar :leftText="userName || ''" />
        <word-book-selector ref="wordBookRef" />
      </div>

      <div class="right">
        <mj-button v-if="isPrint" class="toolbar-btn" thin-font type="success" @click="print">{{
          printBtnText
        }}</mj-button>
      </div>
    </div>
    <div class="container">
      <div class="toolbar">
        <div class="left">
          <select-tab v-model="grasp" :data-list="graspOptions" type="small" />
          <Select
            v-if="grasp === familiarity_master"
            v-model="time"
            width="200"
            :select-list="timeOptions"
          />
        </div>
        <div class="right">
          <mj-button v-if="isPrint" class="toolbar-btn" thin-font type="danger" @click="clearAll"
            >清除所有选中</mj-button
          >
          <mj-button
            v-if="isPrint"
            class="toolbar-btn"
            thin-font
            type="warn"
            @click="selectAll(curPageData)"
            >本页全选</mj-button
          >
        </div>
      </div>
      <mj-grid ref="gridRef" :load-data="loadData">
        <template #default="{ data }">
          <div
            class="item"
            :class="
              getItemClass(data) + (isPrint && selectedWords[data.meaningId] ? ' checked' : '')
            "
            @click="isPrint && wordClick(data)"
          >
            <div class="spell">
              <span class="text">{{ data.spell }}</span>
            </div>
            <abbr-img class="abbr" :abbr="data.typeAbbr" />
            <div class="cn">
              {{ data.simpleDesc }}
            </div>
            <div
              v-if="obj.isEqualIgnoreNumberString(data.grasp, familiarity_master)"
              class="review-count"
            >
              <span class="review-success">{{ data.reviewSuccessful }}</span>
              <span class="review-failure">{{ data.reviewFailed }}</span>
            </div>
          </div>
        </template>
      </mj-grid>
    </div>
    <word-print
      v-if="isPrint"
      v-model="showWordPrint"
      :words="wordPrintData"
      :title="userName"
      @success="clearAll"
    />
  </div>
</template>

<style lang="scss" scoped>
.user-word-book {
  @include main_bg;
  $color: #4b4b68;

  width: 100%;
  height: 100%;
  padding: $space-4_h $space-6 0;
  position: relative;

  .top {
    display: flex;
    align-items: center;
    gap: 6vh;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      gap: 6vh;
    }

    .right {
      display: flex;
      align-items: center;
      gap: 6vh;
    }
  }
  .toolbar-btn {
    height: 5vh;
  }

  .container {
    padding-top: 2.08vh;
    height: 88.33vh;

    :deep(.mj-grid) {
      height: 78vh;
      .content {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      .items {
        grid-template-columns: repeat(6, 1fr); /* 三列等宽 */
        // grid-template-rows: repeat(6, 9.4vh); /* 两行等高 */
        column-gap: 20px;
        row-gap: 2vh;
      }
    }

    .toolbar {
      height: 8.5vh;
      border-top-left-radius: 3.33vh;
      border-top-right-radius: 3.33vh;
      background: linear-gradient(269deg, #83fff3 0%, #77e3ff 100%);
      padding: 0 $space-4 0.42vh;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;
        gap: 2vh;
      }

      .right {
        display: flex;
        align-items: center;
        gap: 2vh;
      }
    }

    .item {
      height: 11.7vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 0.33vh solid black;
      border-radius: 1vh;
      gap: 1vh;
      color: $color;
      position: relative;
      overflow: hidden;
      // .heart-bg {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   transform-origin: top left;
      //   transform: scale(0.5);
      // }

      .review-count {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        text-align: center;
        font-size: 1.5vh;
        .review-success {
          width: 60px;
          color: #fff;
          background-color: rgba(105, 191, 59, 0.88);
          border-bottom-right-radius: 20px;
        }
        .review-failure {
          width: 60px;
          color: #fff;
          background-color: rgba(187, 47, 38, 0.88);
          border-bottom-left-radius: 20px;
        }
      }

      &.checked {
        border-color: #4b4b68 !important;
      }
      .checked-flag {
        position: absolute;
        top: 0;
        right: 0;
      }

      &.lv-4 {
        border-color: #42c20b;
        background-color: #c9fcab;
      }

      &.lv-3 {
        border-color: #18bacc;
        background-color: #abfcf8;
      }

      &.lv-2 {
        border-color: #cccc18;
        background-color: #fcfcab;
      }

      &.lv-1 {
        border-color: #cc1818;
        background-color: #fcc0c0;
      }

      &.lv-0 {
        border-color: #a3a3a3;
        background-color: #e6e6e6;
      }

      .spell {
        display: flex;
        align-items: center;
        font-size: 1.8vh;
      }

      .abbr {
        :deep(.img-Speech) {
          width: auto;
          height: 2vh;
        }
      }

      .cn {
        text-align: center;
        font-size: 1.5vh;
      }
    }
  }
}
</style>
