<template>
	<view class="container">
		<radio-group name="coupon">
			<view v-for="(item,index) in coupons" :key="index">
				<view class="coupon-bg"
					:style="{borderColor:selectedIndex===index?'#b60001':'#E4E5E9',background: (isAvailable(item) || !chooseCoupon)?'#fff':'#f6f7f8',pointerEvents:(isAvailable(item) || !chooseCoupon)?'all':'none'}"
					@click="choose(index)">

					<view class="icon">
						<image style=" position: absolute;width: 100%;height: 100%;" :src="web('icon_coupon.png')">
						</image>
						<view
							style="position:absolute;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
							￥{{item.discountAmount}}
						</view>
					</view>
					<view class="info">
						<view class="name">
							{{item.name}}
						</view>
						<view class="desc">
							{{$t('index.available-platform')}}：{{item.typeName}}
						</view>
						<view class="desc">
							{{$t('index.expiry-date')}}：{{item.startValidDate}}~{{item.endValidDate}}
						</view>
					</view>
					<view class="right" :style="{width:width + 'rpx'}">
						<label style="pointer-events: none;" v-if="chooseCoupon">
							<radio :checked="selectedIndex===index" :value="JSON.stringify(item)" />
						</label>
						<view v-if="!chooseCoupon" class="btn-get" :class="[item.isPossess=='T'?'gray':'red']"
							@click.stop="couponGet(item)">
							{{ item.isPossess=='T'?$t('index.got'):$t('index.get')}}
						</view>
					</view>
				</view>
			</view>

		</radio-group>

		<view v-if="chooseCoupon" class="btn" :class="[ (selectedIndex===''&&chooseCoupon)?'disable':'']"
			@click="submitEvent">
			<view>
				{{$t('index.sure')}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUnusedCoupons,
		getCouponsList,
		couponGet
	} from '@/config/api.js'
	import {
		web
	} from '../../utils/util'
	export default {
		data() {
			return {
				coupons: [],
				width: 71,
				selectedIndex: '',
				chooseCoupon: false
			}
		},
		methods: {
			web(name) {
				return web(name)
			},
			async getUnusedCoupons() {
				const {
					content
				} = await getUnusedCoupons()
				this.coupons = [...content.content]

			},
			async getCouponList() {
				const {
					content
				} = await getCouponsList()
				this.coupons = [...content.content]
			},
			isAvailable(item) {
				if (!this.chooseCoupon) {
					return true
				}
				let date = Date.now()
				let start = new Date(item.startValidDate)
				let end = new Date(item.endValidDate)

				if (date < start.getTime()) {
					return false
				}
				if (date > end.getTime() + 24 * 3600 * 1000) {
					return false
				}
				return true
			},
			choose(index) {
				if (this.selectedIndex === index) {
					this.selectedIndex = ""
				} else {
					this.selectedIndex = index
				}
			},
			couponGet(item) {
				if (item.isPossess == 'F') {
					couponGet({
						couponId: item.id
					}).then(res => {
						item.isPossess = 'T'
					})
				}
			},
			submitEvent() {
				let coupon = this.coupons[this.selectedIndex]
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.coupon = coupon
				uni.navigateBack()
			}
		},
		onLoad(options) {
			if (options.type == 'choose') {
				uni.setNavigationBarTitle({
					title: this.$t('index.choose-coupons')
				})
				this.getUnusedCoupons()
				this.width = 71
				this.chooseCoupon = true
			} else {
				this.width = 152
				uni.setNavigationBarTitle({
					title: this.$t('index.coupon')
				})
				this.getCouponList()
				this.chooseCoupon = false
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 60rpx 40rpx 20rpx 40rpx;
		background: #fff;

	}

	.coupon-bg {
		height: 180rpx;
		margin-bottom: 64rpx;
		display: flex;
		align-items: center;
		border: 1px solid #E4E5E9;
	}

	.icon {
		position: absolute;
		width: 186rpx;
		height: 180rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 32rpx;
	}

	.info {
		position: relative;
		margin-left: 186rpx;
		padding-left: 28rpx;
		flex: 1;

		.name {
			font-weight: 300;
			font-size: 28rpx;
			color: #222222;
			line-height: 50rpx;
		}

		.desc {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			line-height: 40rpx;
		}
	}

	.right {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn {
		width: 656rpx;
		height: 94rpx;
		line-height: 96rpx;
		font-size: 30rpx;
		background: #B60001;
		border-radius: 0px 0px 0px 0px;
		display: flex;
		color: white;
		justify-content: center;
	}

	.disable {
		background: #d9d9d9;
		pointer-events: none;
		color: #222222;
	}

	.btn-get {
		display: flex;
		width: 144rpx;
		height: 60rpx;
		line-height: 60rpx;
		justify-content: center;
		font-size: 24rpx;
		border-radius: 30rpx;
	}

	.gray {
		background: #d9d9d9;
		color: #222222;
	}

	.red {
		background: #B60001;
		color: white;
	}
</style>