<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="content"> 
		<view class="top-wrapper"> 
			<view style="padding: 5px 16px"> 
				<view class="list">
				  <view class="list-item"  :class="{ active: active == index }"
						v-for="(item, index) in tabList"
						:key="index"
						@click="handleTab(index)"
				  >
				    <view style="padding: 0 2px;">
						<text>{{ item.name }}</text>
						<text v-if="item.num>0">{{ item.num }}</text>
					</view>
				    <view v-if="active == index" class="line"></view>
				  </view>
				</view>
			</view>
			<scroll-view style="width: 100%;height: 80vh;" @scrolltolower="onScrollTolower" scroll-y="true"> 
				<view class="item-list" v-for="(item, index) in tableList" :key="index" :style="{opacity:(active==1? '1':'0.5')}">
					<view style="width: 100%;display: flex;padding: 10px;color: #666;position: relative;overflow: hidden;">
						<view class="top-left">
							<view :style="{color:(active==1? '#ff5614':'#ff6816')}">￥<text class="amount">{{item.couponAmount}}</text> </view>
							<view class="btn" :style="{background:(active==1? '#ff5614':'#ff6816')}">餐券</view>
						</view>
						<view class="top-right">
							<view style="font-size: 36rpx;font-weight: 600;margin-bottom: 10px;">{{item.couponName}}</view>
							<view style="color: #999;">有效期：{{item.effectDateStart}} - {{item.effectDateEnd}}</view> 
						</view>
						<view style="position: absolute;top:-10px;right:-10px;">
							<image v-if="active==0" style="width: 120rpx;height: 120rpx;" src="../../../static/images/my/notTakeEffect.png"></image>
							<image v-if="active==2" style="width: 140rpx;height: 140rpx;" src="../../../static/images/my/used.png"></image>
							<image v-if="active==3" style="width: 180rpx;height: 120rpx;" src="../../../static/images/my/expired.png"></image>
							<image v-if="active==4" style="width: 120rpx;height: 120rpx;" src="../../../static/images/my/cancellation.png"></image>
						</view>
					</view>
					<view class="item-bottom">
						<view> 限指定食堂可用 </view>
						<view class="btn" @click="checkDetail(item)">详细信息</view>
					</view>
				</view>
				<view style="margin: 20px 0" v-if="tableList.length > 0">
					<u-loadmore :status="status" nomoreText="没有更多数据了" />
				</view>
				<view v-else class="flex justify-center align-center" style="height: 50vh">
					<u-empty icon="../../../static/images/not_order.png" text="暂无数据" textColor="#999" />
				</view>
			</scroll-view> 
			
			<u-popup :show="showDetail" mode="center" bgColor="transparent" @close="close" @open="open">
				<!-- background: transparent;background-image: url('../../../static/images/index/noticeBg.png');background-repeat: no-repeat;background-size: 100% 100%; -->
				<view style="width: 88vw;height: 70vh;background: #fff;">
					<view style="width: 100%;text-align: center;height: 60px;line-height: 60px;font-weight: bold;color: #fe5907;">
						￥<text style="font-size: 48rpx;">{{rowData.couponAmount}}</text> 
					</view>
					<view style="width: 90%;margin: 0 auto;height: 35vh;display: flex;justify-content: center;">
						<image :src="rowData.couponImgUrl" style="width: 100%;height: 100%;" mode="aspectFill"></image>
					</view>
					<view style="width: 90%;margin: 5px auto;padding: 10px;height: 18vh;display: flex;flex-direction: column;justify-content: center;overflow-y: auto;border-top: 1px solid #ccc;color: #000;">
						<view style="margin-bottom: 10px;">食堂： {{rowData.canteenNameStr}}</view>
						<view style="margin-bottom: 10px;">档口： {{rowData.shopstallNameStr}}</view>
						<view style="margin-bottom: 10px;">餐次： {{rowData.intervalNameStr}}</view>
					</view>
					<view style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;">
						<view style="width: 80%;height: 40px;line-height:40px;background:#FE7900;border-radius: 10px;text-align: center;color: #FFF;" @click="showDetail=false">关闭</view>
					</view>
					
				</view>
			</u-popup>
			
			
			
			
		</view>
	</view>
</template>

<script> 
import Tabs from '@/pages/components/Tabs.vue' 
import { couponMobileGroupApi } from '../../../api/mine/index'

