<script setup lang="ts" name="Query">
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import Tabbar from '../../components/Tabbar.vue'
import { useAppStore } from '../../store'
import MessageItem from './modules/MessageItem.vue'
import PullList from '../../components/List/PullList.vue'
import { selectUserMsgList, insertUserReadMsgInfo } from '../..//api/notice'

const appStore = useAppStore()
const pullListRef = ref<InstanceType<typeof PullList>>()
const active = ref('1')
const queryParams = ref({
  pageNum: 1,
  pageSize: 5,
  type: '1' // 1消息 2公告
})

// 切换Tab
function handleChangeTab(val: any): void {
  queryParams.value.pageNum = 1
  queryParams.value.type = val.detail.name
  console.log('queryParams.value',queryParams.value)
  pullListRef.value?.ReLoad()
}

// 请求方法，传入PullList组件，需返回{rows: [], total: number}
function onRequest(query?: any, isRefresh?: boolean): Promise<{rows: any[], total: number}> {
  return selectUserMsgList(query)
}

// 点击，请求已读
function onClickMessage(item) {
  if (item.status === '1') return
  insertUserReadMsgInfo({ id: item.id }).then((res) => {
    queryParams.value.pageNum = 1
    pullListRef.value?.refresh()
    appStore.gettUserNotReadCount()
  })
}

</script>

<template>
  <div class="news-container">
    <van-tabs
      v-model:active="active"
      class="tabs"
      @change="handleChangeTab">
      <van-tab title="消息提醒" name="1"/>
      <van-tab title="通知公告" name="2"/>
    </van-tabs>
    <div class="container">


      <PullList ref="pullListRef" v-model:query-string="queryParams"  :isFixed="false" zHeight="80vh" :request-method="onRequest">
        <template #default="{ item, index }">
          <MessageItem :item="item" @tap="onClickMessage(item)"/>
        </template>
      </PullList>
    </div>
  </div>
  <Tabbar :selected="0"/>
</template>

<style lang="less" scoped>
.news-container { 
  padding-bottom: calc(12rpx + env(safe-area-inset-bottom) + 20rpx + env(safe-area-inset-bottom));
}
.tabs {
  position: sticky;
  z-index: 1;
  top: 0;
}
:deep(.van-tabs__line){
  --van-tabs-bottom-bar-width: 10rem;
}
</style>
