<template>
    <view class="notifi-content">
        <scroll-view class="scroll-view" scroll-y @scrolltolower="scrollBottom">
            <view class="list">
                <view class="card btn-light" v-for="(item, index) in pageState.list" :key="index">
                    <view class="card-Date">{{ item.date }}</view>
                    <view class="card-Title">{{ item.title }}</view>
                    <view class="card-subTitle">{{ item.subTitle }}</view>
                    <view class="card-btns" v-if="item.noticeType === '2'" @click="seeBussiness(item)">
                        <view class="btns-text">立即查看</view>
                        <view class="btns-text"><uni-icons type="forward" color="#256bfa" size="18"></uni-icons></view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
const { $api, navTo, debounce, customSystem } = inject('globalFunction');

const pageState = reactive({
    page: 0,
    list: [],
    total: 0,
    maxPage: 1,
    pageSize: 10,
    search: {},
    lastDate: '',
});

onLoad(() => {
    getList('refresh');
});

function scrollBottom() {
    getList();
}

function seeBussiness(item) {
    if (item.bussinessId) {
        navTo(`/packageA/pages/UnitDetails/UnitDetails?bussinessId=${item.bussinessId}`);
    }
}

function setRead(row) {
    const ids = row
        .filter((item) => !item.isRead)
        .map((item) => item.noticeId)
        .join(',');
    if (ids) {
        $api.createRequest(`/app/notice/read/sysNotice?id=${ids}`, {}, 'POST').then((resData) => {
            console.log('设置已读');
        });
    }
}

function getList(type = 'add', loading = true) {
    if (type === 'refresh') {
        pageState.page = 1;
        pageState.maxPage = 1;
    }
    if (type === 'add' && pageState.page < pageState.maxPage) {
        pageState.page += 1;
    }
    let params = {
        current: pageState.page,
        pageSize: pageState.pageSize,
        ...pageState.search,
    };
    $api.createRequest('/app/notice/sysNotice', params).then((resData) => {
        const { rows, total } = resData;
        if (type === 'add') {
            const str = pageState.pageSize * (pageState.page - 1);
            const end = pageState.list.length;
            const reslist = rows;
            pageState.list.splice(str, end, ...reslist);
        } else {
            pageState.list = rows;
        }
        setRead(rows);
        pageState.total = resData.total;
        pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
    });
}
</script>

<style lang="scss" scoped>
.notifi-content {
    background-color: #f4f4f4;
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    .scroll-view {
        height: 100%;
    }
    .list {
        padding: 28rpx;
        .card {
            background: #ffffff;
            box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            padding: 32rpx;
            margin-bottom: 28rpx;
            .card-Date {
                font-weight: 400;
                font-size: 28rpx;
                color: #6c7282;
            }
            .card-Title {
                margin-top: 24rpx;
                font-weight: 500;
                font-size: 32rpx;
                color: #333333;
            }
            .card-subTitle {
                margin-top: 16rpx;
                font-weight: 400;
                font-size: 28rpx;
                color: #495265;
            }
            .card-btns {
                font-weight: 400;
                font-size: 28rpx;
                color: #256bfa;
                line-height: 45rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-top: 2rpx solid #efefef;
                width: 630rpx;
                margin-top: 28rpx;
                padding-top: 28rpx;
            }
        }
    }
}
</style>
