<template>
    <view class="container">
        <scroll-view class="content" scroll-y @scrolltolower="loadMore">
            <view v-for="(item, index) in redPacketList" :key="index">
                <view class="item">
                    <view class="item_left">
                        <view class="money">￥{{ item.money }}</view>
                        <view class="full" v-if="item.full_amount">满{{ item.full_amount }}元可用</view>
                    </view>
                    <view class="item_center">
                        <view class="title">{{ item.red_package_name }}</view>
                        <view class="time">{{ item.end_time }}到期</view>
                        <view class="desc">{{ item.scope }}</view>
                    </view>
                    <view class="item_right">
                        <view class="status" @click="showPopup(item)">{{ item.is_received ? '已领取' : '领取' }}</view>
                    </view>
                    <view class="status2" :data-status="item.is_received ? '' : '待领取'" v-if="!item.is_received"></view>
                </view>
            </view>
            <!-- 加载状态 -->
            <view v-if="loading" class="loading">加载中...</view>
        </scroll-view>
        <view class="bottom">
            <view @click="goRedPacket()">我的权益</view>
        </view>

        <!-- 弹窗 -->
        <view v-if="popupVisible" class="popup-overlay" @click="hidePopup">
            <view class="popup-content" @click.stop>
                <view class="popup-icon">
                    <view class="checkmark"></view>
                </view>
                <view class="popup-title">领取成功!</view>
                <view class="popup-desc">{{ currentItem.red_package_name }}{{ currentItem.money }}元已存入您的账户</view>
                <button class="popup-btn" @click="hidePopup">确定</button>
            </view>
        </view>
    </view>
</template>
<script>
import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
import { apiArr } from '../../../api/user';

export default {
    data() {
        return {
            redPacketList: [],
            popupVisible: false,
            currentItem: null,
            page_num: 1,
            page_size: 10,
            loading: false,
            noMore: false
        }
    },
    methods: {
        async getRedPacketCenter() {
            const params = {
                pageNum: this.page_num,
                pageSize: this.page_size,
            }
            const res = await request(apiArr.redPackageCenter, 'POST', params);
            // 触底加载时合并数据，而不是替换
            if (this.page_num === 1) {
                this.redPacketList = res.rows;
            } else {
                this.redPacketList = [...this.redPacketList, ...res.rows];
            }
            // 判断是否还有更多数据
            this.noMore = res.rows.length < this.page_size;
            this.loading = false;
        },
        showPopup(item) {
            if (item.is_received) {
                return
            }
            const params = {
                user_id: uni.getStorageSync('userId'),
                red_package_config_id: item.id,
                mch_id: item.belong_role == 1 ? item.mch_id : ''
            }
            request(apiArr.redPackageClaim, 'POST', params).then(res => {
                this.currentItem = item;
                this.popupVisible = true;
                this.getRedPacketCenter()
            })
        },
        hidePopup() {
            this.popupVisible = false;
            this.currentItem = null;
        },
        goRedPacket() {
            NavgateTo('/packages/user/myRedPacket/index');
        },
        // 触底加载更多
        loadMore() {
            if (this.loading || this.noMore) return;
            this.loading = true;
            this.page_num++;
            this.getRedPacketCenter();
        }
    },
    onLoad() {
        this.getRedPacketCenter();
    }
}
</script>
<style>
@import url("./index.css");
</style>