<template>
	<view class="vip-container">
		<view class="vip-info">
			<view class="title">加入AI降临派VIP</view>
			<view class="desc">和我们一起探索AI的技术边界</view>
			<view class="date">
				<span class="oplist" @click="gotoOrderList" v-if="!isIOS">订单记录></span>
				<span v-if="isVIP">会员有效期至: {{ expireTime ? dateFormat(expireTime, 'yyyy-MM-dd') : '-'}}</span>
			</view>
		</view>
		<template v-if="isIOS">
			<view class="vip-info iosview">
				IOS用户若想加入AI降临派，请联系客服。
			</view>
			<view class="btnview">
				<button class="subbtn" open-type="contact" 
					:session-from="chatToken" 
					:send-message-title="'加入AI降临派VIP'"
					:send-message-path="`/pages/about/vip/vip?chatToken=${chatToken}`"
					:show-message-card="true"
				>在线客服</button>
			</view>
		</template>
		<template v-else> 
			<view class="vip-info vip-rights">
				<view class="title-view">
					<view class="tabitem" :class="{active: ctype == 1}" @click="ctype = 1">
						VIP会员权益
					</view>
					<view class="tabitem" :class="{active: ctype == 2}" @click="ctype = 2">
						AI能量包
					</view>
				</view>
				<view class="recharge-types">
					<view class="type-item" v-for="(item, index) in typelist" :class="{active: curIndex === index}" :key="index" @click="changeChargeType(index)">
						<view class="p1">{{ item.typename }}</view>
						<view class="p-now">{{ item.price }}</view>
						<view class="p-op">{{ item.op }}</view>
						<view class="p2" :class="{needScale: ctype == 1}">{{ item.desc }}</view>
					</view>
				</view>
				<view class="list" v-if="ctype == 1">
					<view class="list-item" v-for="(item, index) in list" :key="index">
						{{ item }}
					</view>
				</view>
				<view class="list" v-if="ctype == 2">
					<view class="list-item" v-for="(item, index) in list2" :key="index">
						{{ item }}
					</view>
				</view>
				
			</view>
			<view class="pay-view">
			<view class="pay-btn" @click="handlePay">
				支付
			</view>
			<!-- <view class="paydesc">
				开通即同意 授权付款 相关协议
			</view> -->
		</view>
		
		</template>
	</view>
</template>

<script>
	import { getOrders, payOrder, getUserinfo, getProducts } from '@/api/index.js';
	import { PAY_STATUS, PAY_TYPE } from '@/common/enum.js'
	import { mapState, mapMutations } from 'vuex'
	import { dateFormat } from '@/common/util.js'
	import { times } from 'lodash';
	var app = getApp();
	export default {
		data() {
			return {
				ctype: 1,
				list2: [
					'1、购买AI能量包立刻获得算力。',
					'2、多个AI能量包可重复可叠加购买，算力永不过期。'
				],
				curIndex: 0,
				vipTypes: [
					{ type: PAY_TYPE.MONTHLY, typename: '1个月VIP', op: '￥30', desc: '给程序员买杯咖啡'},
					{ type: PAY_TYPE.SEASONALLY, typename: '3个月VIP', op: '￥90', desc: '请程序员喝个小酒'},
					{ type: PAY_TYPE.YEARLY, typename: '12个月VIP', op: '￥360', desc: '请程序员吃顿大餐'}
				],
				timesTypes: [
					{ type: PAY_TYPE.S_PLUS, typename: '小能量包', op: '￥15', desc: '200点算力'},
					{ type: PAY_TYPE.M_PLUS, typename: '中能量包', op: '￥30', desc: '400点算力'},
					{ type: PAY_TYPE.L_PLUS, typename: '大能量包', op: '￥45', desc: '600点算力'}
				],
				orderList: [],
				page: 1,
				isIOS: app.globalData.isIOS,
				sessionFrom: {
					userId: this.userId,
					chatToken: this.chatToken
				}
				// send-message-title	string	当前标题	否	会话内消息卡片标题，open-type="contact"时有效	1.5.0
				// send-message-path	string	当前分享路径	否	会话内消息卡片点击跳转小程序路径，open-type="contact"时有效	1.5.0
			};
		},
		onLoad(option) {
			if (option.type) {
				this.ctype = option.type
			}
			this.getProducts()
		},
		computed: {
			...mapState(['userId', 'chatToken', 'isVIP', 'expireTime']),
			typelist() {
				if (this.ctype == 1) {
					return this.vipTypes
				} else if (this.ctype == 2) {
					return this.timesTypes
				}
			},
			list() {
				const arr1 = [300, 1000, 5000]
				const arr2 = [10, 30, 120]
				return [
					`1、立即获得${arr1[this.curIndex]}点算力。`, 
					`2、立即获得${arr2[this.curIndex]}次AI绘画插队权益。`,
					'3、每日签到领取20点算力，每月最多可领600点算力。',
					'4、每日签到领取2次AI绘画插队权益，每月最多可领60次绘画插队权益。',
					'5、在高峰时段获得AI智能问答优先回复，使用更顺畅。'
				]
			}
		},
		methods: {
			...mapMutations(['setLoginInfo']),
			dateFormat,
			changeChargeType(index) {
				this.curIndex = index
			},
			gotoOrderList() {
				uni.navigateTo({
					url: '/pages/about/orderlist/orderlist'
				})
			},
			async getProducts() {
				const res = await getProducts()
				if (res.code === 0) {
					const vips = []
					res.data.vip.map((m, index) => {
						const price = `￥${parseFloat((m.amount / 100).toFixed(2))}` 
						vips[index] = {...this.vipTypes[index], ...m, price}
					})
					this.vipTypes = vips;
					const plus = []
					res.data.plus.map((m, index) => {
						const price = `￥${parseFloat((m.amount / 100).toFixed(2))}` 
						plus[index] = {...this.timesTypes[index], ...m, price}
					})
					this.timesTypes = plus
				}
			},
			async updateUserinfo() {
				const res = await getUserinfo()
				if (res.code === 0) {
					this.setLoginInfo(res.data)
				}
			},
			async getOrderList() {
				const res = await getOrders(this.page)
				if (res.code === 0) {
					this.orderList = res.data
				}
			},
			async handlePay() {
				const type = this.typelist[this.curIndex].type
				const res = await payOrder(type)
				const that = this
				if (res.code === 0) {
					console.log(res.data)
					// "appId": "wx9f2cdf723bb0c195",
					// "nonceStr": "dIWlHJLJWwQHQMBC8i2WrG6TFzhdp4Xt",
					// "packageVal": "prepay_id=wx072237159322644ee8c81c999602370000",
					// "signType": "RSA",
					// "paySign": "XYon0koWy+Yhxjk31nqdtCdQE1820Yq23olxEy084U7h7xgh7xWmmxFAdCZgHSYHjlx7fMbtwkcQAFIBJxhsZfi+AJqI1Yi/flqq4imQg77tHDvaAw9fRWh9BgC8bE+M+qxMQsn/PjAfdr1igrkki/4/xz2yR3gYHY3imWN8PXrVCkncNAtr63MAuyMAZl7soTb//8XORylMB3qA9xXcKGz/LsoQu/T//i0OuEoUPutI4EoswpHjyl7vz+s2Z7QQPA9CY4AD7m+mJRmRGABScDr5rycLtwJbSQki6Fsmap36GxPO2xODHqr++03hfFgzjnSpGdAOdrjv2DfEX9bSxw==",
					// "timeStamp": "1678199836"
					const { nonceStr, packageVal, signType, paySign, timeStamp} = res.data
					wx.requestPayment({
						timeStamp,
						nonceStr,
						package: packageVal,
						signType,
						paySign,
						success (res) { 
							wx.showToast({
								title: `支付成功！`,
								icon: 'success',
								duration: 2000
							})
							that.updateUserinfo()
						},
						fail (res) {
							console.log(res)
							// wx.showToast({
							// 	title: `敬请期待！`,
							// 	icon: 'success',
							// 	duration: 2000
							// })
						}
					})
				}
			}
			
		}
	}
