<template>
	<view>
			
		<!-- DIY组件 -->
		<view style="position: relative;" v-for="(item, item_key) in items" :key="item_key">
			<!-- banner轮播 -->
			<view class="diy-banner" v-if="item.type === 'banner'">
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<u-swiper :list="item.data" keyName="image" @click="banner"
						:autoplay="item.params.autoplay=='true'?true:false"
						:circular="item.params.circular=='true'?true:false"
						:indicator="item.params.indicator=='true'?true:false" :duration="item.params.duration"
						:interval="item.params.interval" :showTitle="item.style.showTitle=='true'?true:false"
						:indicatorMode="item.style.indicatorMode" :indicatorStyle="item.style.indicatorStyle"
						:height="item.style.height" :previousMargin="item.style.effect3d"
						:nextMargin="item.style.effect3d" :bgColor="item.style.bgColor" :radius="item.style.radius">
					</u-swiper>
					<view v-if="item.style.welcome == 'true'" class="banner-title">
						<view class="title">你好，{{user?user.nickname:'欢迎光临' + applet.app_name}}</view>
						<view class="signature">{{applet.signature}}</view>
					</view>
				</view>
			</view>
			<!-- 点单组 -->
			<view class="diy-order" v-if="item.type === 'order'"
				:style="{marginTop:'-' + item.style.marginTop + 'rpx'}">
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<view class="food-box"
						:style="{backgroundColor:item.style.bgColor,borderRadius:item.style.radius + 'rpx'}">
						<view @click="food(item.data[0].food_mode)" v-if="item.params.number == 1">
							<view class="icon"> 
								<img :src="item.data[0].image"> 
							</view>
							<view class="right">
								<view class="hm-font-b hm-col-0 hm-font-28">{{item.data[0].title}}</view>
								<view class="hm-col-light hm-m-t-15 hm-font-24">{{item.data[0].text}}</view>
							</view>
						</view>
						<view v-if="item.params.number == 2" :class="index == 0 ? 'item num2':'item num2 b-l'" v-for="(order,index) in item.data" :key="index" @click="food(order.food_mode)">
							<view>
								<img :src="order.image"
									:style="{width:item.style.width + 'rpx',height:item.style.height + 'rpx'}">
							</view>
							<view class="hm-font-b hm-col-0 hm-font-28">{{order.title}}</view>
							<view class="hm-col-light hm-font-24">{{order.text}}</view>
						</view>
						<view v-if="item.params.number == 3" :class="index == 0 ? 'item num3':'item num3 b-l'" v-for="(order,index) in item.data" :key="index" @click="food(order.food_mode)">
							<view>
								<img :src="order.image"
									:style="{width:item.style.width + 'rpx',height:item.style.height + 'rpx'}">
							</view>
							<view class="hm-font-b hm-col-0 hm-font-28">{{order.title}}</view>
							<view class="hm-col-light hm-font-24">{{order.text}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 单图组 -->
			<view class="diy-imageSingle" v-if="item.type === 'imageSingle'">
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<view v-for="(dataItem, index) in item.data" :key="index"
						:style="'background-color: ' + item.style.bgColor + ';padding: ' + item.style.paddingTb + 'rpx ' + item.style.paddingLr + 'rpx;'">
						<image :src="dataItem.image" mode="widthFix" @click="goTo(dataItem.url)"
							:show-menu-by-longpress="true" :lazy-load="true"
							:style="'width:100%;border-radius:' + item.style.radius + 'rpx;'" />
					</view>
				</view>
			</view>
			<!-- 图片橱窗 -->
			<view class="diy-window" v-if="item.type === 'window'">
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<view :style="'background: ' + item.style.bgColor + ';'">
						<view v-if="item.style.layout > -1" :class="'data-list avg-sm-' + item.style.layout">
							<view v-for="(dataItem, index) in item.data" :key="index" class="data-item"
								:style="'padding: ' + item.style.paddingTb + 'rpx ' + item.style.paddingLr + 'rpx;'">
								<u-image :src="dataItem.image" @click="goTo(dataItem.url)" :shape="item.style.shape"
									:radius="item.style.radius" width="100%" showMenuByLongpress
									:height="item.style.height"></u-image>
							</view>
						</view>
						<view v-else>
							<view class="window">
								<view
									:style="'padding: ' + item.style.paddingTb + 'rpx ' + item.style.paddingLr + 'rpx;'">
									<u-image :src="item.data[0].image" @click="goTo(item.data[0].url)"
										:shape="item.style.shape" :radius="item.style.radius" width="100%"
										showMenuByLongpress :height="item.style.height"></u-image>
								</view>
							</view>
							<view class="window">
								<view>
									<view v-if="item.data.length >= 2"
										:style="'padding: ' + item.style.paddingTb + 'rpx ' + item.style.paddingLr + 'rpx;'">
										<u-image :src="item.data[1].image" @click="goTo(item.data[1].url)"
											:shape="item.style.shape" :radius="item.style.radius" width="100%"
											showMenuByLongpress :height="item.style.height/2 - item.style.paddingTb">
										</u-image>
									</view>
									<view
										:style="'padding: ' + item.style.paddingTb + 'rpx ' + item.style.paddingLr + 'rpx;'">
										<view v-if="item.data.length >= 3" class="window">
											<view :style="'padding-right: ' + item.style.paddingLr/2 + 'rpx;'">
												<u-image :src="item.data[2].image" @click="goTo(item.data[2].url)"
													:shape="item.style.shape" :radius="item.style.radius" width="100%"
													showMenuByLongpress
													:height="item.style.height/2 - item.style.paddingTb"></u-image>
											</view>
										</view>
										<view v-if="item.data.length >= 4" class="window">
											<view :style="'padding-left: ' + item.style.paddingLr/2 + 'rpx;'">
												<u-image :src="item.data[3].image" @click="goTo(item.data[3].url)"
													:shape="item.style.shape" :radius="item.style.radius" width="100%"
													showMenuByLongpress
													:height="item.style.height/2 - item.style.paddingTb"></u-image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 视频组 -->
			<view class="diy-video" v-if="item.type === 'video'">
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<view :style="'background: ' + item.style.bgColor + ';'">
						<video :style="'height: ' + item.style.height + 'rpx;width:100%;'" :src="item.params.src"
							:poster="item.params.poster" :autoplay="item.params.autoplay == 'true'?true:false"
							:loop="item.params.autoplay == 'true'?true:false"
							:muted="item.params.autoplay == 'true'?true:false" controls>
						</video>
					</view>
				</view>
			</view>
			<!-- 公告组 -->
			<view class="diy-notice" v-if="item.type === 'notice'">
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<u-notice-bar :text="item.data.text" :direction="item.params.direction"
						:step="item.params.step == 'true'" :color="item.style.color" :bgColor="item.style.bgColor"
						@click="notice"></u-notice-bar>
				</view>
			</view>
			<!-- 导航组 -->
			<view class="diy-navBar" v-if="item.type === 'navBar'">
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<view class="hm-p-tb-20" :style="'background-color:'+item.style.bgColor">
						<u-grid :col="item.style.rowsNum" :border="false">
							<u-grid-item v-for="(item1,index1) in item.data" :key="index1" @click="goTo(item1.url)">
								<view class="item">
									<image :style="'width:'+item.style.width+'rpx;height:'+item.style.height+'rpx;'"
										:src="item1.image" />
									<view class="hm-font-28" :style="'color:'+item1.color+';'">{{item1.text}}</view>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>
			<!-- 商品组 -->
			<view class="diy-goods" v-if="item.type === 'goods' && item.data.length > 0">
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<block v-if="item.style.display == 'list'">
						<!-- 单列商品 -->
						<block v-if="item.style.column == 1">
							<view class="goods-list" :style="'background: ' + item.style.bgColor + ';'">
								<view :class="index ? 'u-b-t column__1':'column__1'"
									v-for="(dataItem, index) in item.data" :key="index"
									@click="goTo('goods/detail?goods_id='+dataItem.goods_id)">
									<image :src="dataItem.image" />
									<view class="hm-fl">
										<!-- 商品名称 -->
										<view v-if="item.style.show.goodsName"
											class="hm-line-1 hm-col-0 hm-font-b hm-font-28 hm-p-tb-10">
											{{ dataItem.goods_name }}
										</view>
										<!-- 商品卖点 -->
										<view v-if="item.style.show.sellingPoint" class="hm-font-26 hm-col-error hm-line-1">
											{{ dataItem.selling_point }}
										</view>
										<view class="hm-p-t-10">
											<!-- 商品销量 -->
											<view v-if="item.style.show.goodsSales" class="hm-font-24 hm-p-b-10 hm-col-tips">
												已售{{ dataItem.goods_sales }}件
											</view>
											<!-- 商品价格 -->
											<view>
												<text v-if="item.style.show.goodsPrice" class="hm-col-error hm-font-b">
													¥{{ dataItem.goods_price }}
												</text>
												<text class="hm-font-zhx hm-col-tips"
													v-if="item.style.show.linePrice && dataItem.line_price > 0">
													¥{{ dataItem.line_price }}
												</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</block>
						<!-- 2列商品 -->
						<block v-if="item.style.column == 2">
							<view class="goods-list" :style="'background: ' + item.style.bgColor + ';'">
								<view :class="index > 1 ? 'u-b-t column__2':'column__2'"
									v-for="(dataItem, index) in item.data" :key="index"
									@click="goTo('goods/detail?goods_id='+dataItem.goods_id)">
									<view class="hm-text-center">
										<image :src="dataItem.image" />
									</view>
									<view class="hm-p-l-10">
										<!-- 商品名称 -->
										<view v-if="item.style.show.goodsName"
											class="hm-line-1 hm-col-0 hm-font-b hm-font-26 hm-p-tb-5">
											{{ dataItem.goods_name }}
										</view>
										<!-- 商品价格 -->
										<view class="hm-font-24">
											<text v-if="item.style.show.goodsPrice" class="hm-col-error hm-font-b">
												¥{{ dataItem.goods_price }}
											</text>
											<text class="hm-font-zhx hm-col-tips hm-m-l-20"
												v-if="item.style.show.linePrice && dataItem.line_price > 0">
												¥{{ dataItem.line_price }}
											</text>
										</view>
									</view>
								</view>
							</view>
						</block>
						<!-- 3列商品 -->
						<block v-if="item.style.column == 3">
							<view class="goods-list" :style="'background: ' + item.style.bgColor + ';'">
								<view :class="index > 2 ? 'hm-border-t column__3':'column__3'"
									v-for="(dataItem, index) in item.data" :key="index"
									@click="goTo('goods/detail?goods_id='+dataItem.goods_id)">
									<view class="hm-text-center">
										<image :src="dataItem.image" />
									</view>
									<view class="hm-p-l-10">
										<!-- 商品名称 -->
										<view v-if="item.style.show.goodsName"
											class="hm-line-1 hm-col-0 hm-font-b hm-font-26 hm-p-tb-5">
											{{ dataItem.goods_name }}
										</view>
										<!-- 商品价格 -->
										<view class="hm-font-24">
											<text v-if="item.style.show.goodsPrice" class="hm-col-error hm-font-b">
												¥{{ dataItem.goods_price }}
											</text>
											<text class="hm-font-zhx hm-col-tips hm-m-l-20"
												v-if="item.style.show.linePrice && dataItem.line_price > 0">
												¥{{ dataItem.line_price }}
											</text>
										</view>
									</view>
								</view>
							</view>
						</block>
					</block>
					<block v-else>
						<!-- 横向滑动 -->
						<view class="index_sale hm-br-8" :style="'background: ' + item.style.bgColor + ';'">
							<scroll-view scroll-x="true">
								<navigator v-for="(dataItem, index) in item.data" :key="index" hover-class="none"
									style="display: inline-block;"
									:url="'/pages/goods/detail?goods_id=' + dataItem.goods_id">
									<view class="sale_img">
										<image mode="aspectFill" :src="dataItem.image"></image>
									</view>
									<view class="content hm-line-1">{{dataItem.goods_name}}</view>
									<view class="content hm-col-error">￥{{dataItem.goods_price}}</view>
								</navigator>
							</scroll-view>
						</view>
					</block>
				</view>
			</view>
			<!-- 在线客服 -->
			<block v-if="item.type === 'service'">
				<view class="diy-service"
					:style="'right: ' + item.style.right + 'rpx; bottom: ' + item.style.bottom + 'rpx;opacity:' + (item.style.opacity/100) + ';'">
					<!-- 拨打电话 -->
					<block v-if="item.params.type == 'phone'">
						<button class="hm-btn-normal" @click="phone(item.params.phone_num)">
							<view class="service-icon">
								<image :src="item.params.image"></image>
							</view>
						</button>
					</block>
					<!-- 在线聊天 -->
					<block v-else-if="item.params.type == 'chat'">
						<button open-type="contact" class="hm-btn-normal">
							<view class="service-icon">
								<image :src="item.params.image"></image>
							</view>
						</button>
					</block>
				</view>
			</block>
			<!-- 关注公众号 -->
			<view class="diy-official-account" v-if="item.type === 'officialAccount'">
				<!-- #ifdef MP-WEIXIN -->
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<official-account></official-account>
				</view>
				<!-- #endif -->
			</view>
			<!-- 富文本 -->
			<view class="diy-richText" v-if="item.type === 'richText'">
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<view class="hm-bg-f hm-p-20">
						<view
							:style="'background: ' + item.style.bgColor + ';padding: ' + item.style.paddingTb + 'rpx ' + item.style.paddingLr + 'rpx;'">
							<u-parse :content="item.params.content"></u-parse>
						</view>
					</view>
				</view>
			</view>
			<!-- 辅助空白 -->
			<view class="diy-blank" v-if="item.type === 'blank'">
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<view :style="'height: ' + item.style.height + 'rpx; background: ' + item.style.bgColor + ';'">
					</view>
				</view>
			</view>
			<!-- 辅助线 -->
			<view class="diy-guide" v-if="item.type === 'guide'">
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<view
						:style="'padding: ' + item.style.paddingTb + 'rpx 0rpx; background: ' + item.style.bgColor + ';'">
						<view
							:style="'border-top: ' + item.style.height + 'rpx ' + item.style.style + ' ' + item.style.color + ';'">
						</view>
					</view>
				</view>
			</view>
			<!-- 栏目标题 -->
			<view class="diy-column-title" v-if="item.type === 'columnTitle'">
				<view :style="{padding: '0rpx ' + item.style.marginLr + 'rpx'}">
					<view
						:style="'font-size:' + item.style.fontSize + 'rpx;background: ' + item.style.bgColor + ';padding: '+ item.style.paddingTb + 'rpx 0rpx'">
						<view :class="item.params.showLine == 'true'?'title line':'title'"
							:style="'font-weight:'+item.style.bold+';color:' + item.style.color + ';border-left-color:' + item.style.lineColor + ';'">
							{{item.params.title}}
						</view>
						<view class="sub" v-if="item.params.right=='true'"
							@click="item.params.url==''?'':goTo(item.params.url)">
							<text :style="'color:' + item.style.subColor + ';'">
								{{item.params.subTitle}}
							</text>
							<view class="arrow" v-if="item.params.arrow=='true'">
								<u-icon name="arrow-right" :color="item.style.subColor" :size="item.style.fontSize/2">
								</u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
	</view>
</template>

<script>
	const App = getApp();
	export default {
		data() {
			return {
				user: {},
				applet: {
					app_name: '',
					signature: ''
				},
				items: {}, // 页面元素
			};
		},
		components: {},
		props: {},
		async onLoad(options) {
			let _this = this,
			scene = decodeURIComponent(options.scene),
			q = decodeURIComponent(options.q);
			//等待onLaunch执行完毕
			//#ifndef H5
			await _this.$onLaunched;
			//#endif
			_this.user = App.getUser();
			_this.applet = App.getApplet();
			//#ifdef H5 || MP-ALIPAY 
			App.setTitle();
			//#endif
			_this.getIndexData(); // 获取首页数据
			//普通二维码进入
			if (q != 'undefined' && q != '') {
				App.getQrcode(q);
			}
			//小程序码进入
			if (scene != undefined && scene != '') {
				App.getQrcode(scene,false);
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {},
		onShareAppMessage: function() {
			let _this = this;
			return {
				title: _this.applet.navbar.params.share_title,
				imageUrl: _this.applet.navbar.params.share_image,
				path: "/pages/index/index?recommender=" + App.getUserId()
			};
		},
		methods: {
			/**
			 * 获取首页数据
			 */
			getIndexData: function() {
				let _this = this;
				App._get('index/page', {}, function(result) {
					_this.setData(result.data);
				});
			},
			/**
			 * 客服组件 - 拨打电话
			 */
			phone: function(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			/**
			 * 点击幻灯片
			 */
			banner: function(index) {
				let _this = this;
				for (var vo of _this.items) {
					if (vo.type == 'banner') {
						App.goTo(vo.data[index].url);
					}
				}
			},
			/**
			 * 点击公告
			 */
			notice: function(index) {
				let _this = this;
				for (var vo of _this.items) {
					if (vo.type == 'notice') {
						App.goTo(vo.data.url[index]);
					}
				}
			},
			/**
			 * 点单
			 */
			food: function(food_mode) {
				let _this = this;
				uni.setStorageSync("food_mode", food_mode);
				App.goTo('shop/index');
			},
			/**
			 * 页面跳转
			 */
			goTo: function(url) {
				App.goTo(url);
			}
		}
	};
</script>
<style>
	@import "./diy.css";
</style>
