<template>
  <view>
    <CuNavbar title="消息">
      <template #right>
        <view class="text-24rpx text-white" @click="onRead"> 一键已读 </view>
      </template>
    </CuNavbar>
    <uv-sticky bgColor="#fff">
      <uv-tabs
        height="44"
        :activeStyle="{ color: '#ee2c37' }"
        :scrollable="false"
        :current="tabIndex"
        lineColor="#ee2c37"
        :list="tabList"
        @change="tabChange"
      ></uv-tabs>
    </uv-sticky>
    <MescrollItem
      ref="mescrollItem0"
      :top="88"
      :i="0"
      :index="tabIndex"
      :apiUrl="tabList[0].apiUrl"
      :params="tabList[0].params"
    >
      <template v-slot="{ list }">
        <view class="space-y-15rpx p-base">
          <view v-for="(item, i) in list" :key="i">
            <Item :item="item"></Item>
          </view>
        </view>
      </template>
    </MescrollItem>
    <MescrollItem
      ref="mescrollItem1"
      :i="1"
      :top="88"
      :index="tabIndex"
      :apiUrl="tabList[1].apiUrl"
      :params="tabList[1].params"
    >
      <template v-slot="{ list }">
        <view class="space-y-15rpx p-base">
          <view v-for="(item, i) in list" :key="i">
            <Item :item="item"></Item>
          </view>
        </view>
      </template>
    </MescrollItem>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import { computed, reactive, 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 Item from './components/item.vue'
import { http } from '@/utils/request'
const mescrollItem0 = ref(null)
const mescrollItem1 = ref(null)

const mescrollItems = [mescrollItem0, mescrollItem1]
const { tabIndex, getMescroll, scrollToLastY } = useMescrollMore(
  mescrollItems,
  onPageScroll,
  onReachBottom
)
const tabList = ref([
  {
    name: '系统通知',
    apiUrl: '/message/messages',
    params: {
      filter: 'system',
    },
  },
  {
    name: '办公通知',
    apiUrl: '/message/messages',
    params: {
      filter: 'work',
    },
  },
])

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

const onRead = () => {
  http.post('/message/read-all').then(() => {
    getMescroll(tabIndex.value).resetUpScroll()
  })
}
</script>
