<template>
	<view class="page">
		<block v-if="isdata">
			<view class="u-pa1 fix-titlenview-trans">
				<view class="m-banner-ad"><image :src="cardInfo.card_type_image" style="width: 100%;height: 100%;"></image></view>
				<view class="m-activity-info">
					<view class="m-activity-title">
						<label>{{ cardInfo.card_type_name }}</label>
					</view>
					<view class="m-activity-price">
						<view>
							<label>{{ __('￥') }}{{ number_format(cardInfo.card_type_prize, 2) }}</label>
							<label  style="padding:0rpx 30rpx;color:#888;">{{ __('剩余使用次数') }}   {{ cardInfo.not_num }}</label>
						</view>
					</view>
				</view>
				<uni-collapse :accordion="true" style="margin:20rpx 0rpx;background-color: #ffffff;" v-if="(info_id > 0  && cardInfo.card_write_code)">
					<uni-collapse-item title="使用记录" :show-animation="true">
						<view class="m-RichText">
							<view class="m-code" v-for="(code, index) in cardInfo.items" :key="index">
								<view>{{ code.card_write_code }}</view>
								<view v-if="code.card_is_use == 1" style="color:#717171">{{ __('已使用') }}</view>
								<view v-if="code.card_is_use == 0" style="color:#ff4142" :data-code="code.card_write_code" @click="Make">{{ __('使用') }}</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>

				<view class="m-panel m-panel-access m-detail">
					<view class="m-tab">
						<view class="m-navbar">
							<view class="m-navbar-item m-navbar-item-on">{{ __('使用规则') }}</view>
						</view>
					</view>

					<view class="m-RichText" v-if="cardInfo.card_rule"><wxParse :content="cardInfo.card_rule" /></view>
				</view>
				<view style="width:100%;height:100rpx;"></view>

				<view class="u-cleanbox"></view>

				<view class="m-footer-btn" v-if="card_code > 0">
					<view class="m-footer-btn-list">
						<view class="m-footer-btn-item m-cart-total">
							<view>
								{{ __('合计：') }}
								<block v-if="cardInfo.card_type_prize.m">
									<label>{{ __('￥') }}</label>
									<text class="m-total-price">{{ number_format(cardInfo.card_type_prize, 2) }}</text>
								</block>
							</view>
						</view>
					</view>
					<form report-submit="true" @submit="submitinfo">
						<button class="m-footer-btn-main" formType="submit">{{ __('去支付') }}</button>
					</form>
				</view>
			</view>
		</block>

		<view class="m-nullcontent" v-else>
			<view class="m-nullpage-middle">
				<label class="iconfont icon-meiyougengduo"></label>
				<view class="m-null-tip">
					<text>{{ __('亲~什么都没有') }}</text>
				</view>
			</view>
		</view>

		<payment-box :paymentDataDefault="paymentData" :order_id="order_id" ref="paymentBox" @onCancel="onCancel" @onPaid="onPaid" @onFail="onFail"></payment-box>

		<!-- 弹出层 -->

		<view :class="bannerShow ? 'tailfoli' : 'hide'" @click="setHide"><canvas class="m-canvas" canvas-id="qrcode" style="width: 200px;height: 200px;" /></view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

import uniQrcode from '@/components/uni-qrcode/uni-qrcode.vue';

import uQRCode from '@/components/uni-qrcode/uqrcode.js';

import wxParse from '@/components/u-parse/u-parse.vue';
import paymentBox from '../../components/payment-box.vue';

import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';

