<template>
  <view>
    <CuNavbar title="培训课件"></CuNavbar>
    <uv-sticky bgColor="#fff">
      <uv-tabs
        height="44"
        :activeStyle="{ color: '#ee2c37' }"
        :scrollable="true"
        :current="tabIndex"
        lineColor="#ee2c37"
        :list="tabList"
        @change="tabChange"
      ></uv-tabs>
    </uv-sticky>

    <MescrollItem
      v-for="(item, key) in tabList"
      :key="item.id"
      :ref="`mescrollItem${item.id}`"
      :top="88"
      :i="key"
      :index="tabIndex"
      apiUrl="/train/books"
      :params="{ category_id: item.id }"
    >
      <template v-slot="{ list }">
        <view class="space-y-15rpx mt-base">
          <template v-for="subItem in list" :key="subItem.id">
            <view
              class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx"
              @click="detail(subItem.id)"
            >
              <view class="flex">
                <view
                  v-if="subItem.cover_image"
                  class="flex rounded-8rpx overflow-hidden"
                >
                  <uv-image
                    :src="subItem.cover_image"
                    width="160rpx"
                    height="160rpx"
                  />
                </view>
                <view
                  class="ml-12rpx flex-1 flex flex-col justify-between space-y-10rpx"
                >
                  <view class="text-26rpx font-500 line-clamp-2">{{
                    subItem.title
                  }}</view>
                  <view class="text-24rpx text-hex-999999">{{
                    subItem.description
                  }}</view>
                  <view class="text-22rpx text-hex-999999 text-right">{{
                    timeFormat(subItem.created_at)
                  }}</view>
                </view>
              </view>
            </view>
          </template>
        </view>
      </template>
    </MescrollItem>
  </view>
</template>
<script setup>
import { http } from '@/utils/request'
import CuNavbar from '@/components/cu-navbar/index'
import { ref } from 'vue'
import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app'
import useMescrollMore from '@/uni_modules/mescroll-uni/hooks/useMescrollMore.js'
import MescrollItem from '@/components/mescroll-api/more.vue'
import { timeFormat } from '@climblee/uv-ui/libs/function'

const mescrollItems = ref([])

const { tabIndex, getMescroll, scrollToLastY } = useMescrollMore(
  mescrollItems,
  onPageScroll,
  onReachBottom
)
let tabList = ref([])
http
  .get('/keywords', { params: { parent_key: 'book_category' } })
  .then((res) => {
    tabList.value = res
  })

const tabChange = ({ index }) => {
  tabIndex.value = index
  scrollToLastY()
}

const detail = (id) => {
  uni.navigateTo({
    url: `/pages/train-books/detail?id=${id}`,
  })
}
</script>
