<template>
	<view class="container">
		<loadlogo v-if="!loadlogo" />
		<view class="page-index" :style="'background-color: '+datas.page.background" :class="!!bottomMenu?'bottomPadding':''"
		 v-if="loadlogo">
		 <far-bottom></far-bottom>
			<Advert class="advert" :advertData="datas.adv" v-if="!!datas.adv" />
			<diypages ref="diypages" :diypagesData="diypagesData" :pageData="datas.page" :btngroupData="btngroup" />
			<view class="full"></view>
			<view class="page-footer" v-if="isTabbars">
				<TabBars :tabBarAct="0" :tabBarData="bottomMenu" :TabBarsType="datas.page.type" />
			</view>
			<view class="audio-main" @click="playAudio" v-if="!!pageInfo.music">
				<view class="audio-bg" :class="{'stop-audio':!play_Audio}">
					<view class="audio-gif" :style="{'background-image':'url('+imageRoot+'musicgif.gif)'}">
						<view class="audio-png" :style="{'background-image':'url('+imageRoot+'music.png)'}"></view>
					</view>
				</view>
			</view>
		</view>
		<follow  :followShow="followShow" :followType="followType" :followTitleShow="followTitleShow" @clickmask="openQrShow"
		 @closeFollowPop="closeFollowPop" @closeFollowTitle="closeFollowTitle"></follow>
	</view>
