<template>
	<view class="full-width">
		
		<!-- 登录弹框 -->
		<Signin ref="Signin"></Signin>
		
		<!-- 自定义头部 -->
		<view class='flex commonHead'  style="height: 100upx;" :style="{height: titleHeight +'px'}">
			<view class='commonHead-wrap flex'>
				<view class='commonHead_left' @click="tomine()">
					<view class='commonHead_left_back'>
						<view class="commonHead_left_back_img">
							<image src="../../static/icon_mall_zuoshang.png" style="width: 50upx; 
							height: 50upx; 
							 margin-top: 10upx; " mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class='commonHead_right flex'>
					<view class='commonHead_right_text line1'>色彩小商品</view>
				</view>
			</view>
		</view>
		
		<view v-if="long && LoupanList.length == 0" >
			<view style="display: flex; justify-content: center; height: 100%;">
				<view style="margin-top: 231upx;">
					<image src="../../static/icon_diy.png" mode="" style="width: 500upx; height: 245upx;"></image>
					<view class="start_title" style="margin-top: 60upx; color: #FFFFFF;  width: 100%; text-align: center;">定制站必须扫码才能使用</view>
				</view>
			</view>
			<view @click="scan1" style="width: 460upx; position: fixed; bottom: 100upx; margin: auto; 
			height: 164upx; background: #47E5E5; left: 0; right: 0; z-index: 99; border-radius: 20upx; display: flex; align-items: center;">
				<view style="width: 120upx;
					height: 120upx;border-radius: 50%; margin: 22upx 30upx;text-align: center;">
					<image style="height: 61upx; width: 61upx;margin:32upx auto;" src="../../static/icon_saoyisao.png"
						mode=""></image>
				</view>
				<view style="color: #000; font-size: 36upx;">开始扫码定制</view>
			</view>
		</view>	
		
		<!-- 有设备 -->
		<view v-if="LoupanList.length > 0">
			<view style="margin-top: 25upx;">
				<view style="width: 690upx; margin:0upx auto 30upx; display: flex;">
					<view>
						<view style="position: relative; width: 320upx; height: 160upx;" @click="order()">
							<image src="../../static/mine/dingdan@3x.png" mode=""
								  style="width: 320upx; height: 160upx; position: absolute;z-index: -1;"></image>
							<view
								 style="margin-left:26upx; padding-top: 27upx; font-size: 36upx; color: #FFFFFF;font-weight: bold;">
								 订单</view>
							<view style="margin-top: 15upx;margin-left:26upx;font-size: 24upx;
								font-weight: 400; color: #FFFFFF;">我的定制</view>
						</view>
						<view style="margin-top: 16upx; position: relative;width: 320upx; height: 160upx;"
							@click="coupons()">
							<image src="../../static/mine/huayihua@3x.png" mode=""
								  style="width: 320upx; height: 160upx; position: absolute;z-index: -1;"></image>
							<view
								  style="margin-left:26upx; padding-top: 27upx; font-size: 36upx; color: #FFFFFF;font-weight: bold;">
								  滑一滑</view>
						</view>
					</view>
					<view style="margin-left: 15upx;width: 350upx; height: 340upx;" @click="tomine()">
						<image src="../../static/mine/wo@3x.png" mode=""
							style="width: 350upx; height: 340upx; position: absolute;z-index: -1;"></image>
						<view
							style="margin-left:30upx; padding-top: 39upx; font-size: 36upx; color: #FFFFFF;font-weight: bold;">个人中心</view>
						<view style="margin-top: 15upx;margin-left:30upx;font-size: 24upx;
							font-weight: 400; color: #FFFFFF;">更多作品更多精彩</view>
					</view>
				</view>
				
				<!-- 附近定制站 -->
				<view style="font-size: 36upx; margin-top: 40upx; margin-left: 40upx; font-weight: bold; color: #FFFFFF;">在线定制站</view>
				<view style="width: 690upx; margin: 30upx auto 0; background: #131319; border-radius: 10upx;">
					<view v-for="(item, index) in LoupanList" :key="index" @click="goMachineDetail(item)">
						<view v-if="index != 0" style="width: 689upx; height: 1upx; background: #CCCCCC; opacity: 0.1;">
						</view>
						<view style="height: 160upx; display: flex; align-items: center; padding: 29upx 20upx 30upx 19upx;">
							<image
								style="width: 150upx; height: 143upx; margin: 0upx 21upx 0upx 0upx; border-radius: 10upx;"
								mode="aspectFill" :src="item.image + '?x-oss-process=image/resize,lfit,w_164'"></image>
							<view style="width: calc(100% - 281upx);">
								
								<view style="font-size: 36upx; font-weight: 500; color: #FFFFFF; opacity: 0.4;">
									{{item.id}}
								</view>
								<view style="margin: 5upx 0  7upx; font-size: 32upx; font-weight: 500; color: #FFFFFF;
								width: 80%; white-space: nowrap;  text-overflow: ellipsis; overflow: hidden; word-break: break-all;"
									:style="{opacity:item.status.value == 1 || item.status.value == 2  ? '0.4' : '0.4'}">
									{{item.short_name || ''}}
								</view>
								<view style="font-size: 24upx; font-weight: 500; color: #FFFFFF; opacity: 0.4;">
									营业时间：{{item.start_time || ''}}-{{item.end_time || ''}}
								</view>
							</view>
							<view style="width: 170upx;">
								<text class="statuslist"
									  style="background:#5FE4B6;">体验中</text>
							</view>
						</view>
					</view>
				</view>
			</view>	
		</view>
	
	</view>
