<script setup lang="ts">
import { ref } from 'vue'
import { queryKnowledgeCategory } from '@/api/knowledge/index'
const isloading = ref(false)
const categories = ref([])
const pagenum = ref(1)
const pagesize = ref(15)
const total = ref(0)
const createCategory = async (loadMore = false) => {
  try {
    isloading.value = true
    const res = (await queryKnowledgeCategory({
      pageNum: pagenum.value,
      pageSize: pagesize.value,
    })) as any
    if (res.code === 200) {
      if (loadMore) {
        categories.value = [...categories.value, ...(res.rows || [])]
      } else {
        categories.value = res.rows || []
      }
      total.value = res.total || 0
    }
  } catch (error) {
    console.log(error)
  } finally {
    isloading.value = false
  }
}
onLoad(() => {
  createCategory()
})

// 跳转到详情页
const navigateToDetail = (id: number) => {
  const category = categories.value.find((item: any) => item.id === id)
  const cleaned = category?.icon?.replace(/#/g, '')
  if (cleaned.includes('iconfont')) {
    uni.navigateTo({
      url: `/pages/knowledge/search/details/index?id=${category.id}&name=${category.name}&icon=${cleaned}`,
    })
  } else {
    const iconUrl = category?.iconUrl?.[0] || ''
    uni.navigateTo({
      url: `/pages/knowledge/search/details/index?id=${category.id}&name=${category.name}&icon=${encodeURIComponent(iconUrl)}`,
    })
  }
}

const itemClick = (id: number) => {
  navigateToDetail(id)
}

// 下拉加载
const handleLoadMore = async () => {
  if (categories.value.length >= total.value) {
    uni.showToast({
      title: '没有更多数据了',
      icon: 'none',
    })
    return
  }
  pagenum.value++
  await createCategory(true)
}
</script>
<template>
  <view class="knowledgebase_search">
    <view v-if="isloading" class="loading-container">
      <wd-loading size="40px" color="#215ACD"></wd-loading>
    </view>
    <view class="header_search">
      <input class="search_input" type="text" placeholder="搜索" />
    </view>
    <scroll-view
      class="main_list"
      :scroll-y="true"
      @scrolltolower="handleLoadMore"
    >
      <view
        class="main_list_items"
        v-for="(item, index) in categories"
        @tap="itemClick(item.id)"
      >
        <view
          class="main_list_items_icon"
          :style="{ background: item.backcolor }"
        >
          <text
            v-if="item.icon.includes('iconfont')"
            :class="[item.icon.split(',')[0]]"
            :style="{ color: item.icon.split(',')[1], 'font-size': '48rpx' }"
          ></text>
          <image
            v-else
            style="width: 100%; height: 100%;border-radius: 20rpx"
            :src="item.iconUrl[0]"
            alt=""
          />
        </view>
        <view class="main_list_items_text">
          <span>{{ item.name }}</span>
          <span>{{ item.description }}</span>
        </view>
      </view>
      <view
        v-if="!isloading && categories.length > 0 && categories.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;
}
.knowledgebase_search {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44rpx;
  padding: 18rpx 40rpx 40rpx;
  box-sizing: border-box;
  .header_search {
    width: 100%;
    height: 80rpx;
    .search_input {
      width: 100%;
      height: 100%;
      background-color: #f6f6f6;
      background-image: url('../../../assets/searchicon.png');
      background-repeat: no-repeat;
      background-position: 20rpx center;
      background-size: 30rpx 30rpx;
      padding-left: 56rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      color: #333333;
    }
  }
  .main_list {
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 42rpx;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-bottom: 80rpx;
    .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;
        :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) {
          width: 50%;
          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;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        // .iconstyle{
        //   font-size: 48rpx;
        // }
        // border-radius: 20rpx;
        // padding: 20rpx;
        // box-sizing: border-box;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        // .main_list_items_icon_line {
        //   width: 100%;
        //   height: 6rpx;
        //   border-radius: 4rpx;
        //   background-color: #ffffff;
        //   &:nth-child(1) {
        //     width: 60%;
        //   }
        // }
      }
    }
  }
}
.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>
