<template>
    <view>
        <view class="bg">
            <view class="list">
                <view class="content">
                    <view v-for="(item, index) in list" :key="index" class="item">
                        <view>
                           <text @click="goForecast(item)">{{ item.name }} {{ item.sex == '1' ? '男' : '女' }} {{ item.birthday }}</text> 
                            <image v-if="item.isPay == 2" class="item-vip" mode="widthFix"
                                src="/static/icon/gold_vip@2x.png">
                            </image>
                            <image v-if="item.isPay == 1" class="item-vip" mode="widthFix"
                                src="/static/icon/gray_vip@2x.png">
                            </image>

                        </view>
                        <view>
                            <image @click="delSingleHistory(item.id)" mode="widthFix" class="item-del"
                                src="/static/icon/del@2x.png"></image>

                        </view>

                    </view>
                    <!-- <view class="item">
                        <view>
                            夏初 女 1993年4月21日
                            <image class="item-vip" mode="widthFix" src="/static/icon/gold_vip@2x.png"></image>
                            <image class="item-vip" mode="widthFix" src="/static/icon/gray_vip@2x.png"></image>
                        </view>
                        <view>
                            <image mode="widthFix" class="item-del" src="/static/icon/del@2x.png"></image>
                        </view>

                    </view> -->
                </view>
            </view>
            <view class="buttons">
                <view @click="getPrePage()" class="pre">
                    上一页
                </view>
                <view class="mid">
                    {{ pageNum }}/ {{ maxPageNum }}
                </view>
                <view @click="getNextPage()" class="next">
                    下一页
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import api from '@/api'
export default {
    data() {
        return {
            list: [],
            total: 1,
            pageNum: 1,


        }
    },
    computed: {
        maxPageNum() {
            return Math.ceil(this.total / 10)
        }
    },
    methods: {
        goForecast(item){
           uni.navigateTo({
            url:`/pages/forecast/index?birthday=${item.birthday}&sex=${item.sex}&username=${item.name}`,

           })

        },
        delSingleHistory(id) {
            let that =this
            uni.showModal({
                title: '提示',
                content: '是否删除该记录',
                success: function (res) {
                    if (res.confirm) {
                        api.order.studentBirthdayLogIds(id).then(res => {
                            that.getPage()

                        })
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            })


        },
        getNextPage() {
            if (this.maxPageNum == this.pageNum) {
                uni.showToast({
                    title: '到底了',
                    icon: 'none'
                })
                return
            }
            this.pageNum++
            this.getPage()
        },
        getPrePage() {
            if (this.pageNum == 1) {
                uni.showToast({
                    title: '到底了',
                    icon: 'none'
                })
                return
            }
            this.pageNum--
            this.getPage()

        },
        getPage() {
            api.order.studentBirthdayLogList({
                pageNum: this.pageNum,
                pageSize: 10,
            }).then(res => {
                this.list = res.rows
                this.total = res.total
            })
        }
    },
    onLoad() {
        this.getPage()
    }
}
</script>

<style lang="less" scoped>
.bg {
    width: 100%;
    min-height: 100vh;
    background-color: #F6ECDB;
    padding-bottom: 90rpx;
}

.list {
    padding: 0 30rpx;
    padding-top: 50rpx;
    margin-bottom: 45rpx;

    .content {
        width: 100%;
        background-color: #fff;
        height: 120vw;
        padding: 0 30rpx;

        .item {
            height: 80rpx;
            width: 100%;
            line-height: 80rpx;
            font-size: 28rpx;
            color: #333333;
            border-bottom: 1rpx solid #E3E3E3;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: space-between;

            view {
                display: flex;
                align-items: center;
                align-content: center;
            }

            .item-vip {
                width: 40rpx;
                margin-left: 20rpx;
            }

            .item-del {
                width: 40rpx;
            }
        }
    }


}

.buttons {
    width: 690rpx;
    margin: 0 auto;
    border: 4rpx solid #FDE575;
    height: 12vw;
    overflow: hidden;
    border-radius: 10rpx;
    display: flex;

    .pre {
        font-size: 34rpx;
        background: linear-gradient(0deg, #D68D13, #EEBB65);
        width: 230rpx;
        line-height: 12vw;
        color: #66271B;
        text-align: center;

    }

    .mid {
        font-size: 34rpx;
        background: linear-gradient(0deg, #E79F26, #FACA7B);
        width: 230rpx;
        line-height: 12vw;
        color: #66271B;
        text-align: center;

    }

    .next {
        font-size: 34rpx;
        background: linear-gradient(0deg, #D68D13, #EEBB65);
        width: 230rpx;
        line-height: 12vw;
        color: #66271B;
        text-align: center;

    }


}
</style>