<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { queryrecentviewlistAPI } from '@/api/knowledge/index'
import defimage from '@/assets/image.png'

const list = ref([])
const isloading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
async function queryrecentviewlistAPIfn(loadMore = false) {
  try {
    isloading.value = true
    const res = (await queryrecentviewlistAPI({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    })) as any
    if (res.code === 200) {
      if (loadMore) {
        list.value = [...list.value, ...(res?.rows || [])]
      }
      else {
        list.value = res?.rows
      }
      total.value = res?.total
    }
    console.log(res)
  }
  catch (err) {
    uni.showToast({
      title: '加载失败',
      icon: 'none',
    })
  }
  finally {
    isloading.value = false
  }
}

onLoad(() => {
  queryrecentviewlistAPIfn()
})
function handleKnowledgeSearch() {
  uni.navigateTo({
    url: '/pages/knowledge/search/index',
  })
}
function handleMyExamination() {
  uni.navigateTo({
    url: '/pages/knowledge/exam/index',
  })
}

async function handleLoadMore() {
  if (list.value.length >= total.value) {
    uni.showToast({
      title: '没有更多数据了',
      icon: 'none',
    })
    return
  }
  pageNum.value++
  await queryrecentviewlistAPIfn(true)
}
</script>

<template>
  <view class="knowledge">
    <view v-if="isloading" class="loading-container">
      <wd-loading size="40px" color="#215ACD" />
    </view>
    <view class="header_nav">
      知识学院
    </view>
    <view class="header_nav_item">
      <view class="header_nav_item_items" @tap="handleKnowledgeSearch">
        <span>知识搜索</span>
        <view class="header_nav_item_items_icon left_items" />
      </view>
      <view class="header_nav_item_items" @tap="handleMyExamination">
        <span>我的考试</span>
        <view class="header_nav_item_items_icon right_items" />
      </view>
    </view>
    <scroll-view
      class="main_list"
      :scroll-y="true"
      @scrolltolower="handleLoadMore"
    >
      <view class="main_list_title">
        最近查看
      </view>
      <view v-for="(item, index) in list" :key="index" class="main_list_items">
        <view class="main_list_items_icon">
          <text
            v-if="item?.icon?.includes('iconfont')"
            :class="[item.icon.split(',')[0]]"
            :style="{ 'color': item.icon.split(',')[1], 'font-size': '48rpx' }"
          />
          <image
            v-else-if="item?.attachmentUrl.length > 0"
            style="width: 100%; height: 100%; border-radius: 20rpx"
            :src="item?.attachmentUrl[0]"
            alt=""
          />
          <!-- iconfont icon-tushu,#1890ff,blue-book -->
          <text
            v-else
            class="iconfont icon-tushu"
            style="font-size: 48rpx; color: #1890ff"
          />
        </view>
        <view class="main_list_items_text">
          <span>{{ item.title }}</span>
          <span>暂无介绍</span>
        </view>
      </view>
      <view v-if="isloading && list.length > 0" class="load-more">
        <wd-loading size="20px" color="#215ACD" />
        <text style="margin-left: 10rpx; font-size: 24rpx; color: #86909c">
          加载中...
        </text>
      </view>
      <view
        v-if="!isloading && list.length > 0 && list.length >= total"
        class="load-more"
      >
        <text style="font-size: 24rpx; color: #86909c">- 暂无数据 -</text>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
html,
body {
  overflow: hidden;
}
.knowledge {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44rpx;
  padding: 40rpx;
  box-sizing: border-box;
  .header_nav {
    width: 100%;
    font-size: 36rpx;
    font-weight: 500;
    color: #303030;
    text-align: left;
  }
  .header_nav_item {
    width: 100%;
    height: 144rpx;
    display: flex;
    justify-content: space-between;
    gap: 18rpx;
    :nth-child(1) {
      background-color: #f2f9ff;
    }
    :nth-child(2) {
      background-color: #ebf7f0;
    }
    .header_nav_item_items {
      font-family: Alimama ShuHeiTi;
      font-weight: 700;
      font-style: Bold;
      font-size: 32rpx;
      leading-trim: NONE;
      line-height: 28rpx;
      letter-spacing: 4%;
      color: #31373d;
      flex: 1;
      padding: 32rpx 32rpx 0;
      display: flex;
      justify-content: space-between;
      .left_items {
        background-image: url('../../assets/searchimgs.png');
        background-size: contain;
        background-position: center bottom;
        background-repeat: no-repeat;
      }
      .right_items {
        background-image: url('../../assets/exam.png');
        background-size: contain;
        background-position: center bottom;
        background-repeat: no-repeat;
      }
      .header_nav_item_items_icon {
        width: 96rpx;
        height: 96rpx;
        align-self: flex-end;
      }
    }
  }
  .main_list {
    flex: 1;
    width: 100%;
    // background-color: red;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 42rpx;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-bottom: 150rpx;
    .main_list_title {
      font-family: Alibaba PuHuiTi 2;
      font-weight: 500;
      font-style: 65 Medium;
      font-size: 36rpx;
      leading-trim: NONE;
      line-height: 36rpx;
      letter-spacing: 0px;
      color: #31373d;
      margin-bottom: 42rpx;
      //  position: sticky;
      //  top: 0;
      //  z-index: 1;
      //  background-color: #ffffff;
    }
    .main_list_items {
      width: 100%;
      height: 96rpx;
      padding: 4rpx 0 4rpx 10rpx;
      box-sizing: border-box;
      display: flex;
      gap: 16rpx;
      margin-bottom: 42rpx;

      // background-color: aqua;
      .main_list_items_text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        overflow: hidden;
        :nth-child(1) {
          font-family: Alibaba PuHuiTi 2;
          font-weight: 500;
          font-style: 65 Medium;
          font-size: 32rpx;
          leading-trim: NONE;
          line-height: 32rpx;
          letter-spacing: 0px;
          color: #31373d;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        :nth-child(2) {
          font-family: Alibaba PuHuiTi 2;
          font-weight: 400;
          font-style: 55 Regular;
          font-size: 28rpx;
          leading-trim: NONE;
          line-height: 28rpx;
          letter-spacing: 0px;
          color: #86909c;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .main_list_items_icon {
        width: 74rpx;
        height: 86rpx;
        // border-radius: 20rpx;
        // padding: 20rpx;
        // box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-shrink: 0;
      }
    }
  }
}
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.load-more {
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
</style>
