<template>
	<view class="coupon-page">
		<!-- <uni-nav-bar
			left-icon="left"
			title="积分券"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="180rpx"
			:border="false"
			backgroundColor="#ffffff"
		/> -->
		<navBar :title="'积分券'" ></navBar>

		<!-- 顶部 tabs -->
		<view class="tabs">
			<view
				v-for="(tab, i) in tabs"
				:key="tab.value"
				class="tab-item"
				:class="{ active: activeTab === i }"
				@click="setActiveTab(i)"
			>
				<text class="tab-text">{{ tab.label }}</text>
			</view>
		</view>

		<!-- 列表 -->
		<scroll-view scroll-y class="list" :show-scrollbar="false">
			<view v-if="currentList.length" class="card-wrap">
				<view :class="['coupon-card', { gray: activeTab !== 0 }]" v-for="(item, idx) in currentList" :key="idx">
                    <view class="card-top" style="display: flex; padding: 32rpx 28rpx;">
                        <view class="card-left">
                            <text class="points">{{ item.points }}</text>
                            <text class="points-unit">积分券</text>
                        </view>
                        <view class="card-right" style="text-align: center;">
                            <view class="title">{{ item.title }}</view>
                        </view>
                    </view>
                    <view class="card-bottom" style="display: flex; background-color: #fff;color: #000; padding: 32rpx 28rpx;">
                        <view class="expire">有效期：{{ item.expire }}</view>
						<button class="btn" v-if="activeTab === 0" @click="goExchange(item)">在线兑换</button>
                    </view>
				</view>
			</view>
			
		  <empty v-else></empty>
			
			<!-- <view v-else class="empty">暂无数据</view> -->
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import navTo from '@/utils/navTo.js'
import api from '@/api/api.js'
import navBar from '@/components/navBar/navBar.vue'
import empty from '@/components/empty/empty.vue'
const tabs = [
	{ label: '未兑换', value: '1' },
	{ label: '已兑换', value: '2' },
	{ label: '已过期', value: '3' },
	{ label: '已作废', value: '4' }
]
const activeTab = ref(0)

onMounted(() => {
	getPointTicketList()
})

// 列表由接口返回
const currentList = ref([])

const goBack = () => {
	uni.navigateBack()
}

const goExchange = (item) => {

	// 确认后再跳转到现有在线兑换页
	uni.showModal({
		title: '确认兑换',
		content: `将使用${item.points}积分券进行兑换，是否继续？`,
		confirmText: '确认兑换',
		cancelText: '再想想',
		success: (res) => {
			if (res.confirm) {
				api.pointTicketExchange({uuid: item.uuid}).then(res => {
					console.log(res)
					if (res.code === 200 || res.code === '200') {
						uni.showToast({ title: '兑换成功', icon: 'none' })
						getPointTicketList()
					}
				})
				
			}
		}
	})
}

const getPointTicketList = () => {
	api.pointTicketlist({page: 1, status: activeTab.value+1}).then(res => {
		const rows = (res && res.data && res.data.list ? res.data.list : []).map(r => ({
            uuid: r.uuid,
			points: r.point,
			title: '肝胆相照',
			expire: formatDate(r.end_date)
		}))
		currentList.value = rows
	})
}

const setActiveTab = (i) => {
	activeTab.value = i
	getPointTicketList()
}

const formatDate = (seconds) => {
	if (!seconds) return ''
	const d = new Date(seconds * 1000)
	const y = d.getFullYear()
	const m = `${d.getMonth() + 1}`.padStart(2, '0')
	const day = `${d.getDate()}`.padStart(2, '0')
	return `${y}年${m}月${day}日`
}
</script>

<style scoped>
.coupon-page{background:#f5f5f5;min-height:100vh}
.tabs{
	position: fixed;
	top: calc(var(--status-bar-height) + 44px);
	left: 0;
	right: 0;
	z-index: 100;
	display:flex;align-items:center;justify-content:space-around;height:88rpx;background:#fff;border-bottom:1px solid #f0f0f0}
.tab-item{flex:1;display:flex;align-items:center;justify-content:center}
.tab-text{font-size:28rpx;color:#999}
.tab-item.active .tab-text{color:#8B2316;font-weight:600}
.list{
	position: fixed;
	top: calc(var(--status-bar-height) + 44px + 88rpx);
	left: 0;
	right: 0;
	z-index: 100;
	height:calc(100vh - var(--status-bar-height) - 44px - 88rpx);
}
.card-wrap{padding:24rpx}
.coupon-card{display:flex;flex-direction: column; background:linear-gradient(90deg,#ff7381, #ff6a7a);border-radius:16rpx;color:#fff;position:relative;margin-bottom:24rpx}
.coupon-card.gray{background:#e5e5e5;color:#666}
.card-left{width:220rpx;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:2rpx solid rgba(255,255,255,.5)}
.points{font-size:80rpx;line-height:1}
.points-unit{font-size:28rpx;margin-top:12rpx}
.card-right{flex:1;padding-left:28rpx;display:flex;flex-direction:column;justify-content:center}
.title{font-size:40rpx;font-weight:600}
.expire{font-size:26rpx;opacity:.95;height:64rpx;line-height:64rpx;flex:3}
.btn{border: 1px solid #ff4b5a;flex:1;height:64rpx;line-height:64rpx;padding:0 28rpx;background:#fff;color:#ff4b5a;border-radius:100rpx;font-size:28rpx}
.empty{padding:120rpx 0;text-align:center;color:#999}
</style>

