<template>
	<view class="couponDetails" :style="{height:phoneHight}">
		<far-bottom></far-bottom>
		<view class="coupons">
			<view class="couponsImg">
				<image :src="detailInfo.logo" />
			</view>
			<view class="couponsTitle">
				<view>
					<span>{{ detailInfo.storename }}</span>
				</view>
				<view>
					<span>{{ detailInfo.title }}</span>
				</view>
				<view>
					<span>有效期至{{ detailInfo.endtime }}</span>
				</view>
				<view>
					<span>{{ detailInfo.sub_title }}</span>
				</view>
			</view>
			<view class="couponsFloat">
				<view></view>
				<view></view>
			</view>
			<view class="couponsBody">
				<view class="qrcodeImg">
					<image :src="detailInfo.url" />
				</view>
				<view class="qrCodes" v-if="detailInfo.code_list.length !== 0">
					<view class="qrCodesPackage">
						<view v-for="(item, index) in detailInfo.code_list">
							<span>
								消费码{{ index + 1 }}：
								<span>{{ item }}</span>
							</span>
						</view>
					</view>
				</view>
				<view class="navButton" v-if="detailInfo.is_pwd == 1" @click="goOrderWrite">
					<span>密码核销</span>
					<image :src="imgfixUrls + 'merchant/right.svg'" />
				</view>
				<view class="navButton1" v-if="detailInfo.is_pwd == 1" @click="descriptionShow = true">
					<span>使用说明</span>
					<image :src="imgfixUrls + 'merchant/right.svg'" />
				</view>
				<view class="navButton" v-if="detailInfo.is_pwd == 0" @click="descriptionShow = true">
					<span>使用说明</span>
					<image :src="imgfixUrls + 'merchant/right.svg'" />
				</view>
			</view>
		</view>

		<!-- 填充层 -->
		<view class="full"></view>
		<!-- 填充层 -->

		<PopManager :show="descriptionShow" @clickmask="closeDescription">
			<view class="descriptionView">
				<view class="descriptionPackage">
					<view class="descriptionTitle"><span>使用说明</span></view>
					<scroll-view class="descriptionBody" scroll-y>
						<rich-text :nodes="detailInfo.description" class="desText"></rich-text>
					</scroll-view>
				</view>
			</view>
		</PopManager>
	</view>
</template>

<script>
	import PopManager from '@/components/template/PopManager';

	import App from '@/common/js/app.js';

	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif

	export default {
		components: {
			PopManager
		},
		data() {
			return {
				phoneHight: null,
				id: null,
				detailInfo: {},
				descriptionShow: false,
				codeShow: false,
				verkey: '',
				order_id: null,
			};
		},
		onLoad: function(option) {
			let _this = this;
			_this.id = option.id;
			_this.order_id = option.order_id;

			uni.getSystemInfo({
				success(res) {
					_this.phoneHight = res.windowHeight + 'px';
				}
			});
			_this.init();
		},
		methods: {
			init() {
				let _this = this;
				_this.getDetailInfo();
			},
			goOrderWrite() {
				let _this = this
				App.navigationTo({
					url: 'pages/mainPages/orderWrite/orderWrite?plugin=coupon&id=' + _this.order_id
				})
			},
			closeCode() {
				let _this = this;
				_this.codeShow = false;
			},
			// 获取优惠卷详细信息
			getDetailInfo() {
				let _this = this;
				let data = {
					id: _this.id,
					order_id: _this.order_id
				};
				App._post_form('&p=wlcoupon&do=detail', data, res => {
					_this.detailInfo = res.data;
				});
			},
			closeDescription() {
				let _this = this;
				_this.descriptionShow = false;
			}
		}
	};
</script>

