<template>
  <!-- 导航 -->
  <KlNavTab active="交流频道" />
  <div class="ma-auto mt-[30px] w-[1440px] flex">
    <LeftContent v-model="pageReq.channelId" v-model:channelIdList="channelIdList"></LeftContent>
    <RightContent v-model="pageRes" v-model:lun-tan-res="lunTanRes" v-model:page-no="pageReq.pageNo" @update-page-no="handleUpdatePageNo"></RightContent>
  </div>
</template>

<script setup lang="ts">
  import KlNavTab from '~/components/kl-nav-tab/index.vue'
  import LeftContent from '../components/LeftContent.vue'
  import RightContent from '../components/RightContent.vue'
  import { page, getChannelLunTanDetail, list } from '~/api/channel/index'
  import { reactive, watch, ref } from 'vue'
  import type { TpageRes, ChannelRespVO } from '~/api/channel/types'

  const route = useRoute()
  const channelId = computed(() => (route.params.channelId as string) || '')
  const pageNo = computed(() => Number(route.params.pageNo) || 1)

  const pageReq = reactive({
    pageNo: pageNo.value,
    pageSize: 10,
    channelId: channelId.value, //  频道ID
  })
  //   const pageRes = reactive<TpageRes>({
  //     list: [],
  //     total: 0,
  //   })

  // 获取频道列表
  const { data: channelIdList } = await useAsyncData(`prod-api/app-api/business/channel/list-${Date.now()}`, async () => {
    const res = await list()
    return res.data as any[]
  })

  console.log(channelIdList)

  // 获取第一个论坛详情
  // if (!channelIdList.value?.length) return
  const { data: lunTanRes, execute: refreshLunTanDetail } = await useAsyncData(
    `prod-api/app-api/business/channel/detail-${Date.now()}`,
    async () => {
      if (!channelId.value) return null // 无参数时不请求
      const res = await getChannelLunTanDetail({
        id: channelId.value,
      })
      return res.data as ChannelRespVO
    },
    {
      immediate: true,
    }
  )

  const { data: pageRes, refresh: getPage } = await useAsyncData(`prod-api/app-api/business/posts/page-${Date.now()}`, async () => {
    const res = await page(pageReq)
    return res.data as TpageRes
  })
  // 获得频道帖子分页
  //   const getPage = () => {
  //     page(pageReq).then((res) => {
  //       pageRes.list = res.data.list
  //       pageRes.total = res.data.total
  //     })
  //   }
  //   getPage()

  const handleUpdatePageNo = (pageNo: number) => {
    pageReq.pageNo = pageNo
    navigateTo(`/channel/${channelId.value}/${pageNo}`)
    // getPage()
  }

  // 获取论坛详情
  // const lunTanRes = ref({} as ChannelRespVO)
  // const getLunTanDetaiil = (val: string) => {
  //   getChannelLunTanDetail({
  //     id: val,
  //   }).then((res) => {
  //     lunTanRes.value = res.data
  //   })
  // }

  //   watch(
  //     () => channelId.value,
  //     (val) => {
  //       if (val) {
  //         // 更新分页请求的channelId
  //         pageReq.channelId = val
  //         // 重新请求分页数据和论坛详情
  //         getPage()
  //         refreshLunTanDetail() // 刷新论坛详情
  //       }
  //     }
  //   )
</script>

<style lang="scss" scoped></style>