export default {
	data() {
		return {
			card_code: 0,
			isdata: false,
			cardInfo: {},
			bannerShow: false,
			paymentData: {},
			order_id: '',
			order_price: 0,
			info_id: 0
		};
	},

	components: {
		wxParse,
		paymentBox,
		uniQrcode,
		uniCollapse,
		uniCollapseItem
	},

	computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
	onLoad: function(options) {
		uni.setNavigationBarTitle({
			title: this.__('卡片详情')
		});
		if (options.cid) {
			this.setData({
				card_code: options.cid
			});

			this.getCard();
		} else {
			this.setData({
				info_id: options.fid
			});

			this.getCardInfo();
		}

		// that.$.setNavigationBarTitle({
		// 	title: data.item_row.product_item_name
		// });
	},

	methods: {
		...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

		getCardInfo: function() {
			var that = this,
				params = {
					card_code: that.info_id
				};
			
			that.$.request({
				url: that.Config.URL.card.card_info_get,
				data: params,
				success: function(data, status, msg, code) {
					if (status == 200 && data) {
						that.setData({
							isdata: true,
							cardInfo: data
						});
					} else {
						that.setData({
							isdata: false
						});
						that.$.alert(msg);
					}
				}
			});
		},

		getCard: function() {
			var that = this,
				params = {
					card_code: that.card_code
				};

			that.$.request({
				url: that.Config.URL.card.card_get,
				data: params,
				success: function(data, status, msg, code) {
					if (status == 200 && data) {
						that.setData({
							isdata: true,
							cardInfo: data
						});
						console.log(that.cardInfo);
					} else {
						that.setData({
							isdata: false
						});
						that.$.alert(msg);
					}
				}
			});
		},

		setHide: function() {
			this.setData({
				bannerShow: false
			});
		},

		Make: function(e) {
			var that = this;

			that.setData({
				bannerShow: true
			});



			uQRCode.make({
				canvasId: 'qrcode',
				componentInstance: this,
				text:e.target.dataset.code,
				size: 200,
				margin: 10,
				backgroundColor: '#ffffff',
				foregroundColor: '#000000',
				fileType: 'jpg',
				// correctLevel: uQRCode.errorCorrectLevel.H,
				success: res => {
					//console.log(res);
				},
				fail: error => {
					//console.log(error);
				}
			});
		},

		submitinfo: function(e) {
			var that = this;

			var params = {
				card_id: that.cardInfo.card_type_id
			};
			that.$.request({
				type: 'post',
				url: that.Config.URL.pay.card_fee,
				data: params,
				success: function(data, status, msg, code) {
					if (status == 200) {
						that.setData({
							order_id: data.pay_sn,
							order_price: data.p_amount
						});

						that.gotopay();
					}
				}
			});
		},

		gotopay: function(type_id) {
			var that = this;
			var order_price = that.order_price;
			that.setData({
				order_id: that.order_id,
				paymentData: {
					order_id: that.order_id,
					orderSelMoneyAmount: order_price,
					user_money: that.userInfo.user_money
				}
			});

			this.$refs.paymentBox.show();
			return true;

			var param = {
				order_id: this.order_id,
				openid: this.userInfo.openId,
				/* store_id: this.shopInfo.store_id, */
				typ: 'json',
				payment_channel_code: 'wx_native',
				prepay_flag: 1
			};

			var that = this;

			that.$.request({
				url: this.Config.URL.pay.pay,
				data: param,
				success: function(data, status, msg, code) {
					if (status == 200) {
						that.$.requestPayment({
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: function(n) {
								that.returnUrl(param.order_id);
							},
							fail: function(e) {},
							complete: function(n) {
								n.errMsg == 'requestPayment:cancel' &&
									(that.$.redirectTo('../rechargeorderdetail/rechargeorderdetail?on=' + param.order_id), that.sendMessage(param.order_id, 1));
							}
						});
					} else {
						that.$.alert(msg);
					}
				},

				fail: function(err) {}
			});
		},
		onCancel: function(e) {
			return;
		},
		onPaid: function(e) {
			let that = this;

			that.$.alert('支付成功！', function() {
				that.$refs.paymentBox.cancel();
				//that.InitPage(that.options);

				//that.notice.postNotificationName("RefreshMessage", e)
				setTimeout(function() {
					that.$.gotopage('/member/card/user_list');
				}, 1500);
			});
		},
		onFail: function(e) {
			let that = this;
			that.$.alert('支付失败！');
			//console.log("支付失败：", e)
		}
	}
};
</script>

<style lang="scss">
@import '../../styles/_variables';

.m-coupon-list {
	// margin-top: 36rpx
}

.fix-titlenview-trans {
	background: #f5f6f7;
}

.m-banner-ad {
	width: 100%;
	height: 300rpx;
	background: rgba(0, 0, 0, 0);
	opacity: 1;

	position: relative;
}

.m-activity-info {
	// width: 100%;
	height: 140rpx;
	background: #ffffff;
	opacity: 1;
	padding: 16rpx 24rpx;
}

.m-panel {
	margin-top: 0;
}

.m-activity-title {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 42rpx;
	color: #002951;
	opacity: 1;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-activity-tips {
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 28px;
	color: #002951;
	opacity: 0.6;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-activity-price {
	font-size: 28rpx;
	font-family: Arial;
	font-weight: 400;
	line-height: 28rpx;
	color: #ff4142;
	opacity: 1;
	margin-top: 12rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.m-footer-btn {
	height: 100rpx;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #fff;
	border-top: 1rpx solid #d5d5d5;
	border-radius: 0;
	z-index: 100;
}

.m-footer-btn-main {
	width: 30%;
	height: 100%;
	float: left;
	background-color: $default-skin-bg;
	color: #fff;
	line-height: 100rpx;
	font-size: 32rpx;
	text-align: center;
	border-radius: 0;
}

.m-footer-btn-list {
	width: 70%;
	height: 100%;
	position: relative;
	float: left;
}

.m-footer-btn-item {
	position: relative;
	float: left;
	width: 100%;
	font-size: 24rpx;
	color: #888;
	line-height: 40rpx;
	padding: 15rpx 0;
	box-sizing: border-box;
	height: 100%;
}

.m-cart-total {
	text-align: right;
	padding-right: 20rpx;
}

.m-cart-total text {
	font-size: 36rpx;
	color: $default-skin-bg;
}

.m-cart-total label {
	color: $default-skin-bg;
}

.m-code {
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
}

/* 弹出层形式的广告 */
.uni-banner {
	width: 70%;
	height: 20%;
	position: fixed;
	left: 50%;
	top: 50%;
	border-radius: 10rpx;
	z-index: 99;
	transform: translate(-50%, -50%);
	background: #ffffff;
}

.m-conter {
	width: 100%;
	height: 200rpx;
	margin-top: 20rpx;
}

.m-canvas {
	position: absolute !important; /*重要的一步是设置绝对定位*/
	margin: auto; /*将四周边距都设为auto自动*/
	left: 0; /*离包含元素的距离均设为零*/
	right: 0;
	top: 0;
	bottom: 0;
}

.tailfoli {
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 99;
}

.m-RichText{
	background-color: #ffffff;
}
</style>
