<template>
	<view class="gift-bg"></view>
	<view class="list">
		<view class="tab">
			<view class="tab_item" :class="{ active: item.type == datas.tabIndex }" @click="tabClickczgw(item)"
				v-for="(item, index) in datas.tab" :key="index">{{ item.label }}</view>
		</view>
		<view class="item" v-for="(item, index) in datas.list" :key="index">
			<view class="color-666 u-font-24">{{datas.tabIndex==1?'中奖时间':'兑换时间'}} {{item.createTime}}</view>
			<view class="u-m-t-24 u-flex u-row-between">
				<view class="u-flex-1 u-flex u-col-top">
					<u-image width="128rpx" height="128rpx" src="@/static/index/redPack.png"></u-image>
					<view class="u-m-l-16">
						<view v-if="datas.tabIndex == 1">{{item.name}}</view>
						<view v-else>{{item.prizeName}}</view>
						<view v-if="datas.tabIndex == 1" class="color-999 u-font-24 u-m-t-16">×{{item.number}}</view>
					</view>
				</view>
				<view class="" v-if="datas.tabIndex==1&&!item.targetId&&item.type==3">
					<view class="btn-circle duihuan" @click="toDuiHuan(item)">立即兑换</view>
				</view>
			</view>
		</view>

		<view class="empty" v-if="!datas.list.length">
			<u-empty text="暂无记录" src="/static/icon-empty.svg"></u-empty>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import {
		selectDiscSpinningRecord,
		userPrizeExchange
	} from '@/api/index/index.js'
	let datas = reactive({
		list: [],
		tab: [{
				label: '抽奖记录',
				type: 1
			},
			{
				label: '兑换记录',
				type: 2
			}
		],
		tabIndex: 1,
		page: 1
	})
	onShow(() => {
		getList();
	})
	onReachBottom(() => {
		++datas.page
		getList();
	})

	async function getList() {
		let res = '';
		if (datas.tabIndex == 1) {
			res = await selectDiscSpinningRecord({
				page: datas.page,
				limit: 10,
				source: 1
			})
		} else {
			res = await userPrizeExchange({
				page: datas.page,
				limit: 10,
				source: 1
			})
		}
		if (datas.tabIndex == 1) {
			if (datas.page == 1) {
				datas.list = res.records;
			} else {
				if (res.records.length) {
					datas.list.push(...datas.list, res.records)
				}
			}
		} else {
			if (datas.page == 1) {
				datas.list = res.list;
			} else {
				if (res.records.length) {
					datas.list.push(...datas.list, res.list)
				}
			}
			// datas.total = res.page.totalCount;
		}

	}

	function tabClickczgw(item) {
		datas.list = [];
		datas.tabIndex = item.type;
		datas.page = 1
		getList();
	}
	// 立即兑换
	function toDuiHuan(item) {
		uni.navigateTo({
			url: `/pages/index/prizeDraw/duihuan?id=${item.id}`
		})
	}
</script>


<style lang="scss" scoped>
	.gift-bg {
		position: relative;
		width: 100%;
		height: 524rpx;
		background: url('@/static/index/giftbg.png') no-repeat center center/cover;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;


	}

	.duihuan {
		background: linear-gradient(87deg, #ed8087 0%, #eca2aa 100%);
		font-size: 24rpx;
		color: #fff;
		padding: 8rpx 16rpx;
		text-align: center;

		&.finish {
			background: #e5e5e5;
			color: #999;
		}
	}



	.empty {
		margin-top: 140rpx;
	}


	.list {
		margin: 0 20rpx;
		position: relative;
		z-index: 2;
		margin-top: -148rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		overflow: hidden;
		background-color: #fff;

		.tab {
			display: flex;

			.tab_item {
				height: 80rpx;
				line-height: 80rpx;
				width: 50%;
				text-align: center;
				font-size: 32rpx;
				color: #333;
			}

			.active {
				background-color: #eca2aa;
				color: #fff;
			}
		}

		.item {
			padding: 32rpx 24rpx;
			border-bottom: 1rpx solid #e5e5e5;
		}
	}
</style>