</template>

<script>
	import Env from '@/util/Env.js';
	import userService from '@/service/UserService';
	import homeservice from '@/service/homeservice.js';
	import Signin from './Signin.vue';
	import FrImage from '@/components/fr-image/fr-image.vue';
	var pixelRationum = null;
	export default {
		components: {
			Signin,
			FrImage
		},
		computed: {},
		data() {
			return {
				titleHeight: null,
				long: false,
				LoupanList: [],
				newOrderlist: null,
				isShow: true, //是否已经弹出
				animMaind: {}, //旋转动画
				animMain: {}, //旋转动画
				animAdd: {}, //item位移,透明度
				animDelLots: {}, //item位移,透明度
				animstart: false,
				bganimstart: false,
				touchStartTime: null,
				touchEndTime: null,
				lastTapTime: null,
				currentSwiper: 0,
				imgheights: [],
				imageLoadstate: false,
				system_config: null,
				portraitUrl: null //头像地址
			};
		},
		
		methods: {
			
			scan1() {
				let that = this;
				uni.scanCode({
					success: function(res) {
						console.log(res)
						if (res.scanType == 'QR_CODE') {
							if (that.getQueryString(res.result, 'machine_id') && that.getQueryString(res.result, 'machine_id') != "") {
								uni.navigateTo({
									url: '../index/machineDetail?machine_id=' + that.getQueryString(res.result, 'machine_id')
								});
							} else {
								uni.showToast({
									title: '扫码未能识别色彩站，请检查二维码',
									icon: 'none',
									duration: 2000
								});
							}
						} else {
							if (res.path) {
								if (that.getQueryString(res.path, 'machine_id') && that.getQueryString(res
										.path, 'machine_id') != "") {
									uni.navigateTo({
										url: '../index/machineDetail?machine_id=' + that
											.getQueryString(res.path, 'machine_id')
									});
								} else {
									uni.showToast({
										title: '扫码未能识别色彩站，请检查二维码',
										icon: 'none',
										duration: 2000
									});
								}
							} else {
								uni.showToast({
									title: '扫码未能识别色彩站，请检查二维码',
									icon: 'none',
									duration: 2000
								});
							}
						}
					},
					fail: function(err) {
						//console.log(err)
					},
				});
			},

			//调转色彩公园优惠券
			toCoupon(item) {
			
			},

			imageLoad(e) {
				//获取图片真实宽度
				var imgwidth = e.detail.width,
					imgheight = e.detail.height,
					//宽高比
					ratio = imgwidth / imgheight;
				//计算的高度值
				var viewHeight = 750 / ratio;
				var imgheight = viewHeight
				var imgheights = this.imgheights
				//把每一张图片的高度记录到数组里
				imgheights[e.target.dataset['index']] = imgheight; // 改了这里 赋值给当前 index
				this.imgheights = imgheights
				this.setData({
					imgheights: imgheights
				})
				this.imageLoadstate = true
			},
			
			//轮播图
			toJump(item) {
				if (item.appid && item.go_url) {
					var url = this.$Env.getBaseURL();
					var envVersionName = "trial";
					if (url.indexOf("colorpark") != -1) {
						envVersionName = "release";
					}
					wx.navigateToMiniProgram({
						appId: item.appid,
						path: item.go_url || '/pages/index/mall',
						extraData: {
							foo: 'bar'
						},
						envVersion: envVersionName,
						success(res) {
							// 打开成功
						}
					})
				} else if (item.go_url) {
					uni.navigateTo({
						url: './start-up?machine_id=' + item.go_url.split('=')[1]
					})
				}
			},
			
			swiperChange(e) {
				this.currentSwiper = e.detail.current
			},
			
			experience() {
				uni.navigateTo({
					url: '../mall/experience'
				})
			},
			
			tomyorder() { //订单列表
				uni.navigateTo({
					url: '../mine/myorder'
				})
			},
			
			toLocation(item) {
				uni.navigateTo({
					    url: '../mall/start-up?machine_id=' + item.id
				});
			},
			
			getQueryString(url, name) {
				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[2]
				}
				return null;
			},
			
			setData(obj) {
				let that = this;
				let keys = [];
				let val, data;
				Object.keys(obj).forEach(function(key) {
					keys = key.split('.');
					val = obj[key];
					data = that.$data;
					keys.forEach(function(key2, index) {
						if (index + 1 == keys.length) {
							that.$set(data, key2, val);
						} else {
							if (!data[key2]) {
								that.$set(data, key2, {});
							}
						}
						data = data[key2];
					})
				});
			},

			order() {
				var url = this.$Env.getBaseURL();
				var envVersionName = "trial";
				if (url.indexOf("colorpark") != -1) {
					envVersionName = "release";
				}
				wx.navigateToMiniProgram({
					appId: this.$Env.getappId(),
					path: '/pages/mine/myorder',
					extraData: {
						foo: 'bar'
					},
					envVersion: envVersionName,
					success(res) {
						// 打开成功
					}
				})
			},
			
			coupons() {
				var url = this.$Env.getBaseURL();
				var envVersionName = "trial";
				if (url.indexOf("colorpark") != -1) {
					envVersionName = "release";
				}
				//console.log("envVersionName="+envVersionName);
				wx.navigateToMiniProgram({
					appId: Env.getappId(),
					path: '/pages/index/recommend?selectTitleType=2',
					extraData: {
						foo: 'bar'
					},
					envVersion: envVersionName,
					success(res) {
						// 打开成功
					}
				})
			},
			
			tomine() {
				wx.navigateToMiniProgram({
					appId: this.$Env.getappId(),
					path: '/pages/index/mine',
					extraData: {
						foo: 'bar'
					},
					envVersion: Env.getenvVersion(),
					success(res) {
						// 打开成功
					}
				})
			},
			// 防止重复点击
			touchStart(e) {
				this.touchStartTime = e.timeStamp;
			},
			touchEnd(e) {
				this.touchEndTime = e.timeStamp;
			},
			doubleTap(e) {
				// 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
				if (this.touchEndTime - this.touchStartTime < 350) {
					// 当前点击的时间
					const currentTime = e.timeStamp;
					const lastTapTime = this.lastTapTime;
					// 更新最后一次点击时间
					this.lastTapTime = currentTime;
					// 如果两次点击时间在300毫秒内，则认为是双击事件
					if (currentTime - lastTapTime > 300) {
						// console.log('防止重复点击')
						if (!this.$AppContext.checkLogin()) {
							this.tologo('navigateTo')
						} else {
							//this.showOrHide()
							//uni.navigateTo({url: '/pages/index/index?goods_id=21'})
							uni.navigateTo({
								url: '../index/machineDetail?machine_id=' + this.$Env.getmachineId() + '&worksid=0'
							});
						}
					}
				}
			},
			
			//加载数据
			loadGoodsList() {
				uni.showLoading({
					title: '正在加载中...'
				})
				homeservice.queryList({
					s: 'Machine.shopList',
					longitude: this.$base.longitude || 0,
					latitude: this.$base.latitude || 0,
					distance: 5,
				}).then(result => {
					this.long = true
					result.data.forEach(item => {
						item.distance = Number(item.distance).toFixed(2)
					});	
					this.LoupanList = result.data
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			},
			
			getSetting() {
				this.loadGoodsList()
			},
			
			// 获取用户的地理位置，
			getAuthorize() {
				this.loadGoodsList()
			},
			
			// 用户授权
			getAuthorize() {
				const that = this
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						that.getLocation()
					},
					// 授权失败
					fail(err) {
						uni.showModal({
							title: '提示',
							content: '请授权位置获取附近的商家!',
							showCancel: false,
							confirmText: '确认授权',
							success() {
								uni.openSetting({
									success(res) {
										//console.log(res)
										that.getAuthorize()
									},
									fail(err) {
										//console.log(err)
									}
								})
							}
						})
					}
				})
			},
			
			// 设备详情
			goMachineDetail(item) {
				uni.navigateTo({
					url: '../index/machineDetail?machine_id=' + item.id + '&worksid=0'
				});
			},
			
			tologo(e) {
				// 先登陆
				let that = this;
				uni.login({
					provider: 'weixin',
					success: (res) => {
						userService.login({
							s: 'Init.init',
							code: res.code
						}).then(r => {
							if (e == 'navigateTo') {
								uni.navigateTo({
									url: '../index/machineDetail?machine_id=' + that.$Env.getmachineId() + '&worksid=0'
									/* url: './start-up?machine_id=' + that.$Env.getmachineId() +
										'&worksid=0' */
								});
							}
						}).catch(err => {
							that.$refs.Signin.init()
							//uni.showToast({title: err.msg,icon: 'none'})
						});
					},
					fail: (res) => {
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none'
						// })
					}
				});
			},

			systemConfig() {
				var _this = this
				wx.request({
					url: _this.$Env.getDevBaseURL() + '/api/system_config/detail',
					method: 'GET',
					data: {},
					header: {
						//设置参数内容类型为x-www-form-urlencoded
						'content-type': 'application/x-www-form-urlencoded',
						'Accept': 'application/json'
					},
					success: function(res) {
						_this.system_config = res.data.data
						uni.stopPullDownRefresh();
						uni.hideLoading();
					},
					fail: function(err) {
						uni.stopPullDownRefresh();
						uni.hideLoading();
					},
					complete: function(end) {
						uni.stopPullDownRefresh();
						uni.hideLoading();
					}
				})
			}
		},
		//下拉加载
		onPullDownRefresh() {
			this.loadGoodsList();
		},
		//上拉加载
		onReachBottom() {},
		//滑动
		onPageScroll(t) {},
		//分享好友
		onShareAppMessage() {
			return {
				title: '',
				imageUrl: '',
				path: '',
				success: (res) => {},
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: '',
				imageUrl: '',
				path: '',
				query: 'kjbfrom=pyq'
			}
		},
		onLoad(options) {
			this.getSetting() // 获取附近店铺
			let app = uni.getSystemInfoSync();
			//胶囊信息
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.titleHeight = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight) * 2
			if (options.q) { // 分销系统 获取二维码的携带的链接信息
				let qrUrl = decodeURIComponent(options.q)
				let promoter_id = qrUrl.replace(/[^0-9]/ig, "")
				this.$base.promoter_id = promoter_id
			}
			var appUser = userService.getCacheUserInfo();
			if (appUser != null) {
				this.portraitUrl = appUser.portrait
			}
		},
		onShow() {
			let app = uni.getSystemInfoSync();
			//胶囊信息
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.titleHeight = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight) * 2

			//this.phone_mall()
		}
	};
