<template>
	<div class="app-content">
		<div class="banner-wrap">
			<div class="banner-img">
				<img :src="`${constant.imgUrl}/retail/official/pay-banner.png`" alt />
				<div class="meal-det">
					<div class="meal-title">{{ detail.name }}</div>
					<div class="meal-introduce">{{ detail.introduce }}</div>
				</div>
			</div>
			<div class="flex-center-between app-size-28">
				<div>软件周期</div>
				<div>1年</div>
			</div>
		</div>
		<!-- list -->
		<div class="module-wrap">
			<div class="module-tit">主要功能</div>
			<div class="module-det">
				<div class="list-wrap">
					<div class="list" v-for="(item, index) in funcitonData" :key="index">
						<span :class="{ 'app-color-3' : !item.has}">{{ item.name }}</span>
						<i class="iconfont" :class="[item.has ? 'icondagou' : 'iconguanbi']"></i>
					</div>
				</div>
			</div>
		</div>
		<!-- buttom -->
		<div class="page-btn app-footer">
			<div class="flex-center">
				<span>合计</span>
				<span class="app-price">
					<span>￥</span>
					<span class="app-size-40">{{ detail.price }}</span>
				</span>
			</div>
			<button class="admin-button-com middle blue" @click="wxPay">支付</button>
		</div>
	</div>
</template>

<script>
// import { getShopUser } from '@/utils/auth'
import wexinPay from '@/utils/pay/wxPay'
import { getMealDet, renewWxPay } from '@/api/official'
export default {
	name: 'pay-page',
	data() {
		return {
			constant: this.$constant,
			detail: {},
			funcitonData: []
		}
	},
	onLoad() {
		// if (!this.$util.isLogin()) {
		// 	getShopUser()
		// 	return false
		// }
		// this.init()
	},
	methods: {
		init() {
			this.$util.getCheckLogin().then(res => {
				if (res) {
					this._getMealDet()
				}
			})
		},
		_getMealDet() {
			getMealDet({ id: 1 }).then(res => {
				if (this.$util.isEmpty(res.data)) return false
				this.detail = res.data.detail
				this.funcitonData = res.data.function
			})
		},
		wxPay() {
			renewWxPay({ id: this.detail.id }).then(res => {
				wexinPay(res.data, this.paySuccess, this.payFail)
			})
		},
		// 支付成功
		paySuccess() {
			// alert('支付成功!')
			this.$util.pageTo({
				url: '/official/callback',
				type: 2,
				query: {
					pagestatus: 2
					// orderSn: this.option.orderSn,
					// payDiscountPrice: res.data.discountAmount
				}
			})
		},
		payFail() {
			this.$msg('支付失败，请重新支付！')
		}
	}
}
</script>

<style lang='scss' scoped>
	.app-content {
		background-color: #fff;
	}
	.banner-wrap {
		padding: 32px;
		width: calc(100% - 64px);
		border-bottom: 20px solid $backColor;
		.banner-img {
			width: 100%;
			margin-bottom: 6px;
			position: relative;
			.meal-det {
				position: absolute;
				top: 40px;
				left: 30px;
				width: 60%;
				color: #fff;
				.meal-title {
					font-size: 42px;
					font-weight: 600;
					margin-bottom: 28px;
					letter-spacing: 8px;
				}
				.meal-introduce {
					line-height: 40px;
					letter-spacing: 2px;
				}
			}
		}
	}
	// list
	.module-wrap {
		padding: 40px 30px 0;
		.module-tit {
			font-size: 28px;
			font-weight: 600;
			margin-bottom: 24px;
		}
		.module-det {
			.list-wrap {
				border: 2px solid #f9f9f9;
				border-top: none;
				.list {
					@include disFlex(center, space-between);
					padding: 20px 26px;
					border-top: 2px solid #f9f9f9;
					&:nth-child(odd) {
						background-color: #eee;
					}
					.iconfont {
						font-size: 30px;
					}
					.icondagou {
						color: $mainColor;
					}
					.iconguanbi {
						font-size: 24px;
						color: $fontColor3;
					}
				}
			}
		}
	}
	// button
	.page-btn {
		width: calc(100% - 60px);
		@include disFlex(center, space-between);
		padding: 0 30px;
		.app-price {
			margin-bottom: 8px;
			margin-left: 4px;
		}
		.red {
			width: 270px;
		}
		.admin-button-com {
			width: 200px;
			font-size: 32px;
		}
	}
</style>
