<template>
	<div class="wx-share-result">
		<section>
			<div class="res-wrap">
				<img src="../assets/img/resimg0.png">
				<h1>{{statusTxt}}</h1>
				<h3>登录云鹊医APP立即开始学习</h3>
			</div>
			
			<div class="btn-app down-app" @click="downApp(1)">下载APP</div>
			<div class="btn-app has-app" @click="downApp(2)">已有APP</div>

			<div class="line"></div>
			
			<div class="more-course">
				<header>更多精彩好课推荐</header>
				<div class="course-list">
					<div class="course-item" @click="goLink(1)">
						<div class="course-txt">
							<h1>高血压系列课程</h1>
							<h3>《高血压的发病机制》等总计4门课程</h3>
						</div>
						<div class="course-img"><img src="../assets/img/resimg1.png"></div>
					</div>

					<div class="course-item" @click="goLink(2)">
						<div class="course-txt">
							<h1>糖尿病系列课程</h1>
							<h3>《胰岛素的选择和管理》等总计4门课程</h3>
						</div>
						<div class="course-img"><img src="../assets/img/resimg2.png"></div>
					</div>

					<div class="course-item" @click="goLink(3)">
						<div class="course-txt">
							<h1>中医系列课程</h1>
							<h3>《慢性胃炎的中医治疗》等总计3门课程</h3>
						</div>
						<div class="course-img"><img src="../assets/img/resimg3.png"></div>
					</div>

					<div class="course-item" @click="goLink(4)">
						<div class="course-txt">
							<h1>全科系列课程</h1>
							<h3>《胸痛原因待查》等总计3门课程</h3>
						</div>
						<div class="course-img"><img src="../assets/img/resimg4.png"></div>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	import { wxShare } from '@/configs/wxShare';
	export default {
		// asyncData({ query }){
		// 	const { status } = query; // 上个页面传递过来领取结果， false 为已领取， true 为领取成功
		// 	const statusTxt = (status=='true') ? '领取成功' : '您已领取';
		// 	return {
		// 		statusTxt
		// 	}
		// },
		data(){
			return {
				shareObj: wxShare,
				statusTxt: ''
			}
		},
		mounted(){
			if(this.$route.query.status.toString()=='true'){
				this.statusTxt = '领取成功';
			}else{
				this.statusTxt = '您已领取';
			}
  		document.querySelector('body').setAttribute('style', 'background: "";');
  		// document.querySelector('body').setAttribute('style', 'overflow-x: hidden;');
  		// 微信分享
	   	this.shareObj.shareUrl = window.location.href;
	    this.$picaWxShare({
	      // baseUrl: BASE_URL[process.env.NUXT_ENV_APP],
	      baseUrl: 'https://test1-sc.yunqueyi.com',
	      type: 15,
	      authUrl: this.shareObj.shareUrl,
	      isDebug: false,
	      jsApiList: [
	        'onMenuShareTimeline',
	        'onMenuShareAppMessage'
	      ]
	    },(wx)=>{
	      const title = this.shareObj.title1;
	      const desc = this.shareObj.title2;
	      const link = window.localStorage.getItem('shareUrl') || window.location.href;
	      const imgUrl = this.shareObj.shareImageUrl;
	       // 分享给朋友
	      wx.onMenuShareAppMessage({
	        title,desc,link,imgUrl
	      });
	      // 分享到朋友圈
	      wx.onMenuShareTimeline({
	        title,desc,link,imgUrl
	      });
	    })
		},
		methods: {
			downApp(id){
				if(id==1){
					this.$sendBuriedData({
		        component_tag: `310#310001`
		      });
				}else{
					this.$sendBuriedData({
		        component_tag: `310#310002`
		      });
				}
				// 延迟跳转以防埋点未发送成功页面就跳转了
				setTimeout(()=>{
					window.location.href = 'https://android.myapp.com/myapp/detail.htm?apkName=com.picahealth.yunque&ADTAG=mobile';
				}, 800);
			},
			goLink(id){
				let link = '';
				if(id==1){
					link = 'https://phome.yunqueyi.com/template_v2/?id=609';
					this.$sendBuriedData({
		        component_tag: `310#310003`
		      });
				}else if(id==2){
					link = 'https://phome.yunqueyi.com/template_v2/?id=610';
					this.$sendBuriedData({
		        component_tag: `310#310004`
		      });
				}else if(id==3){
					link = 'https://phome.yunqueyi.com/template_v2/?id=611';
					this.$sendBuriedData({
		        component_tag: `310#310005`
		      });
				}else if(id==4){
					link = 'https://phome.yunqueyi.com/template_v2/?id=612';
					this.$sendBuriedData({
		        component_tag: `310#310006`
		      });
				}
				// 延迟跳转以防埋点未发送成功页面就跳转了
				setTimeout(()=>{
					window.location.href = link;
				}, 800);
			}
		}
	}
</script>

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