</script>

<style lang="scss">
	@import "./css/main.css";

	ec-canvas {
		width: 100%;
		height: 100%;
	}

	page {
		background: #282932 !important;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.imgSrcstate {
		position: absolute;
		width: 100%;
		right: -900px;
		top: -600px;
		display: none;
	}

	.imgSrcdisplay {
		z-index: 0 !important;
	}


	.statuslist {
		font-size: 23upx;
		padding: 8upx 20upx 8upx 20upx;
		border-radius: 20upx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.start {
		.start_img {
			width: 513upx;
			height: 251upx;
			display: block;
			margin: 0upx auto 102upx;
		}

		.start_title {
			font-size: 30upx;
			text-align: center;
			color: #FFFFFF;
		}

		.start_text {
			width: 70%;
			text-align: center;
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #888888;
			margin: 22upx auto 0;
			line-height: 28upx;
		}
	}

	//悬浮按钮
	.buttom {
		position: fixed;
		bottom: 30upx;
		margin: auto;
		left: 0;
		right: 0;
		z-index: 99;
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
		font-size: 36upx;
		text-align: center;
		line-height: 120upx;
		font-weight: 800;
		color: #FFFFFF;
		background: linear-gradient(to right, #834DC4, #1983D7);
	}

	.canbutton {
		color: #23b7cb;
		font-size: 15px;
		padding: 5px 15px;
		border: 1px transparent solid;
		border-radius: 30px;
		position: relative;
		width: 140upx;
		margin: 40upx auto 0;
		background: #282932;
		text-align: center;
	}

	.canbutton:after {
		content: '';
		position: absolute;
		top: -3px;
		bottom: -3px;
		left: -3px;
		right: -3px;
		background: linear-gradient(to right, #834DC4, #1983D7);
		border-radius: 30px;
		content: '';
		z-index: -1;
	}
</style>