<template>
	<div class="app-content coupon-list">
		<!-- <div class="tabs-wrap"> -->
		<app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="33.3333%" />
		<!-- </div> -->
		<div class="list-wrap" :class="{'expired' : tabIndex == 2}">
			<block v-if="!$util.isEmpty(list.data)">
				<div class="list" v-for="(item, index) in list.data" :key="index">
					<div class="list-img">
						<!-- 已过期 -->
						<template v-if="tabIndex == 2">
							<img :src="`${constant.imgUrl}/retail/coupon/expired.png`" alt mode="widthFix" />
						</template>
						<template v-else>
							<img :src="`${constant.imgUrl}/retail/coupon/bg.png`" alt mode="widthFix" />
						</template>
					</div>
					<!-- 列表 -->
					<div class="list-det">
						<div class="list-det-left">
							<div class="price-wrap">
								<span>￥</span>
								<span class="price">{{ item.amount }}</span>
							</div>
							<div class="full-reduc app-size-28">满{{ item.miniCost }}可使用</div>
						</div>
						<div class="list-det-right">
							<div class="coupon-message">
								<div class="app-color-2">优惠券</div>
								<div>适用：全品类</div>
								<div>有效至：{{ item.deadline | formatTime('YYYY-MM-DD') }}</div>
							</div>
							<!-- 未使用 -->
							<template v-if="tabIndex == 0">
								<button class="button-com red" @click="goUserFn">去使用</button>
							</template>
							<!-- 已使用 -->
							<template v-else-if="tabIndex == 1">
								<div class="icon-wrap">
									<i class="iconfont iconyishiyong"></i>
								</div>
							</template>
							<!-- 已过期 -->
							<template v-else>
								<div class="icon-wrap">
									<i class="iconfont iconyiguoqi"></i>
								</div>
							</template>
						</div>
					</div>
				</div>
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</div>
	</div>
</template>

<script>
import AppTabs from '@/components/plugin/tabs'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import { list } from '@/mixins'
// api
import { getList } from '@/api/coupon'
export default {
	name: 'tabs',
	components: {
		AppTabs,
		AppWrapperEmpty
	},
	mixins: [list],
	data() {
		return {
			constant: this.$constant,
			tabIndex: 0,
			tabs: [
				{
					name: '未使用'
				},
				{
					name: '使用记录'
				},
				{
					name: '已过期'
				}
			]
		}
	},
	onPullDownRefresh() {
		this.resetList()
		this._list().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.moreData == 1) {
			this._list().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	onLoad: function() {
		// this.init()
	},
	methods: {
		async init() {
			this._list()
		},
		_list() {
			return getList({ status: this.tabIndex }).then(res => {
				console.log(res)
				this.completes(res)
			})
		},
		change(e) {
			if (this.tabIndex == e.index) {
				return false
			} else {
				this.tabIndex = e.index
				this.resetList()
				this._list()
			}
		},
		// 去使用
		goUserFn() {
			alert('跳转到哪？')
		}
	}
}
</script>

<style lang="scss" scoped>
	.coupon-list {
		position: relative;
		// .tabs-wrap {
		// 	position: absolute;
		// 	width: 100%;
		// }
		.list-wrap {
			padding: 100px 22px 0;
			.list {
				position: relative;
				margin-bottom: 6px;
				.list-det {
					width: 100%;
					@include disFlex(center, space-between);
					position: absolute;
					top: 0;
					left: 0;
					.list-det-left {
						padding: 30px 0 30px 36px;
						width: 210px;
						color: #fff;
						.price-wrap {
							margin-bottom: 6px;
							font-size: 26px;
							.price {
								font-size: 60px;
								font-weight: bold;
								line-height: 1;
							}
						}
					}
					.list-det-right {
						width: calc(100% - 280px);
						margin-left: 22px;
						@include disFlex(center, space-between);
						padding: 30px 26px 30px 0;
						.coupon-message {
							color: $fontColor3;
							& > div {
								margin: 4px 0;
							}
						}
						.button-com {
							padding-top: 15px;
							padding-bottom: 15px;
						}
						.icon-wrap {
							position: absolute;
							top: 20px;
							right: 20px;
							.iconfont {
								font-size: 128px;
								color: #ffbbcd;
							}
						}
					}
				}
			}
			// 过期
			&.expired {
				.list-det-right {
					.iconfont {
						color: #e5e7ec !important;
					}
				}
			}
		}
	}
</style>