export default {
  components: { Tabs }, 
  data() {
    return {
		fontValue:uni.getStorageSync('fontSize') || 8,
		active: 0,
		tabIndex: 0,
		pageNum: 1,
		pageSize: 10,
		total: 0, 
		couponState:'1',
		status: 'loadmore',
		tabList: [{name:'待生效',num:0},{name:'未使用',num:0},{name:'已使用',num:0}, {name:'已过期',num:0},{name:'已作废',num:0}],  
		tableList: [],
		showDetail:false,
		rowData:{}
    }
  }, 
	onLoad() { 
	},
	onShow() {
		this.pageNum=1
		this.getList()
	},
	methods: {  
		// 翻页
		onScrollTolower(){
			console.log(this.tableList.length)
				if(this.total>this.tableList.length){
					this.pageNum++
					this.getList()
				}
		},
		//获取订单列表
		async getList() {
			console.log('获取列表')
			const params = {
				custId: uni.getStorageSync('custId'), 
				current: this.pageNum,
				size: this.pageSize, 
				couponState:this.couponState, 
			} 
			try {
			const res = await couponMobileGroupApi(params)
				console.log('?? ~ getList ~ res:', res)
				if(res.data.notTakeEffect>0){
					this.tabList[0].num = res.data.notTakeEffect
				}
				if(res.data.notUse>0){
					this.tabList[1].num = res.data.notUse
				}
				if(res.data.used>0){
					this.tabList[2].num = res.data.used
				}
				if(res.data.expired>0){
					this.tabList[3].num = res.data.expired
				}
				if(res.data.cancellation>0){
					this.tabList[4].num = res.data.cancellation
				}
				this.total = res.data.page.total; 
				if(this.pageNum==1){
					this.tableList = res.data.page.records
				}else{
					this.tableList.push(...res.data.page.records)
				}
				this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
			} catch (error) {
				console.log(error)
			}
		},
		//翻页
		onReachBottom() {
			console.log('?? ~ onReachBottom ~ ') 
		},  
		handleTab(index) {
		  this.active = index
		  this.changeTab(index) 
		},
		changeTab(index) {
			console.log('?? ~ changeTab ~ index:', index)
			this.tabIndex = index;
			if(index==1){
				this.couponState="2"
			}else if(index==2){
				this.couponState="3"
			}else if(index==3){
				this.couponState="4"
			}else if(index==4){
				this.couponState="5"
			}else{
				this.couponState="1"
			}
			this.pageNum=1;
			this.tableList=[]
			this.getList()
		}, 
		checkDetail(item) {
			console.log('跳转订单详情', item) 
			this.rowData = item
			if(this.active==1){
				this.showDetail = true
			} 
		}, 
		open() {
		  // console.log('open');
		},
		close() {
		  this.showDetail = false
		  // console.log('close');
		}
	},
	// onUnload() {
	// 	uni.switchTab({
	// 	  url: '/pages/index'
	// 	})
	// },
	// onBackPress(e) {
	// 	//e.from === 'backbutton' 说明如果点击的是物理返回键或导航栏的返回键就进行以下操作
	// 	if (e.from === 'backbutton') {
	// 	  //返回值为true 时,表示不执行默认的返回（默认返回上一页），执行自定义的返回
	// 	  uni.switchTab({
	// 	    url: '/pages/index'
	// 	  })
	// 	  //如果要限制必须写成true
	// 	  return true;
	// 	}
	// },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f9fbff;
  // height: 100%;
  height: 95vh;  
	.top-wrapper {
		// padding-top: 4vh; 
		width: 100vw;
		background: #f9fbff;
		height: 95vh;
	}
 
	.item-list {
		padding: 8px;
		background: #fff;
		// opacity: 0.5;
		// background: rgba(0,0,0,0.1);
		border-radius: 8px;
		font-size: 24rpx;
		font-weight: 400;
		margin: 0 10px;
		margin-top: 15px;
		
		.top-left{
			width: 20%;border-right: 1px solid #ccc;text-align: center;
			display: flex;flex-direction: column;align-items: center;
			.amount{
				font-size: 48rpx;font-weight: 600;
			}
			.btn{
				width: 50px;height: 20px;line-height: 20px;font-size: 12px;
				text-align: center;border-radius: 10px;background-color: #666;color: #fff;
			}
		}
		.top-right{
			width: 80%;padding-left: 20px;
		}
		.item-bottom{
			color: #666;font-size: 28rpx;
			width: 100%;height: 40px;padding: 10px;display: flex;align-items: center;justify-content: space-between;
			.btn{
				font-size: 12px;padding: 8rpx 20rpx;display: flex;justify-content: center;align-items: center;
				border-radius: 10px;background-color: #0b60ff;color: #fff;
			}
		}
		// .order-source {
		// 	margin-bottom: 12px;
		// 	font-weight: 500;
		// 	color: #0f274b;
		// }

		// .intervalName {  
		// 	font-size: 24rpx;
		// 	text-align: center;
		// 	margin-left: 10px;
		// 	color: #ff6816;
		// 	border-radius: 1px 1px 1px 1px;
		// 	border: 1px solid #ff6816;
		// 	padding: 0 4px;
		// }

		// .img-cont {
		// 	width: 100%;
		// 	margin: 5px;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	width: 100%; 
		// }
		// .img {
		// 	width: 28%;
		// 	margin: 10rpx;
		// 	display: flex;
		// 	flex-direction: column;
		// 	align-items: center;
		// 		view {
		// 			margin-top: 8px;
		// 			color: #0f274b;
		// 		}
		// }
		// .price {
		// 	width: 20%;
		// 	display: flex;
		// 	flex-direction: column;
		// 	justify-content: center;
		// 	align-items: center;
		// 	color: #0f274b;
		// 	font-weight: 400;
		// 	font-size: 24rpx;
		// }

		// .btn-cont {
		// 	display: flex;
		// 	justify-content: flex-end;
		// 	margin-top: 10px;
		// }
	}
}
.list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;

  .list-item {
	  
    font-weight: 700;
    font-size: 28rpx;
    color: rgba(15, 39, 75, 0.8);
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  .active {
    font-weight: 500;
    font-size: 32rpx;
    color: #0f274b;
    z-index: 9;
  }
  .line {
    width: 36px;
    height: 8px;
    background: linear-gradient(90deg, #ff6816 0%, rgba(255, 104, 22, 0) 100%);
    border-radius: 4px 4px 4px 4px;
    position: absolute;
    bottom: 0px;
  }
}

</style>
