<template>
  <!-- 导航 -->
  <KlNavTab active="交流频道" />
  <div class="ma-auto mt-30px w-1440px flex">
    <LeftContent v-model="pageReq.channelId"></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 } from '~/api/channel/index'
  import { reactive, watch, ref } from 'vue'
  import type { TpageRes, ChannelRespVO } from '~/api/channel/types'

  const pageReq = reactive({
    pageNo: 1,
    pageSize: 10,
    channelId: '', //  频道ID
  })
  const pageRes = reactive<TpageRes>({
    list: [],
    total: 0,
  })
  // 获得频道帖子分页
  const getPage = () => {
    page(pageReq).then((res) => {
      pageRes.list = res.data.list
      pageRes.total = res.data.total
    })
  }
  getPage()

  const handleUpdatePageNo = (pageNo: number) => {
    pageReq.pageNo = pageNo
    getPage()
  }

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

  watch(
    () => pageReq.channelId,
    (val) => {
      if (val) {
        getPage()
        getLunTanDetaiil(val)
      }
    }
  )
</script>

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