<template>
	<div class="wx-share-wrap">
		<section>
			<div class="invite-info">
				<img :src="avatarImageUrl" />
				<p class="title1">{{ name }}邀请您助力 为他赢大奖</p>
				<p class="title2">领取课程即可助他一臂之力</p>
			</div>

			<div class="page-info">
				<p class="title1">资深医生讲师、精选专业课程</p>
				<p class="title2">已有超过20,000+的医生领取以下课程</p>
				<div class="imgs-wrap">
					<div>
						<img src="../assets/img/ico1.png" />
						<h3>高血压课程</h3>
					</div>
					<div>
						<img src="../assets/img/ico2.png" />
						<h3>糖尿病课程</h3>
					</div>
					<div>
						<img src="../assets/img/ico3.png" />
						<h3>中医课程</h3>
					</div>
					<div>
						<img src="../assets/img/ico4.png" />
						<h3>全科课程</h3>
					</div>
				</div>
			</div>

			<div class="form-info">
				<van-cell-group>
				  <van-field 
				  	v-model="mobile" 
				  	label="联系方式"
				  	placeholder="请输入手机号" 
				  />

				  <van-field
				    v-model="captcha"
				    label="图形验证码"
				    placeholder="请输入"
				  />

				  <van-field
				    v-model="authCode"
				    center
				    clearable
				    label="短信验证码"
				    placeholder="请输入"
				  >
				    <van-button slot="button" size="small" type="primary">发送验证码</van-button>
				  </van-field>
				</van-cell-group>
				<van-button @click="getCourse" slot="button" type="primary">领取课程</van-button>
			</div>
		</section>
	</div>
</template>

<script>
	import { getInviteInfo, getCourseById } from '@/service';
	export default {
		data(){
			return {
				mobile: '18217314361',
				authCode: '1234', // 短信验证码
				captcha: '', // 图形验证码
			}
		},
		async asyncData({ query }){
			const { id, taskId, activityId } = query;
			let avatarImageUrl, name, mobilePhone;
			const res = await getInviteInfo(id);
			if(res.code=='000000'){
				const data = res.data;
				avatarImageUrl = data.avatarImageUrl;
				name = data.name ? data.name : data.mobilePhone;
			}
    	return { 
    		avatarImageUrl, name, mobilePhone, id, taskId, activityId
    	}
		},
		methods: {
			getCourse(){
				const { mobile, authCode, id, taskId, activityId } = this;
				getCourseById({
					mobile, 
					authCode, 
					id, 
					taskId, 
					activityId
				}).then(res=>{
					console.log('领取课程调用===>', res);
					if(res.code=='000000' && res.data){
						// 登记成功 / 领取成功
					}else if(res.code=='000000' && !res.data){
						// 登记失败 / 领取失败
					}else {
						this.$toast(res.message);
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../assets/style/index.less';
</style>
<style lang="less">
@import '../assets/style/revant.less';
</style>