</script>

<style lang="less" scoped>
.vip-container {
	padding: 30rpx 30rpx;
	background-color: @mainBg;
	height: 100%;
	color: #EDEDED;
	overflow: auto;
	.iosview {
		margin-top: 30rpx;
		color: @fontColor;
	}
	.btnview {
		margin-top: 300rpx;
		padding: 60rpx;
		.subbtn {
			.combtn(32rpx, 100rpx);
		}
	}
	
	.vip-info {
		padding: 20rpx 30rpx;
		background-color: lighten(@mainBg, 10%);
		border-radius: 12rpx;
		.title {
			color: @mainColor;
			font-size: 36rpx;
			font-weight: 600;
		}
		.desc {
			font-size: 28rpx;
			padding-top: 4rpx;
		}
		.date {
			padding-top: 24rpx;
			display: flex;
			justify-content: space-between;
			.oplist {
				color: @mainColor;
			}
		}
	}
	
	.vip-rights {
		margin-top: 30rpx;
		padding-bottom: 40rpx;
		height: 750rpx;
		box-sizing: border-box;
		
		.title-view {
			display: flex;
			.tabitem {
				line-height: 72rpx;
				flex: 1;
				color: @fontColor;
				font-size: 32rpx;
				font-weight: 600;
				text-align: center;
				position: relative;
				&.active {
					color: @mainColor;
				}
				&:last-child::after {
					content: "";
					height: 28rpx;
					left: 0;
					top: 22rpx;
					width: 1px;
					background-color: #EDEDED;
					position: absolute;
				}
			}
		}
		.list {
			padding: 20rpx 0;
			.list-item {
				padding: 4rpx 0;
			}
		}
		.recharge-types {
			padding-top: 24rpx;
			display: flex;
			.type-item {
				flex: 1;
				border: 1px solid @mainColor;
				background-color: transparent;
				border-radius: 8rpx;
				text-align: center;
				font-size: 24rpx;
				padding: 20rpx 0;
				// font-weight: 600;
				&:not(:last-child) {
					margin-right: 20rpx;
				}
				&.active {
					color: #fff;
					background-color: #32715f;
				}
				.p1 {
					font-size: 28rpx;
				}
				.p-now {
					font-weight: 600;
					font-size: 48rpx;
					line-height: 88rpx;
				}
				.p-op {
					font-size: 28rpx;
					text-decoration: line-through;
				}
				.p2.needScale {
					transform: scale(0.9);
				}
			}
		}
	}
	
	.pay-view {
		position: fixed;
		padding: 20rpx 0;
		bottom: 80rpx;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
	
		.pay-btn {
			width: 320rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: @mainColor;
			border-radius: 8rpx;
			color: #fff;
			font-size: 32rpx;
		}
		.paydesc {
			text-align: center;
			font-size: 24rpx;
			padding: 10rpx 0;
		}
	}
	
}
</style>
