<script lang="ts" setup>
import { safeAreaInsets } from '@/utils/systemInfo'
import MxSearch from "@/pages-sub/components/search/index.vue"
import MxTabs from "@/pages-sub/components/tabs/index.vue"
import { getNewsCategory, getNewsPage } from "@/service"

// #ifdef MP-WEIXIN
definePage({
    style: {
        navigationStyle: 'custom',
    },
    excludeLoginPath: false,
})
// #endif

// #ifndef MP-WEIXIN
definePage({
    style: {
        navigationStyle: 'custom',
        transparentTitle: 'always',
        navigationBarTitleText: ''
    },
    excludeLoginPath: false,
})
// #endif

const tabs = ref([])
const articles = ref([])
const handleBack = () => {
    uni.navigateBack({ delta: 1 })
}

const activeIndex = ref(0)

const handleChange = (val: number) => {
    activeIndex.value = val
    searchParams.value.activeTab = tabs.value[val]["id"]
    paging.value.reload()
}

const toDetailPage = (id: number) => {
    uni.navigateTo({ url: `/pages-sub/information/middleDetail?id=${id}` })
}

const searchParams = ref({ keyword: "", activeTab: '' })

const paging = ref(null)

const queryList = (page: number, pageSize: number) => {
    if (searchParams.value.activeTab === "") {
        getNewsCategory().then(resp => {
            if (resp.code === 200) {
                tabs.value = resp.result
                searchParams.value.activeTab = resp.result[0]['id']
                getNewsPage({ query: { CategoryId: searchParams.value.activeTab, Title: searchParams.value.keyword, Page: page, PageSize: pageSize } }).then(resp => {
                    if (resp.code === 200) {
                        paging.value.complete(resp.result.items)
                    }
                })
            }
        })
    } else {
        getNewsPage({ query: { CategoryId: searchParams.value.activeTab, Title: searchParams.value.keyword, Page: page, PageSize: pageSize } }).then(resp => {
            if (resp.code === 200) {
                paging.value.complete(resp.result.items)
            }

        })
    }

}
const virtualListChange = (_vList) => {
    articles.value = _vList
}

const handleComplete = () => {
   paging.value.reload() 
}
</script>

<template>
    <z-paging ref="paging" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic"
        @virtualListChange="virtualListChange" @query="queryList" :auto-show-system-loading="false"
        :safe-area-inset-bottom="true" :pagingStyle="{ backgroundColor: 'white' }">
        <template #top>
            <view class="gradient-custom">
                <sar-navbar title="中考资讯" :show-back="true" @back="handleBack"
                    :root-style="{ '--sar-navbar-bg': `rgba(255, 255, 255, 0)`, 'padding-top': `${safeAreaInsets?.top}px`, '--sar-navbar-item-color': 'black' }">
                </sar-navbar>
                <mx-search v-model:searchText="searchParams.keyword" rootStyle="margin: 16rpx 30rpx 0;" @complete="handleComplete"/>
                <mx-tabs :tabsList="tabs" rootClass="shadow-md mb-[20rpx]" @tab-change="handleChange" />
            </view>
        </template>
        <view class="flex flex-col h-full">
            <view class="flex-1 pb-safe" v-if="activeIndex === 0">
                <view v-for="(item) in articles" :id="`zp-id-${item.zp_index}`" :key="item.zp_index"
                    @click="toDetailPage(item.id)"
                    class="flex items-center justify-between py-[28rpx] mx-[30rpx] border-b-1 border-b-solid border-[#f5f5f5]">
                    <view class="text-[#333] text-[30rpx]">{{ item.title }}</view>
                    <view class="w-[18rpx] h-[36rpx] ml-[20rpx]">
                        <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/tianbao/tb_jiantou.png"
                            mode="scaleToFill" class="w-[18rpx] h-[36rpx]" />
                    </view>
                </view>
            </view>
            <view class="flex-1 overflow-y-auto pb-safe" v-if="activeIndex === 1">
                <view v-for="item in articles"  :id="`zp-id-${item.zp_index}`" :key="item.zp_index" class="flex justify-between mx-[30rpx] py-[20rpx]" @click="toDetailPage(item.id)">
                    <view class="flex flex-col justify-between mr-[20rpx]">
                        <text class="text-[30rpx] text-[#333]">{{ item.title }}</text>
                        <text class="text-[#999999] text-[26rpx]">{{ item.publishTime }}</text>
                    </view>
                    <view class="w-[216rpx] h-[144rpx]">
                        <image :src="item.coverImage" mode="scaleToFill" class="w-[216rpx] h-[144rpx]" />
                    </view>
                </view>
            </view>
        </view>
    </z-paging>
</template>

<style lang="scss" scoped>
@import url("@/style/index.scss");
</style>
