<template>
	<view class="com-renew-form">

		<view class="renew-form">
			<view class="renew-top"> 
				<view class="renew-top-name">
				套餐订购
				</view>
			</view>

			<view class="renew-tips">
				<view class="text">您当前要订购的是<text class="txt">{{courseInfo.name}}</text>套餐：</view>
			</view>

			<view class="renew-list">

				<view class="list-items">

					<block v-for="(it,index) in packageList">
						<view class="item " :class="activeIndex==index?'actived':''" @click="onPickLeve(index)">
							<view class="tips">{{it.name}}</view>
							<view class="item-img">
							   <image :src="it.icon" class="package-img"></image> 
							</view>
							<view class="item-price">
								<view class="price">
									<text class="sign">￥</text>{{it.salePrice}}
								</view>
							</view>

							<view class="active" v-if="activeIndex==index">
								<uni-icons type="checkbox-filled" size="30"></uni-icons>

							</view>
						</view>

					</block>




				</view>


			</view>
			<view class="renew-btns">
				<button class="btn-pay" @click="onBuyOrder">立即支付</button>
			</view>
		</view>

		<view class="letter"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "RenewForm",
		emits:['onCloseRenew'],
		props: {
			packageList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			courseInfo:{
				type:Object,
				default:()=>{
					return null;
				}
			},
		},
		watch: {
			'packageList': {
				handler(newVar, oldVar) {
					console.log("newVar", newVar);

				},
				deep: true,
				immediate: true,
			}
		},
		data() {
			return {
				activeIndex: 0,
			};
		},
		computed: {
			...mapState(['systemInfo', 'store_id', 'userInfo']),
		},
		onShow() {

		},
		methods: {
			onPickLeve(e) {
				this.activeIndex = e;
			},

			onBuyOrder(e) {
				let _this = this;
				let packageId = _this.packageList[_this.activeIndex].id;
				let par = { 
					package_id:packageId,
					user_id: _this.userInfo.id,
					course_id:_this.courseInfo.id,
					store_id:_this.store_id,
					pay_type: 1,
				}
				_this.$http.request('fitness/addCourseOrder', {
					...par
				}, "", "", true).then(res => {

					if (res.code == '200') {
						// #ifdef MP-WEIXIN
						wx.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: (res) => { 
								uni.showToast({
									title:'您已支付成功,现在可以直接提交预约啦',
									icon:'success',
									success: (e) => {
										_this.$emit("onCloseRenew");
									}
								}) 
							},
							fail: (res) => { 
								uni.showToast({
									title:'支付失败',
									icon:'error',
									success: (e) => {
										_this.$emit("onCloseRenew");
									}
								})
							}
						})
						// #endif
					}  
				}).catch(err => {})
			},

		}
	}
</script>

<style lang="scss">
	@import './FitPackageForm.scss'
</style>