</template>
<script>
	let innerAudioContext = uni.createInnerAudioContext();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import App from '@/common/js/app.js'
	import Loadlogo from '@/components/template/loadlogo.vue'
	import diypages from '@/components/template/diypages.vue'
	import Advert from '@/components/template/advert.vue'
	import TabBars from '@/components/template/tabBar.vue'
	import recommendGoods from "@/components/page/pageComponents/Recommend_goods.vue"
	import wxApi from "@/common/js/wxApi.js"
	import follow from '@/components/template/follow.vue';
	export default {
		data() {
			return {
				followTitleShow: true,
				followShow: false,
				followType: '0',
				loadlogo: false,
				swiperI: 1,
				loading: false,
				loadAgain: false,
				isTabbars: true,
				datas: {
					basic: [],
					adv: '',
					page: {},
				},
				pageInfo: {},
				play_Audio: false,
				diypagesData: [],
				richtext: {
					imageProp: {
						mode: 'widthFix'
					}
				},
				btngroup: {
					backgroundColor: '#ffffff',
					btnBordeRadius: '',
					displayMode: '',
					eachLineNum: '',
					eachPageNum: '',
					list: [],
					indicatorDots: true,
					duration: 300,
					btngroupHandleData: [],
					swiperHeight: '',
				},
				bottomMenu: null
			}
		},
		components: {
			Loadlogo,
			diypages,
			Advert,
			TabBars,
			recommendGoods,
			follow
		},
		computed: {

		},
		onShow() {
		 this.playAudio();
		},
		onHide() {
			let _this = this,
				play_Audio = false,
				pageAudio = _this.pageInfo.music;
			if (!play_Audio) {
				innerAudioContext.pause()
				innerAudioContext.onPause(() => {
					console.log('暂停播放');
				});
			}
			_this.play_Audio = play_Audio
		},
		mounted() {
			
				let agencyData = uni.getStorageSync('agencyData'),
					myLocation = uni.getStorageSync('myLocation'),
					client = App.getClientType(),
					getBrowser = App.getBrowser(),
					_this = this;
				if (getBrowser === "chrome53.0") {
					_this.loadlogo = true;
					_this.isTabbars = false;
					uni.showModal({
						content: '微信浏览器版本过低,请使用系统浏览器',
						showCancel: false
					})
					return false
				}
				if (client === "1" || client === "3") {
					if (!!agencyData) {
						let location = {
							latitude: myLocation.latitude,
							longitude: myLocation.longitude
						};
						_this.getPagesData(location, agencyData.aid)
					} else {
						// #ifdef H5
						jWeixin.ready(() => {
							jWeixin.getLocation({
								type: 'gcj02',
								success: function(res) {
									App.getAreaId(res, "", "", (options) => {
										uni.setStorageSync('agencyData', options.data);
										uni.setStorageSync('myLocation', res);
										_this.getPagesData(res, options.data.aid);
									})
								},
								fail: function(err) {
									console.log(err, '定位失败回调')
									_this.getPagesData();
								}
							});
						});
						// #endif
						// #ifndef H5
						App.getLocation().then(res => {
							App.getAreaId(res, "", "", (options) => {
								uni.setStorageSync('agencyData', options.data);
								uni.setStorageSync('myLocation', res);
								_this.getPagesData(res, options.data.aid);
							})
						})
						// #endif
					}
				} else {
					_this.getPagesData()
				}
			
		},
		methods: {
			closeFollowTitle() {
				let _this = this
				_this.followTitleShow = false
			},
			closeFollowPop() {
				let _this = this
				_this.followShow = false
			},
			openQrShow() {
				let _this = this
				_this.followShow = true
			},
			getPagesData(location = "", aid = "") {
				let _this = this;
				App._post_form('&do=HomePage', {
					lat: !!location ? location.latitude : "",
					lng: !!location ? location.longitude : "",
					aid
				}, res => {
					if (res.errno === 0) {
						_this.datas.adv = !!res.data.adv && res.data.adv.length !== 0 ? res.data.adv : "";
						_this.datas.page = !!res.data.page ? res.data.page : "";
						_this.bottomMenu = res.data.menu;
						_this.pageInfo = res.data.page;
						_this.$store.commit('ISTABCONTRO', 1)
						if (!!res.data.page.music) {
							innerAudioContext.src = res.data.page.music;
							setTimeout(()=>{
								jWeixin.ready(() => {
									innerAudioContext.play();
								});
								// _this.playAudio();
							})
						}
						let diypagesData = res.data.item,
							diypagesDataArray = [];

						for (let i in diypagesData) {
							diypagesDataArray.push(diypagesData[i])
						}
						_this.diypagesData = diypagesDataArray;
						//处理数据
						for (let i in _this.diypagesData) {

							//处理按钮组数据
							if (_this.diypagesData[i].id == 'menu') {
								//初始化
								_this.diypagesData[i].btngroupData = {}
								let btngroupData = {}
								btngroupData.list = []
								btngroupData.indicatorDots = true
								btngroupData.duration = 300
								btngroupData.btngroupHandleData = []
								btngroupData.swiperHeight = ''

								btngroupData.backgroundColor = _this.diypagesData[i].style.background
								btngroupData.btnBordeRadius = _this.diypagesData[i].style.navstyle
								btngroupData.displayMode = _this.diypagesData[i].style.showtype
								btngroupData.eachLineNum = _this.diypagesData[i].style.rownum
								btngroupData.eachPageNum = _this.diypagesData[i].style.pagenum
								for (let n in _this.diypagesData[i].data) {
									btngroupData.list.push(_this.diypagesData[i].data[n])
								}
								if (_this.diypagesData[i].style.showdot == 0) {
									btngroupData.indicatorDots = false
								} else {
									btngroupData.indicatorDots = true
								}
								let eachPageFactNum = '' //每页实际显示的数量
								if (btngroupData.list.length > btngroupData.eachPageNum) {
									eachPageFactNum = btngroupData.eachPageNum
								} else {
									eachPageFactNum = btngroupData.list.length
								}
								btngroupData.swiperHeight = Math.ceil(eachPageFactNum / btngroupData.eachLineNum) * 87 + 15
								if (btngroupData.list && btngroupData.list.length > 0) {
									let listsLength = Math.ceil(btngroupData.list.length / btngroupData.eachPageNum)
									for (let j = 0; j < listsLength; j++) {
										let arr = []
										let arrIndex = j * btngroupData.eachPageNum
										for (let m = arrIndex; m < btngroupData.eachPageNum * (j + 1) && m < btngroupData.list.length; m++) {
											arr.push(btngroupData.list[m])
										}
										btngroupData.btngroupHandleData.push(arr)
									}
								}
								_this.diypagesData[i].btngroupData = btngroupData
							}
							//处理图片橱窗风格4
							if (_this.diypagesData[i].id == 'picturew4') {
								let picturewArr = []
								for (let p in _this.diypagesData[i].data) {
									picturewArr.push(_this.diypagesData[i].data[p])
								}
								_this.diypagesData[i].data = picturewArr
							}
							//处理图片橱窗风格5
							if (_this.diypagesData[i].id == 'picturew5') {
								let picturewArr = []
								for (let p in _this.diypagesData[i].data) {
									picturewArr.push(_this.diypagesData[i].data[p])
								}
								_this.diypagesData[i].data = picturewArr
							}
							//处理图片展播
							if (_this.diypagesData[i].id == 'pictures') {
								let picturesArr = []
								for (let p in _this.diypagesData[i].data) {
									picturesArr.push(_this.diypagesData[i].data[p])
								}
								_this.diypagesData[i].data = picturesArr
							}
							//处理商家信息
							if (_this.diypagesData[i].id == 'shop') {
								let shopArr = []
								for (let s in _this.diypagesData[i].data) {
									let goodsArr = []
									for (let g in _this.diypagesData[i].data[s].goods) {
										if (_this.diypagesData[i].data[s].goods[g] !== '') {
											if (g == 'active') {
												_this.diypagesData[i].data[s].goods[g].css = 'qiang'
												_this.diypagesData[i].data[s].goods[g].tag = '抢'
											} else if (g == 'coupon') {
												_this.diypagesData[i].data[s].goods[g].css = 'hui'
												_this.diypagesData[i].data[s].goods[g].tag = '券'
											} else if (g == 'fightgroup') {
												_this.diypagesData[i].data[s].goods[g].css = 'pin'
												_this.diypagesData[i].data[s].goods[g].tag = '拼'
											} else if (g == 'groupon') {
												_this.diypagesData[i].data[s].goods[g].css = 'tuan'
												_this.diypagesData[i].data[s].goods[g].tag = '团'
											} else if (g == 'halfcard') {
												_this.diypagesData[i].data[s].goods[g].css = 'ka'
												_this.diypagesData[i].data[s].goods[g].tag = '卡'
											} else if (g == 'packages') {
												_this.diypagesData[i].data[s].goods[g].css = 'li'
												_this.diypagesData[i].data[s].goods[g].tag = '礼'
											} else if (g == 'bargain') {
												_this.diypagesData[i].data[s].goods[g].css = 'kan'
												_this.diypagesData[i].data[s].goods[g].tag = '砍'
											}
											goodsArr.push(_this.diypagesData[i].data[s].goods[g])
										}
									}
									_this.diypagesData[i].data[s].goods = goodsArr
									shopArr.push(_this.diypagesData[i].data[s])
								}
								_this.diypagesData[i].shopArr = shopArr
							}
							if (_this.diypagesData[i].id == 'banner') {
								let imageWidth = _this.diypagesData[i].width,
									imageHeight = _this.diypagesData[i].height,
									imageRatio = imageWidth / imageHeight;
								uni.getSystemInfo({
									success(res) {
										let windowHeight = res.windowWidth / imageRatio;
										_this.diypagesData[i].autoHeight = windowHeight;
									}
								})

							}
						}
						_this.datas.basic = _this.diypagesData;
					}
				}, false, () => {
					_this.loadAgain = true;
					_this.loadlogo = true;
				})
			},
			playAudio() {
				let _this = this,
					play_Audio = _this.play_Audio ? false : true,
					pageAudio = _this.pageInfo.music;
				if (play_Audio) {
					//#ifdef H5
					    jWeixin.ready(() => {
					     jWeixin.getLocation({
					      type: 'gcj02',
					      success: function(res) {
					       innerAudioContext.play();
					      }
					     });
					    });
					    //#endif
						//#ifndef H5
						innerAudioContext.play()
						//#endif
					innerAudioContext.onPlay(() => {
						console.log('开始播放');
					});
				}
				if (!play_Audio) {
					innerAudioContext.pause()
					innerAudioContext.onPause(() => {
						console.log('暂停播放');
					});
				}
				_this.play_Audio = play_Audio
			}
		},
		destroyed() {
			innerAudioContext.stop()
			innerAudioContext.onStop(() => {
				console.log('页面跳转暂停播放');
			})
		},
		onUnload() {
			this.play_Audio = false;
			innerAudioContext.stop()
			innerAudioContext.onStop(() => {
				console.log('页面跳转暂停播放');
			})
		},
		onPullDownRefresh() {
			//下拉刷新
			//console.log('')

			//停止下拉刷新
			uni.stopPullDownRefresh()
		},
		onReachBottom(e) {
			uni.$emit('isBottomMore')
			uni.$emit('tabisBottomMore');
		}
	}
</script>

<style scoped>
	.container {
		background-color: #FFD93F;
	}

	.page-index {
		width: 100vw;
		overflow: hidden;
		background-color: #fff;
		position: relative;
	}

	.bottomPadding {
		padding-bottom: 100upx;
	}

	@keyframes rotate2d {
		from {
			transform: rotate(0)
		}

		to {
			transform: rotate(360deg)
		}
	}
	.full{
		width: 750upx;
		height: 110upx;
		background: #F8F8F8;
	}
	.audio-main {
		position: fixed;
		right: 50upx;
		top: 10%;
		z-index: 10;
	}

	.audio-bg {
		position: relative;
	}

	.audio-bg .audio-gif {
		width: 100upx;
		height: 100upx;
		background-size: 100upx 100upx;
		background-repeat: no-repeat;
	}

	.audio-bg .audio-gif .audio-png {
		position: absolute;
		background-size: 80upx 80upx;
		animation: rotate2d 1.2s linear infinite;
		z-index: -1;
		width: 80upx;
		height: 80upx;
	}

	.audio-bg.stop-audio .audio-gif {
		background: none !important;
	}

	.audio-bg.stop-audio .audio-png {
		animation: none;
	}
</style>
