<template>
    <view class="p-28">
        <view class="text-lg font-bold text-fore-title">{{ title }}</view>
        <view class="mt-20 grid grid-cols-2 gap-28">
            <volunteer-policy-item v-for="i in list" :key="i.id" :title="i.subType" :desc="i.description" :icon="i.icon"
                                   @click="handlePolicyClick(i)"/>
        </view>
    </view>
</template>

<script setup lang="ts">
import {getNewsMainList} from "@/api/modules/news";
import {Guide} from "@/types/news";
import {useTransferPage} from "@/hooks/useTransferPage";
import {routes} from "@/common/routes";
import VolunteerPolicyItem from "@/pagesMain/pages/volunteer/components/volunteer-policy-item.vue";

interface PolicyGuide extends Guide {
    icon: string // 后台没有返回icon，前端在icons按顺序补充
}

const title = '政策解读'
const icons = [
    '/volunteer/index/guide_1.png',
    '/volunteer/index/guide_2.png',
    '/volunteer/index/guide_3.png',
    '/volunteer/index/guide_4.png'
]
const list = ref<PolicyGuide[]>([])
const {transferTo} = useTransferPage()

const loadPolicyNews = function () {
    getNewsMainList().then(res => {
        list.value = res.rows.filter(i => i.type == title).map((guide, index) => ({
            ...guide,
            icon: icons[index % icons.length]
        }))
    });
}

const handlePolicyClick = async ({refIds, subType}: Guide) => {
    if (('' + refIds).includes(',')) {
        await transferTo(routes.newsGroup, {
            data: {
                ids: refIds,
                title: subType
            }
        });
    } else {
        await transferTo(routes.newsDetail, {
            data: {
                id: refIds,
                title: subType
            }
        })
    }
}

onMounted(() => loadPolicyNews())
</script>

<style scoped>

</style>