<template>
  <view class="home-page">
    <!-- 顶部背景区域 -->
    <view class="home-bg" :style="{ paddingTop: notchHeight + 'px' }">
      <wd-search
        hide-cancel
        light
        clearable
        class="search-bar"
        :placeholder="$t('bookHome.searchPlaceholder')"
        @search="handleSearch"
      />
      <view class="icon-hua">
        <image
          src="../../static/home_icon.png"
          mode="aspectFit"
          class="icon-hua-img"
        />
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-wrapper">
      <!-- 我的书单 & 推荐图书模块 -->
      <view class="mine-block">
        <!-- 我的书单 -->
        <view class="mine-1">
          <text class="mine-title">{{ $t('bookHome.block1') }}</text>
          <view
            v-if="myBooksList.length > 0"
            class="mine-more"
            @click="handleMoreClick"
          >
            {{ $t('bookHome.more') }}
            <image src="@/static/icon/icon_right.png" />
          </view>
          <view v-if="myBooksList.length > 0" class="mine-1-list">
            <view
              v-for="(item, index) in myBooksList"
              :key="index"
              class="mine-item"
              @click="handleMyBookClick(item.id)"
            >
              <image :src="item.images" />
              <text>{{ item.name }}</text>
            </view>
          </view>
          <text v-else class="zanwu">{{ $t('common.data_null') }}</text>
        </view>

        <!-- 推荐图书 -->
        <view class="mine-2">
          <text class="mine-title">{{ $t('bookHome.block2') }}</text>
          <swiper
            v-if="recommendBooksList.length > 0"
            autoplay
            :interval="3000"
            :duration="500"
            class="recommend-list"
          >
            <swiper-item
              v-for="(item, index) in recommendBooksList"
              :key="index"
              class="recommend-item"
              @click="handleBookClick(item.id)"
            >
              <image :src="item.images" width="100%" height="100%" />
              <text>{{ item.name }}</text>
            </swiper-item>
          </swiper>
        </view>
      </view>

      <!-- 活动图书模块 -->
      <view v-if="showActivity" class="activity-block">
        <text class="activity-title">{{ $t('bookHome.activityTitle') }}</text>
        <scroll-view class="scroll-view" scroll-x :show-scrollbar="false">
          <view class="activity-label-list">
            <view
              v-for="(item, index) in activityLabelList"
              :key="index"
              :class="[
                'activity-label-item',
                currentActivityIndex === index ? 'active-label' : ''
              ]"
              @click="handleActivityLabelClick(item.id, index)"
            >
              <text>{{ item.title }}</text>
            </view>
          </view>
        </scroll-view>
        <scroll-view
          v-if="activityList.length > 0"
          class="scroll-view"
          scroll-x
          :show-scrollbar="false"
        >
          <view class="activity-list">
            <view
              v-for="(item, index) in activityList"
              :key="index"
              class="activity-item"
              @click="handleBookClick(item.bookId)"
            >
              <image :src="item.images" />
              <text class="activity-text">{{ item.name }}</text>
            </view>
          </view>
        </scroll-view>
        <text v-else class="zanwu" style="padding: 80rpx 0">{{ $t('global.dataNull') }}</text>
      </view>

      <!-- 分类图书模块 -->
      <view v-if="showCategory" class="book-block">
        <!-- 一级分类标签 -->
        <scroll-view class="scroll-view" scroll-x :show-scrollbar="false">
          <view class="book-tab-one">
            <view
              v-for="(item, index) in categoryLevel1List"
              :key="index"
              :class="[
                'tab-one-item',
                currentLevel1Index === index ? 'tab-one-active' : ''
              ]"
              @click="handleCategoryLevel1Click(item.id, index)"
            >
              <text>{{ item.title }}</text>
            </view>
          </view>
        </scroll-view>

        <!-- 二级分类标签 -->
        <scroll-view
          v-if="categoryLevel2List.length > 0"
          class="scroll-view"
          scroll-x
          :show-scrollbar="false"
          style="background: #fff; margin-top: 15rpx"
        >
          <view class="book-tab-two">
            <view
              v-for="(item, index) in categoryLevel2List"
              :key="index"
              :class="[
                'tab-two-item',
                currentLevel2Index === index ? 'tab-two-active' : ''
              ]"
              @click="handleCategoryLevel2Click(item.id, index)"
            >
              <text>{{ item.title }}</text>
            </view>
          </view>
        </scroll-view>

        <!-- 分类图书列表 -->
        <view v-if="categoryBookList.length > 0" class="book-list">
          <view
            v-for="(item, index) in categoryBookList"
            :key="index"
            class="book-item"
            @click="handleBookClick(item.bookId)"
          >
            <image :src="item.images" />
            <text class="book-text">{{ item.name }}</text>
            <text v-if="formatPrice(item)" class="book-price">{{
              formatPrice(item)
            }}</text>
            <text v-if="formatStats(item)" class="book-flag">{{
              formatStats(item)
            }}</text>
          </view>
        </view>
        <text v-else class="zanwu" style="padding: 100rpx 0">{{ $t('global.dataNull') }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import { homeApi } from '@/api/modules/book_home'
import type {
  IBook,
  IBookWithStats,
  ILabel,
  IVipInfo
} from '@/types/book'

const { t } = useI18n()

// 状态定义
const notchHeight = ref(0)
const showMyBooks = ref(false)
const showActivity = ref(false)
const showCategory = ref(false)

// 我的书单
const myBooksList = ref<IBook[]>([])

// 推荐图书
const recommendBooksList = ref<IBook[]>([])

// 活动图书
const activityLabelList = ref<ILabel[]>([])
const activityList = ref<IBookWithStats[]>([])
const currentActivityIndex = ref(0)

// 分类图书
const categoryLevel1List = ref<ILabel[]>([])
const categoryLevel2List = ref<ILabel[]>([])
const categoryBookList = ref<IBookWithStats[]>([])
const currentLevel1Index = ref(0)
const currentLevel2Index = ref(0)

// VIP信息
const vipInfo = ref<IVipInfo | null>(null)

/**
 * 获取VIP信息
 */
const getVipInfo = async () => {
  try {
    const res = await homeApi.getVipInfo()
    if (res.vipInfo) {
      vipInfo.value = res.vipInfo
    }
  } catch (error) {
    console.error('获取VIP信息失败:', error)
  }
}

/**
 * 获取我的书单
 */
const getMyBooks = async () => {
  try {
    const res = await homeApi.getMyBooks(1, 10)
    if (res && res.code === 0) {
      showMyBooks.value = true
      if (res.page.records && res.page.records.length > 0) {
        myBooksList.value = res.page.records
      }
    } else {
      // 未登录，跳转到登录页
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  } catch (error) {
    console.error('获取我的书单失败:', error)
  }
}

/**
 * 获取推荐图书
 */
const getRecommendBooks = async () => {
  try {
    const res = await homeApi.getRecommendBooks()
    if (res.books && res.books.length > 0) {
      recommendBooksList.value = res.books
    }
  } catch (error) {
    console.error('获取推荐图书失败:', error)
  }
}

/**
 * 获取活动标签列表
 */
const getActivityLabels = async () => {
  try {
    const res = await homeApi.getBookLabelList(1)
    showActivity.value = true
    if (res.lableList && res.lableList.length > 0) {
      activityLabelList.value = res.lableList
      // 默认加载第一个标签的图书列表
      await getBooksByLabel(res.lableList[0].id, 'activity')
    }
  } catch (error) {
    console.error('获取活动标签失败:', error)
  }
}

/**
 * 获取分类标签列表
 */
const getCategoryLabels = async () => {
  try {
    const res = await homeApi.getBookLabelList(0)
    showCategory.value = true
    if (res.lableList && res.lableList.length > 0) {
      categoryLevel1List.value = res.lableList
      // 默认加载第一个标签的二级标签
      await getSubLabels(res.lableList[0].id, 0)
    }
  } catch (error) {
    console.error('获取分类标签失败:', error)
  }
}

/**
 * 获取二级标签列表
 */
const getSubLabels = async (pid: number, index: number) => {
  try {
    const res = await homeApi.getSubLabelList(pid)
    currentLevel1Index.value = index
    if (res.lableList && res.lableList.length > 0) {
      categoryLevel2List.value = res.lableList
      currentLevel2Index.value = 0
      // 加载第一个二级标签的图书列表
      await getBooksByLabel(res.lableList[0].id, 'category')
    } else {
      // 没有二级标签，直接加载一级标签的图书列表
      categoryLevel2List.value = []
      await getBooksByLabel(pid, 'category')
    }
  } catch (error) {
    console.error('获取二级标签失败:', error)
  }
}

/**
 * 根据标签获取图书列表
 */
const getBooksByLabel = async (
  labelId: number,
  type: 'activity' | 'category'
) => {
  try {
    const res = await homeApi.getBooksByLabel(labelId)
    if (type === 'activity') {
      if (res.bookList && res.bookList.length > 0) {
        activityList.value = res.bookList
      } else {
        activityList.value = []
      }
    } else {
      if (res.bookList && res.bookList.length > 0) {
        categoryBookList.value = res.bookList
      } else {
        categoryBookList.value = []
      }
    }
  } catch (error) {
    console.error('获取图书列表失败:', error)
  }
}

/**
 * 格式化价格
 */
const formatPrice = (book: IBookWithStats): string => {
  // 已购买不显示价格
  if (book.isBuy) return ''

  // VIP用户且图书为VIP专享
  if (vipInfo.value?.id && book.isVip === '2') {
    const price = book.sysDictData?.dictValue
    return price ? `$ ${price} NZD` : ''
  }

  // 普通用户
  if (!vipInfo.value?.id) {
    const price = book.sysDictData?.dictValue
    return price ? `$ ${price} NZD` : ''
  }

  return ''
}

/**
 * 格式化统计信息
 */
const formatStats = (book: IBookWithStats): string => {
  if (book.readCount && book.readCount > 0) {
    return `${book.readCount}${t('bookHome.readingCount')}`
  }

  if (book.buyCount && book.buyCount > 0) {
    return `${book.buyCount}${t('bookHome.purchased')}`
  }

  return ''
}

/**
 * 处理搜索点击
 */
const handleSearch = ({ value }: { value: string }) => {
  uni.navigateTo({
    url: `/pages/book/search?keyword=${value}`
  })
}

/**
 * 处理我的书单图书点击
 */
const handleMyBookClick = (bookId: number) => {
  uni.navigateTo({
    url: `/pages/book/reader?isBuy=0&bookId=${bookId}`
  })
}

/**
 * 处理图书点击
 */
const handleBookClick = (bookId: number) => {
  uni.navigateTo({
    url: `/pages/book/detail?id=${bookId}`
  })
}

/**
 * 处理更多按钮点击
 */
const handleMoreClick = () => {
  uni.switchTab({
    url: '/pages/book/index'
  })
}

/**
 * 处理活动标签点击
 */
const handleActivityLabelClick = async (labelId: number, index: number) => {
  currentActivityIndex.value = index
  await getBooksByLabel(labelId, 'activity')
}

/**
 * 处理一级分类标签点击
 */
const handleCategoryLevel1Click = async (labelId: number, index: number) => {
  await getSubLabels(labelId, index)
}

/**
 * 处理二级分类标签点击
 */
const handleCategoryLevel2Click = async (labelId: number, index: number) => {
  currentLevel2Index.value = index
  await getBooksByLabel(labelId, 'category')
}

/**
 * 页面加载
 */
onMounted(() => {
  // 获取刘海高度
  const systemInfo = uni.getSystemInfoSync()
  notchHeight.value = systemInfo.safeArea.top

  // 重置活动标签选中状态
  currentActivityIndex.value = 0
  showActivity.value = false
})

/**
 * 页面显示
 */
onShow(() => {
  // 刷新数据
  getVipInfo()
  getMyBooks()
  getRecommendBooks()
  getActivityLabels()
  getCategoryLabels()
})
</script>

<style lang="scss" scoped>
.home-page {
  min-height: 100vh;
  background: #f7faf9;
}

.home-bg {
  background-image: url('@/static/icon/home_bg.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30rpx;
  position: relative;

  .icon-hua {
    width: 100%;
    text-align: center;
    display: block;
    padding-top: 20rpx;

    .icon-hua-img {
      width: 100%;
      height: 160rpx;
    }
  }
}

.search-bar {
  background-color: transparent !important;
}

.content-wrapper {
  padding-bottom: 40rpx;
}

.mine-block {
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .mine-1,
  .mine-2 {
    width: 49%;
    height: 290rpx;
    border-radius: 15rpx;
    padding: 30rpx;
    position: relative;

    .mine-title {
      font-size: 32rpx;
      color: #333;
      line-height: 32rpx;
    }

    .mine-more {
      position: absolute;
      top: 30rpx;
      right: 5rpx;
      font-size: 28rpx;
      line-height: 34rpx;
      color: #999;

      image {
        display: inline-block;
        vertical-align: text-bottom;
        width: 34rpx;
        height: 34rpx;
      }
    }

    .mine-1-list {
      width: 260rpx;
      overflow: hidden;
      display: flex;
      align-items: center;

      .mine-item {
        width: 110rpx;
        text-align: center;
        margin: 20rpx 25rpx 0 0;

        image {
          width: 110rpx;
          height: 135rpx;
          border-radius: 10rpx;
        }

        text {
          display: block;
          width: 120rpx;
          font-size: 28rpx;
          color: #333;
          line-height: 32rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          padding-top: 10rpx;
        }
      }
    }

    .recommend-list {
      width: 310rpx;
      height: 164rpx;
      margin-top: 20rpx;

      .recommend-item {
        display: flex;
        align-items: center;

        image {
          width: 120rpx;
          height: 164rpx;
          border-radius: 10rpx;
        }

        text {
          display: block;
          width: 190rpx;
          font-size: 28rpx;
          color: #333;
          line-height: 40rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          padding-left: 15rpx;
        }
      }
    }
  }

  .mine-1 {
    background-image: linear-gradient(60deg, #fff9e9 20%, #fffbf2 100%);
  }

  .mine-2 {
    background-image: linear-gradient(60deg, #fef0f0 20%, #fdf9f8 100%);
  }
}

.activity-block {
  margin: 0 20rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 15rpx;
  min-height: 445rpx;

  .activity-title {
    display: block;
    font-size: 38rpx;
    color: #333;
    line-height: 40rpx;
    padding: 15rpx 0 20rpx;
  }

  .activity-label-list {
    display: flex;
    align-items: center;
    margin-top: 10rpx;
    padding-left: 10rpx;

    .activity-label-item {
      display: flex;
      align-items: center;
      background-color: #d7ece8;
      border-radius: 10rpx;
      margin-right: 20rpx;
      padding: 0 10rpx;
      flex-shrink: 0;

      text {
        display: inline-block;
        text-align: center;
        min-width: 110rpx;
        height: 58rpx;
        line-height: 58rpx;
        color: #55aa7f;
        font-size: 30rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .active-label {
      background-color: #55aa7f;

      text {
        color: #fff;
      }
    }
  }

  .activity-list {
    width: 100%;
    margin-top: 20rpx;
    padding-left: 10rpx;
    display: flex;
    align-items: center;

    .activity-item {
      margin-right: 25rpx;
      text-align: center;
      flex-shrink: 0;

      image {
        width: 160rpx;
        height: 200rpx;
        border-radius: 10rpx;
      }

      .activity-text {
        display: block;
        width: 160rpx;
        font-size: 28rpx;
        color: #333;
        padding-top: 10rpx;
        line-height: 40rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

.book-block {
  padding: 20rpx 20rpx 0;

  .book-tab-one {
    display: flex;
    align-items: center;

    .tab-one-item {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #d7ece8;
      border-radius: 15rpx;
      margin-right: 15rpx;
      text-align: center;
      min-width: 25%;
      height: 160rpx;
      flex-shrink: 0;

      text {
        display: flex;
        width: 98%;
        font-size: 32rpx;
        color: #55aa7f;
        line-height: 50rpx;
        overflow: hidden;
      }
    }

    .tab-one-item:last-child {
      margin-right: 0;
    }

    .tab-one-active {
      background-color: #55aa7f;

      text {
        color: #fff;
      }
    }
  }

  .book-tab-two {
    display: flex;
    align-items: center;
    height: 70rpx;
    border-radius: 10rpx;

    .tab-two-item {
      min-width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1rpx solid #acacac33;
      flex-shrink: 0;

      text {
        display: block;
        text-align: center;
        width: 165rpx;
        font-size: 28rpx;
        line-height: 48rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .tab-two-item:last-child {
      border-right: none;
    }

    .tab-two-active {
      text {
        color: #55aa7f;
        font-weight: bold;
      }
    }
  }

  .book-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20rpx;

    .book-item {
      width: 49%;
      background-color: #fff;
      border-radius: 15rpx;
      height: 575rpx;
      position: relative;
      margin-bottom: 20rpx;

      image {
        width: 85%;
        margin: 25rpx auto 0;
        border-radius: 15rpx;
        height: 380rpx;
        display: block;
      }

      .book-text {
        display: block;
        font-size: 28rpx;
        color: #333;
        line-height: 36rpx;
        width: 80%;
        margin: 15rpx auto 0;
        max-height: 72rpx;
        overflow: hidden;
      }

      .book-price {
        position: absolute;
        font-size: 28rpx;
        color: #ff4703;
        left: 30rpx;
        bottom: 20rpx;
      }

      .book-flag {
        display: block;
        font-size: 26rpx;
        color: #999;
        position: absolute;
        right: 6%;
        bottom: 20rpx;
      }
    }
  }
}

.zanwu {
  display: block;
  text-align: center;
  font-size: 28rpx;
  color: #999;
  padding: 40rpx 0;
}

.scroll-view {
  white-space: nowrap;
}
</style>
