
<template>
	<div class="poster">
		<img class="weixin"  src="../assets/images/poster/weixin.png" v-show="ImgFix" @click="ImgFix = false" />
		<div style="height: 0.9rem;" v-if="sourceType != 3"></div> 
		<div class="page-top" v-if="sourceType != 3">		
			<a @click="goBack()" class="goBack"><img src="../assets/images/my-money/left.png" /></a>
			<i class="name">分销海报</i>
			<i class="text" @click="show = true" v-if=" defaultCity != '' ">{{defaultCity}}</i>
		</div>
		<div class="page-content">
			<img class="poster-img" v-if="imgSrc != ''" :src="imgSrc">
			<button v-if="sourceType != 3" class="create-poster" @click="createImg()">重新生成海报</button>	
		</div>
		
		<popup v-model="show">
	        <div class="picke-address">
	        	<div class="status-btn">
	        		<a class="cel-btn" @click="show = false">取消</a>
	        		<a class="complete-btn" @click="getName()">完成</a>
	        	</div>
	         	<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker>
	        </div>
	    </popup>
	    <div class="Loading-box">
	    	<loading v-model="showLoading" text="loading"></loading>
	    </div>
	</div>
</template>

<script>
	import homeApi from "../models/home-model.js";
	import posterApi from "../models/poster-model.js";
	import { Alert, Toast,Popup,Picker,Loading } from "vux";
	export default {
		data() {
			return {
				show: false,
				imgSrc: "",
				imgUrl: '',
				merchantNo: 2, //商户编号
				isAuthorize: false,
				authorizeSrc : "",
				ImgFix: true,
				defaultCity: '天河区',
				addressData: [],
				addressValue: [],
				no: "",
				sourceType : "",
				showLoading: false,
			};
		},
		components: {
			Toast,
			Popup,
			Picker,
			Loading
		},
		watch: {
			
		},
		methods: {
			getCityName (){
				let name = localStorage.getItem("cityName")||''
			//	console.log(name)
				if(!name){
					this.merchantNo = 2
					this.defaultCity = '天河区'
					return
				}
				let arr = name.split(',')
				this.addressValue = arr
				let cityNameArr = arr[2].split('&')
				let cityName = cityNameArr[1]
				this.defaultCity = cityName || '天河区'
				this.merchantNo = cityNameArr[2] || 2
			},
			getPoster (){
				let merchantNo = this.merchantNo
				posterApi.getPoster(merchantNo).then(res => {
					if ( res.code == 0 ){
						this.authorizeSrc = res.data.oauthUrl || ''
						if ( res.data.hasOAuth == 1 ){
							this.isAuthorize = true
						}
						
		   				if ( res.data.imageUrl ){
		   					this.imgUrl = res.data.imageUrl
		   					this.imgSrc = res.data.imageUrl + "?" + Date.now();
		   				} else {
		   					if ( res.data.hasOAuth == 0 ){
								location.href = res.data.oauthUrl
								return
							} else {							
								this.createPoster()
							}
		   					
		   				}
		   			} else {
						this.$vux.toast.text(res.msg,"middle");
						if ( res.code == 667 ){
							setTimeout(function(){
								location.href = '/mall/web/user/login'
							},3000)
						}
					}
				})
			},
			createPoster (){
				if ( !this.isAuthorize ){
					location.href = this.authorizeSrc
					return;
				}
				this.showLoading = true
				var merchantNo = this.merchantNo
				posterApi.createPoster(merchantNo).then(res => {
					setTimeout(()=>{
						this.showLoading = false
					},500)
					if ( res.code == 0 ){
						this.imgUrl = res.response
		   				this.imgSrc = res.response + "?" + Date.now();
		   			} else {
						this.$vux.toast.text(res.msg,"middle");
						if ( res.code == 666 ){
							setTimeout(function(){
								location.href = '/mall/web/user/login'
							},2000)
						}
					}
				})
			},
			getPoster2 (){				
				posterApi.getPoster2(this.no).then(res => {
					if ( res.code == 0 ){
						this.authorizeSrc = res.data.oauthUrl || ''
						if ( res.data.hasOAuth == 1 ){
							this.isAuthorize = true
						}
						
		   				if ( res.data.imageUrl ){
		   					this.imgUrl = res.data.imageUrl
		   					this.imgSrc = res.data.imageUrl + "?" + Date.now();
		   				} else {
		   					if ( res.data.hasOAuth == 0 ){
								location.href = res.data.oauthUrl
								return
							} else {							
								this.createPoster2()
							}
		   					
		   				}
		   			} else {
						this.$vux.toast.text(res.msg,"middle");
						if ( res.code == 667 ){
							setTimeout(function(){
								location.href = '/mall/web/user/login'
							},2000)
						}
					}
				})
			},
			createPoster2 (){				
				if ( !this.isAuthorize ){
					location.href = this.authorizeSrc
					return;
				}
				var no = this.no
				this.showLoading = true
				posterApi.createPoster2({"couponNo":no}).then(res => {
					setTimeout(()=>{
						this.showLoading = false
					},500)
					if ( res.code == 0 ){
						this.imgUrl = res.response
		   				this.imgSrc = res.response + "?" + Date.now();
		   			} else {
						this.$vux.toast.text(res.msg,"middle");
						if ( res.code == 666 ){
							setTimeout(function(){
								location.href = '/mall/web/user/login'
							})
						}
					}
				})
			},
			getName (){
				let arr = this.addressValue[2].split('&')
				this.defaultCity = arr[1]
				this.show = false
				this.merchantNo = arr[2]
			},
			change (name) {
		      	this.addressValue = name
		    ///  	this.getName()
		   	},
		   	//加载地址
			getAddress (){
		   		homeApi.getAddress().then(res => {
		   			if ( res.code == 0 ){
		   				this.addressData = res.data
		   			} else {
						this.$vux.toast.text(res.msg,"middle");
					}
				});
		   	},
		   	//返回上一页
			goBack() {
				history.go(-1);
			},
			//获取连接上的信息
			getParam(name) {
	            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	            var url = window.location.href;
	            url = window.location.href.substring(url.indexOf("?") + 1, url.length);
	            var r = url.match(reg);
	            if (r != null) return unescape(r[2]);
	            return null;
	        },
			//获取连接上的数据 进行判断
			getNo (){
				
				this.no =  this.getParam("no") 
				this.sourceType = this.getParam("sourceType") 
				this.shareWenXin()
				
				if ( this.sourceType != 3){
					this.getCityName()
					this.getAddress()	
				}
				if ( this.sourceType == 2 ){ //指定优惠券
					this.getPoster2()
				} else if (this.sourceType == 1){ //通过商户默认推荐
					this.getPoster()
				} else if (this.sourceType == 3){
					this.imgSrc = "http://1hjz.3ncto.com.cn" + no + "?" + Date.now();
				}
				
			},
			//点击生成海报按钮
			createImg (){
				if ( this.sourceType == 2 ){
					this.createPoster2()
				} else {
					this.createPoster()
				}
				this.shareWenXin()
			},
			//分享微信
			shareWenXin (){
				var coupon =  this.getParam("no") 
				var sourceType = this.sourceType
				var merchantNo = this.getParam("merchantNo")
				var urls = encodeURIComponent(location.href)
				var imgUrl = encodeURIComponent(this.imgUrl)
				if ( sourceType == 2 ){ //指定优惠券
					this.wxShare({"couponNo":coupon,"source":10,"url":urls,imgUrl:imgUrl})
				} else if( sourceType == 1) { //通过商户默认推荐
					this.wxShare({"merchantNo":merchantNo,"source":10,"url":urls,imgUrl:imgUrl})
				} else if (sourceType == 3){ //通过别人分享
					this.wxShare({"source":40,"url":urls,imgUrl:this.imgUrl})					
				} else {
					this.wxShare({"merchantNo":this.merchantNo,"source":10,"url":urls,imgUrl:imgUrl})
				}
				
			}
		},
		mounted() {
			this.getNo()  
			
		}
	};