<style lang="less" scoped>
	.codeView {
		width: 600upx;
		background: #ffffff;
	}

	.codeViewPackage {
		padding: 30upx;
	}

	.codeInput {
		padding: 30upx;
		background: rgba(248, 248, 248, 1);
		border-radius: 10upx;

		>input {
			font-size: 24upx;
			lor: rgba(51, 51, 51, 1);
		}
	}

	.codeButton {
		height: 80upx;
		width: 400upx;
		margin: 20upx auto 0 auto;
		background: rgba(255, 68, 68, 1);
		border-radius: 45upx 45upx 45upx 45upx;
		text-align: center;

		>span {
			line-height: 80upx;
			font-size: 28upx;

			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
	}

	.desText {
		font-size: 24upx;
		color: rgba(51, 51, 51, 1);
	}

	.descriptionBody {
		margin-top: 20upx;
		height: 400upx;
	}

	.descriptionTitle {
		text-align: center;

		>span {
			font-size: 30upx;


			color: rgba(51, 51, 51, 1);
		}
	}

	.descriptionView {
		width: 600upx;
		background: #ffffff;
	}

	.descriptionPackage {
		padding: 30upx;
	}

	page {
		background: rgba(66, 71, 74, 1);
		overflow-x: hidden;
	}

	.couponDetails {
		border: 1upx solid rgba(0, 0, 0, 0);
		font-size: 0;
		background: rgba(66, 71, 74, 1);
	}

	.coupons {
		margin: 70upx auto 0 auto;
		width: 656upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.couponsImg {
		margin: auto;
		width: 80upx;
		height: 80upx;
		border: 4upx solid rgba(255, 255, 255, 1);
		overflow: hidden;
		border-radius: 50%;
		position: relative;
		bottom: 40upx;

		>image {
			width: 80upx;
			height: 80upx;
		}
	}

	.couponsTitle {
		padding-bottom: 45upx;
		border-bottom: 1upx dashed rgba(238, 238, 238, 1);

		>view:nth-child(1) {
			>span {
				font-size: 24upx;


				color: rgba(51, 51, 51, 1);
			}
		}

		>view:nth-child(2) {
			margin-top: 30upx;

			>span {
				font-size: 56upx;

				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}
		}

		>view:nth-child(3) {
			margin-top: 30upx;

			>span {
				font-size: 24upx;


				color: rgba(153, 153, 153, 1);
			}
		}

		>view:nth-child(4) {
			margin-top: 30upx;

			>span {
				font-size: 35upx;


				color: rgba(153, 153, 153, 1);
			}
		}

		>view {
			text-align: center;
		}
	}

	.couponsFloat {
		position: relative;
		bottom: 15upx;
		display: flex;
		justify-content: space-between;

		>view:nth-child(1) {
			margin-left: -15upx;
		}

		>view:nth-child(2) {
			margin-right: -15upx;
		}

		>view {
			width: 30upx;
			height: 30upx;
			background: #42474a;
			border-radius: 50%;
		}
	}

	.qrcodeImg {
		margin: 20upx auto 0 auto;
		width: 342upx;
		height: 342upx;
		border-radius: 10upx;
		overflow: hidden;

		>image {
			width: 342upx;
			height: 342upx;
		}
	}

	.qrCodes {
		margin: 10upx auto 0 auto;
		width: 330upx;
		background: rgba(248, 248, 248, 1);
		border-radius: 10upx;
	}

	.qrCodesPackage {
		padding: 30upx 40upx;

		>view:nth-child(1) {
			margin-top: 0;
		}

		>view {
			margin-top: 25upx;

			>span {
				font-size: 24upx;


				color: rgba(151, 149, 159, 1);

				>span {
					color: #333333;
				}
			}
		}
	}

	.navButton1 {
		border-top: 1upx solid rgba(238, 238, 238, 1);
		height: 95upx;
		display: flex;
		justify-content: space-between;
		padding: 0 30upx;

		>span {
			line-height: 95upx;
			vertical-align: middle;
			font-size: 28upx;


			color: rgba(51, 51, 51, 1);
		}

		>image {
			margin-top: 30upx;
			vertical-align: middle;
			width: 10px;
			height: 18px;
		}
	}

	.navButton {
		margin-top: 40upx;
		border-top: 1upx solid rgba(238, 238, 238, 1);
		height: 95upx;
		display: flex;
		justify-content: space-between;
		padding: 0 30upx;

		>span {
			line-height: 95upx;
			vertical-align: middle;
			font-size: 28upx;


			color: rgba(51, 51, 51, 1);
		}

		>image {
			margin-top: 30upx;
			vertical-align: middle;
			width: 10px;
			height: 18px;
		}
	}

	.full {
		width: 750upx;
		height: 75upx;
	}
</style>
