<template>
	<!-- 调用首页 -->
	<view class="container">
		<loadlogo v-if="!loadlogo" />
		
		<view class="page-index" :style="'background-color: '+datas.page.background" v-if="loadlogo">
			<Advert class="advert" :advertData="datas.adv" v-if="!!datas.adv" />
			<diypages :diypagesData="diypagesData" :pageData="datas.page" :btngroupData="btngroup" />
			<view class="page-footer">
				<TabBars :tabBarAct="0" :TabBarsData="datas.page.menu" :TabBarsType="datas.page.type" />
			</view>
			<far-bottom></far-bottom>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		RUZHU,
		KEFU
	} from '@/store/mutation-types'
	
	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'

	export default {
		data() {
			return {
				loadlogo: false,
				swiperI: 1,
				loading: false,
				loadAgain: false,
				datas: {
					basic: [],
					adv: '',
					page: {}
				},
				diypagesData: [],
				richtext: {
					imageProp: {
						mode: 'widthFix'
					}
				},
				btngroup: {
					backgroundColor: '#ffffff',
					btnBordeRadius: '',
					displayMode: '',
					eachLineNum: '',
					eachPageNum: '',
					list: [],
					indicatorDots: true,
					duration: 300,
					btngroupHandleData: [],
					swiperHeight: ''
				}
			}
		},
		components: {
			/*
			Foooter, Ruzhu, Kefu, Haodiantoutiao, Jinriremai, Xinpintuijian, Jingxuanpaihangbang, Qiangoulist, Loooading, Loadlogo
			*/
			Loadlogo,
			diypages,
			Advert,
			TabBars,

		},
		computed: {
			...mapState([
				'ruzhushow', 'kefushow'
			])
		},
		onShow() {
			// let that = this
			// if (!that.loadlogo && that.loadAgain) {
			// 	setTimeout(() => {
			// 		that.getPagesData()
			// 	}, 500)
			// }
			/*动态隐藏TabBar
			wx.hideTabBar({})
			*/
		},
		mounted() {
				let that = this;
				that.getPagesData()
		},
		methods: {
			...mapMutations([
				RUZHU, KEFU
			]),
			ruzhuToggle() {
				this[RUZHU](true)
			},
			kefuToggle() {
				this[KEFU](true)
			},
			getPagesData() {
				let _this = this;
				App._post_form('&do=HomePage', {}, res => {
					console.log(res,'6666')
					if (res.errno === 0) {
						_this.datas.adv = res.data.adv || "";
						_this.datas.page = res.data.page || "";
						//修改页面标题
						uni.setNavigationBarTitle({
							title: _this.datas.page.title == null ? '暂无标题' : _this.datas.page.title
						})

						let diypagesData = res.data.item,
							diypagesDataArray = [];

						for (let i in diypagesData) {
							diypagesDataArray.push(diypagesData[i])
						}
						console.log(diypagesDataArray)
						_this.diypagesData = diypagesDataArray;
						//处理数据
						for (let i in _this.diypagesData) {
							/*
							if(that.diypagesData[i].id == 'public_goods2'){ //查询
								console.log(that.diypagesData[i])
							}
							*/

							//处理按钮组数据
							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 = '礼'
											}
											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
							}
						}
						_this.datas.basic = _this.diypagesData;
					}
				}, false, () => {
					_this.loadAgain = true
					_this.loadlogo = true;
				})
			}
		},
		onPullDownRefresh() {
			//下拉刷新
			//console.log('')

			//停止下拉刷新
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			//上拉刷新加载
			let that = this
			that.loading = true
			setTimeout(function() {
				that.loading = false
			}, 4000)
		}
	}
</script>

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

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

	.index-right-bar {
		width: 80px;
		height: 80px;
		padding: 16px;
		position: fixed;
		right: 30px;
		bottom: 60px;
		z-index: 99;
	}

	.right-bar-i {
		width: 100%;
		height: 100%;
		padding: 6px;
	}

	.right-bar-i-t {
		height: 40px;
		text-align: center;
		margin-top: 0;
		padding-top: 6px;
	}

	.right-bar-i-t .i {
		width: 44px;
		height: 44px;
		display: inline-block;
	}

	.right-bar-i-t .i .image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.right-bar-i-c {
		height: 32px;
		line-height: 32px;
		font-size: 20px;
		margin-top: 0;
	}

	.index-h {
		height: 80px;
		line-height: 80px;
		padding: 10px 30px 20px 30px;
		display: flex;
		justify-content: space-between;
		background-color: #FFD93F;
		position: relative;
	}

	.index-h-l {
		color: #000;
		font-size: 36px;
		font-style: italic;
		
	}

	.index-h-r-d {
		width: 180px;
		height: 56px;
		line-height: 56px;
		color: #808080;
		font-size: 28px;
		text-align: center;
		margin-top: 12px;
		background-color: #FFF0B2;
		border-radius: 40px;
	}

	.index-h-r-d .i {
		color: #333;
		font-size: 32px;
		margin-right: 10px;
		vertical-align: -2px;
	}

	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1);
		}

		100% {
			transform: translateX(-66.66666%) translateZ(0) scaleY(1);
		}
	}

	.index-wave {
		width: 100%;
		height: 60px;
		position: absolute;
		top: -72px;
		left: 0;
		overflow: hidden;
	}

	.index-wave-d {
		width: 300%;
		height: 100%;
		animation: move_wave 4s linear infinite;
		animation-delay: 0s;
		display: -webkit-flex;
		display: flex;
		justify-content: flex-start;
	}

	.index-wave-i {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.index-wave-i .image {
		width: 100%;
		height: 100%;
	}

	.index-t1 {
		margin-top: 40px;
		padding: 0 30px;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 1;
	}

	.index-t1-l {
		padding-right: 30px;
		flex: 1;
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
	}

	.index-t1-l-i {
		width: 140px;
	}

	.index-t1-l-i-t {
		width: 100px;
		height: 100px;
		padding: 0 20px;
	}

	.index-t1-l-i-t .image {
		width: 100px;
		height: 100px;
	}

	.index-t1-l-i-b {
		height: 42px;
		line-height: 42px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.index-t1-r {
		width: 140px;
		border-left: 1.2px solid #f6f6f6;
	}

	.index-t1-r .image {
		width: 110px;
		height: 110px;
		margin: 10px 0 0 30px;
	}
</style>
