<template>
	<view class="follow">
		<!-- 头部引导关注 -->
		<!--  -->
		<view  class="followTitle" v-if="followType == '0'&&followTitleShow==true&&followInfo.status != 0">
			<view class="followTitlePackage">
				<view class="followImage"><image :src="platformInfor.logo"></image></view>
				<view class="followInfomation">
					<view :style="followInfo.korea != 1?'overflow: hidden;text-overflow: ellipsis;white-space: nowrap;':''">
						<text>{{followInfo.korea == 1?'나의 소식 전하는 한밥상~':'欢迎进入'}}</text>
						<text class="followText" v-if="followInfo.korea != 1">{{ platformInfor.name }}</text>
					</view>
					<view><text>{{followInfo.korea == 1?'가끔 한밥상 필요할때가 있습니다!':'关注公众号，享专属服务'}}</text></view>
				</view>
				<view class="followButton" @click="openQrShow"><text>{{followInfo.korea == 1?'팔로우':'立即关注'}}</text></view>
			</view>
			<view class="followTitleClose" @click="closeFollowTitle"><image :src="imgfixUrls + 'merchant/followClose.png'"></image></view>
		</view>
		<!-- 头部引导关注 -->
		<PopManager :show="followShow" :type="type" @clickmask="closePop">
			<view class="qrCenter" v-if="(followType == '0') && followInfo.status!='0'">
				<view class="qrCenterTitle"><text>长按二维码，关注我们</text></view>
				<view class="qrCenterMain">
					<view class="qrCenterMainPackage"><image :src="followInfo.gzimage"></image></view>
				</view>
			</view>
			<view v-if="followType != '0'&&followInfo.status!='0'" class="qrBottom" >
				<view class="qrBottomTitle">
					<view class="qrBottomImage">
						<image :src="followInfo.gzimage"></image>
					</view>
					<view class="qrBottomTip">
						<text>长按识别，扫码关注</text>
					</view>
				</view>
				<view class="qrBottomFoot" @click="closePop" >
					<view class="qrBottomButton">
						<text>取消</text>
					</view>
				</view>
			</view>
		</PopManager>
	</view>
</template>

<script>
import App from '@/common/js/app.js';

// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif
import PopManager from '@/components/template/PopManager';
export default {
	components: {
		PopManager
	},
	props: {
		shareId:{
			type: String,
			default: ''	
		},
		followShow: {
			type: Boolean,
			default: false
		},
		followType: {
			type: String,
			default: ''
		},
		followTitleShow:{
			type: Boolean,
			default: false
		},
		followData:{
			type: Object,
			default:null
		}
	},
	watch:{
		'followData': {
			handler(newData, oldData) {
					this.followInfo = newData;
			},
			deep: true
		}
	},
	data() {
		return {
			type: null,
			platformInfor: {},
			followInfo: {
				status: 0
			},
			img:''
		};
	},
	mounted() {
		let _this = this;
		// _this.img = this.imgfixUrl;
		if (_this.followType == '0') {
			_this.type = 'center';
		} else {
			_this.type = 'bottom';
		}
		_this.platformInfor = uni.getStorageSync('platformInfor');
		_this.init();
	},
	methods: {
		closePop() {
			let _this = this;
			_this.$emit('closeFollowPop');
		},
		closeFollowTitle(){
			let _this = this;
			_this.$emit('closeFollowTitle');
		},
		init() {
			let _this = this;
			_this.getFollow();
		},
		// 关注接口
		getFollow() {
			let _this = this;
			
			// debugger
			if(_this.followType == '10') return;
			let data = {
				type: _this.followType,
				id:_this.shareId||''
			};
			App._post_form('&do=Follow', data, res => {
				_this.followInfo = res.data;
			});
		},
		openQrShow() {
			let _this = this;
			_this.$emit('clickmask');
			let locations = location.href;
			let data={
				url:locations
			};
			App._post_form('&do=TopFollow', data, res => {
				console.info(res.data);
				// _this.followInfo = res.data;
			});
		}
	}
};
</script>

<style lang="less">
.qrBottomTip{
	margin-top: 30upx;
	text-align: center;
	>text{
		font-size:24upx;
		color:rgba(102,102,102,1);
	}
}	
.qrBottomImage{
	margin: 50upx auto 0 auto;
	width: 300upx;
	height: 300upx;
	>image{
		width: 300upx;
		height: 300upx;
	}
}	
.qrBottomTitle{
	border: 1upx solid rgba(0,0,0,0);
	width: 750upx;
	height: 480upx;
	background: #FFFFFF;
}	
.qrBottomButton{
	margin:20upx auto 0 auto;
	width: 700upx;
	height: 80upx;
	text-align: center;
	background:rgba(245,245,245,1);
	border:1upx solid rgba(204,204,204,1);
	border-radius:10upx;
	>text{
		line-height: 80upx;
		font-size:30upx;
		color:rgba(51,51,51,1);
	}
}	
.qrBottomFoot{
	box-shadow: 10upx 20upx 20upx 20upx rgba(245,245,245,1);
	border: 1upx solid rgba(0,0,0,0);
	width: 750upx;
	height: 120upx;
	background: #FFFFFF;
	text-align: center;
}	
.qrBottom{
	border: 1upx solid rgba(0,0,0,0);
	width: 750upx;
	height: 600upx;
	background: #F6F6F6;
}	
.followTitleClose {
	position: absolute;
	top: 0;
	right: 0;
	width: 70upx;
	height: 70upx;
	> image {
		width: 70upx;
		height: 70upx;
	}
}
.qrCenterMainPackage {
	padding: 30upx;
	> image {
		width: 520upx;
		height: 510upx;
	}
}
.qrCenterMain {
	height: 570upx;
	background: #ffffff;
}
.qrCenterTitle {
	height: 80upx;
	text-align: center;
	> text {
		line-height: 80upx;
		font-size: 30upx;
		color: rgba(51, 51, 51, 1);
	}
}
.qrCenter {
	overflow: hidden;
	border-radius: 10upx;
	width: 580upx;
	height: 650upx;
	background: #eeeeee;
}
.followButton {
	margin-left: 10upx;
	display: inline-block;
	width: 130upx;
	padding: 0 10upx;
	height: 60upx;
	border-radius: 10upx;
	vertical-align: middle;
	text-align: center;
	background: rgba(255, 68, 68, 1);
	> text {
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 60upx;
	}
}
.followTitlePackage {
	position: relative;
	padding: 15upx 30upx;
}
.followInfomation {
	width: 400upx;
	margin-left: 20upx;
	vertical-align: middle;
	display: inline-block;
	
	> view {
		width: 400upx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
		
		> text {
			display: inline-block;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			
		}
	}
}
.followText {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(255, 68, 68, 1) !important;
}
.followImage {
	vertical-align: middle;
	display: inline-block;
	width: 100upx;
	height: 100upx;
	border-radius: 10upx;
	overflow: hidden;
	> image {
		width: 100upx;
		height: 100upx;
	}
}
.follow {
	font-size: 0;
}
.followTitle {
	z-index: 200;
	position: fixed;
	top: 0;
	left: 0;
	width: 750upx;
	min-height: 130upx;
	background: black;
}
</style>