</script>

<style>
.poster {
	background:rgba(255,255,255,1);
}
.poster .page-top {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.2rem;
	box-sizing: border-box;
	position: fixed;
	z-index: 10;
}
.poster .page-top .goBack {
	left: 0.2rem;
	position: absolute;
}
.poster .page-top .text {
	right: 0.2rem;
	position: absolute;
}
.poster .page-top i {
	font-style: normal;
	display: flex;
	align-items: center;
    font-size: 0.36rem;
    color: rgba(255,255,255,1);
    letter-spacing: 1px;
}
.poster .page-top a {
	position: relative;
	left: 0;
}
.poster .page-top .name {
}

.poster .page-top .text {
	height:0.28rem;
	font-size:0.28rem;
	font-weight:400;
	color: #fff;
}

.page-content {
	padding-bottom: 1.5rem;
	position: relative;
	top: 0;
}

.picke-address .status-btn {
	display: flex;
	height: 0.8rem;
	align-items: center;
	justify-content: space-between;
	font-size: 0.3rem;
}
.picke-address .status-btn a {
	padding: 0.3rem;
	color: #888;
}
.picke-address .status-btn a.complete-btn {
	color: #1aad19;
}
.poster-img {
	width: 100%;
	display: block;
}

.create-poster {
	width: 4.68rem;
    height: 0.76rem;
    background: #19BC7F;
    border-radius: 5px;
    color: #fff;
    font-size: 0.34rem;
    border: none;
    margin: auto;
    display: block;
    margin-top: 0.5rem;
}
.weixin {
	width: 100%;
	position: fixed;
	z-index: 100;
}
.Loading-box .weui-toast {
	width: 100%;
	min-height: 100% !important;
	overflow: hidden;
	top: 0;
}
.Loading-box .weui-icon_toast.weui-loading {
	margin-top: 75%;
}

</style>