<template>
	<view class="full-width full-height">
		<!-- 自定义头部 -->
		<myhead :worksid="worksid" :title="myheadtext" :color="'#fff'" :titleShow="true" :backShow="false"
			:background="'none'"></myhead>
		<view style="position: relative;width: 100%; height: 100%; z-index: 2;">
			<!-- 轮播图 -->
			<view v-if="statusloading == 1" class='swiper-box' style="width: 100%; height: 100%;">
				<swiper :autoplay="true" :interval="3000" :duration="1000" @change="swiperChange"
					class="swiper full-width" style="width: 100%; height: 100%; border-radius: 0;">
					<swiper-item v-for="(item, index) in Adlists" :key="index" class="swiper-item full-width">
						<image style="width: 100%; height: 100%; margin: auto; display: block;"
							:src="item.content + '?x-oss-process=image/resize,lfit,w_750'" mode="aspectFill"></image>
						<!-- <fr-image :src="item.content + '?x-oss-process=image/resize,lfit,w_750'"
						mode="aspectFill" loading-ing-img="two-balls"/> -->
					</swiper-item>
				</swiper>
				<view style="position: fixed; bottom: 232upx; text-align: center;left: 0; right: 0;">
					<view class="dots">
						<view v-for="(item, index) in Adlists" class="dot-wrapper" :key="index">
							<view class="dot iconfont"
								:class="[index == currentSwiper ? 'iconsanjiaoxing':'iconxingzhuang-sanjiaoxing' ]">
							</view>
						</view>
					</view>
				</view>
				<!-- <view @click="Customize_now"
				style="position: fixed; bottom: 112upx; left: 0; right: 0;
				width: 200upx; height: 200upx; border-radius: 50%; margin: auto;">
					<image src="../../static/golf.png" mode="" 
					style="width: 200upx; height: 200upx; border-radius: 50%; 
					position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1;"></image>
					<view style="color: #43cf7c; text-align: center; line-height: 200upx;font-size: 30upx; font-weight: bold;">开始定制</view>
				</view> -->
				<view @click="Customize_now" hover-class="hover-class-bg" style="position: fixed; bottom: 160upx; left: 0; right: 0; margin: auto;
				width: 300upx; height: 100upx; background: linear-gradient(92deg, #5CE6B5, #0CA457);
				box-shadow: 0upx 19upx 48upx 1upx rgba(20, 31, 62, 0.86); border-radius: 50upx;">
					<view
						style=" text-align: center; line-height: 100upx; font-size: 36upx; font-weight: 500; color: #FFFFFF;">
						开始定制</view>
				</view>
			</view>
			<!-- 错误提示信息 -->
			<view v-if="statusloading == 2" style="min-height: 100%;background: #131319 !important;">
				<view class="start" style="padding-bottom: 100upx; padding-top: 200upx;">
					<image src="../../static/icon_guaqi.png" mode="aspectFill" class="start_img"></image>
					<view class="start_text">{{msg || ''}}</view>
					<view @click="tomakePhoneCall">
						<view class="start_text">联系客服</view>
						<view class="start_text" style="display: flex; justify-content: center; align-items: center;">
							<image src="../../static/phone.png" mode=""
								style="width: 32upx; height: 32upx; margin-right: 5upx;"></image>
							{{phone || '18938664545'}}
						</view>
					</view>
				</view>
				<image src="../../static/logo.jpg" mode="aspectFill"
					style="width: 664upx; height: 757upx; opacity: 0.03; position: absolute; left: 0; bottom: 0; z-index: -1;">
				</image>
			</view>
			<view v-if="statusloading == 2"
				style="margin-top: -50upx;text-align: center;color: #888888; font-weight: 400; line-height: 40upx;">
				<text style="font-size: 22upx;">深圳市瑞丰彩科技有限公司</text>
			</view>
		</view>
		<!-- 登录弹框 -->
		<Signin ref="Signin"></Signin>
		<!-- 排队信息 -->
		<!-- <view v-if="statusloading == 1" @tap="game"
		style="position: fixed; z-index: 99; right: 0; bottom: 524upx; display: flex;align-items: center;justify-content: center;
		width: 100upx; height: 88upx; background: #43cf7c; border-radius: 44upx 0px 0px 44upx;">
			<view style="font-size: 24upx; font-weight: 800; color: #FFFFFF;">
				<view>排队</view>
				<view>信息</view>
			</view>
		</view> -->
		<view v-if="statusloading == 1" @tap="toLineList"
			style="position: fixed; z-index: 99; right: 0; bottom: 318upx; width: 109upx; height: 123upx;">
			<image src="../../static/liebiao.png" mode="" style="width: 243upx; height: 123upx;"></image>
		</view>


		<switchGoods ref="switchGoods" @selectGoodItem="selectGoodItem"></switchGoods> <!-- //商品弹框 -->

	</view>


</template>

<script>
	import homeservice from '@/service/homeservice.js';
	import userService from '@/service/UserService';
	import FrImage from '@/components/fr-image/fr-image.vue'
	import Signin from '../index/Signin.vue';
	import myhead from './head/head.vue';
	/*import uniPopup from './/common/uni-popup/uni-popup.vue' */
	import switchGoods from '../index/switchGoods.vue'; // 手机壳

	export default {
		components: {
			myhead,
			Signin,
			FrImage,

			switchGoods,
		},
		computed: {},
		data() {
			return {
				Adlists: [{}, {}],
				currentSwiper: 0,
				machine_id: null,
				key: 2, //1直营配送站 2 万能通用版 3色彩自助站
				list: null,
				myheadtext: '定制',
				msg: null,
				worksid: 1,
				statusloading: null, //加载状态
				phone: '18938664545',

			};
		},

		methods: {

			//去排队列表
			toLineList() {
				if (!this.$AppContext.checkLogin()) {
					this.tologo()
				} else {
					uni.navigateTo({
						url: '../mall/lineUp?machine_id=' + this.machine_id + '&key=' + this.key
					})
				}
			},

			//选择商品进来
			selectGoodItem(item) {
				uni.navigateTo({
					url: '../index/index?machine_id=' + this.machine_id + " &good_id=" + item.id,
				})
			},

			// 立即定制
			Customize_now() {
				if (!this.$AppContext.checkLogin()) {
					this.tologo()
				} else {
					this.$nextTick(() => {
						this.$refs['switchGoods'].open({

						});
					})
				}
			},

			// 打电话
			tomakePhoneCall() {
				uni.showLoading({
					title: '跳转中...',
					mask: true
				})
				uni.makePhoneCall({
					phoneNumber: this.phone || '18938664545', //仅为示例
					success(res) {
						uni.hideLoading();
					},
					fail(err) {
						uni.hideLoading();
						uni.showToast({
							title: '拨打的电话失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			tologo() {
				// 先登陆
				let that = this;
				uni.login({
					provider: 'weixin',
					success: (res) => {
						userService.login({
							s: 'Init.init',
							code: res.code,
							appcode: that.$Env.getappcode()
						}).then(r => {
							that.getDetail();
						}).catch(err => {
							that.$refs.Signin.init();
						});
					},
					fail: (res) => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			swiperChange(e) {
				this.currentSwiper = e.detail.current
			},
			getDetail() {
				uni.showLoading({
					title: '正在加载中...',
					mask: true
				})
				homeservice.WorksList({
					machine_id: this.machine_id,
					// s: 'machine.detail'
					s: 'machine.newDetail'
				}).then(res => {
					this.statusloading = 1;
					if (res) {
						this.list = res;
						this.myheadtext = this.machine_id + '-' + res.code //头部标题栏
					}
					uni.stopPullDownRefresh();
					uni.hideLoading();
				}).catch(err => {
					this.msg = err.msg
					this.statusloading = 2;
					this.phone = err.data.phone || '18938664545'
					this.myheadtext = '歇一歇' //头部标题栏
					uni.stopPullDownRefresh();
					uni.hideLoading();
				});
			},
			Adlist() { // 轮播图
				homeservice.queryList({
					s: 'Ad.list',
					ad_position_key: 'currency_banner',
					machine_id: this.machine_id
				}).then(result => {
					this.Adlists = result
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				});
			},
			getQueryString(url, name) {
				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[2]
				}
				return null;
			}
		},
		//上拉刷新
		onReachBottom() {},
		//下拉加载
		onPullDownRefresh() {
			this.getDetail() //获取数据
		},
		// 分享转发
		onShareAppMessage(options) {
			var that = this;
			// 设置转发内容
			var shareObj = {
				title: this.$Env.getmalltext(),
				path: '/pages/mall/machineDetail?machine_id=' + this.machine_id, // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '', //转发时显示的图片路径，支持网络和本地，不传则使用当前页默认截图。
				success: function(res) { // 转发成功之后的回调　　　　　
					if (res.errMsg == 'shareAppMessage:ok') {}
				}
			};
			return shareObj;
		},
		/* onShareTimeline() {
			return {
			  title: this.$Env.getmalltext(),
			  path: '/pages/mall/machineDetail?machine_id=' + this.machine_id,
			  imageUrl:'',
			  query: 'kjbfrom=pyq'
			}
		}, */
		onLoad(options) {
			// console.log(options)
			//if(options.machine_id){
			this.machine_id = this.$Env.getmachineId();
			this.myheadtext = this.machine_id + "-定制";
			this.$base.machine_id = this.machine_id
			this.statusloading = 1;
			//this.getDetail() //获取数据
			this.Adlist() // 轮播图
			// console.log("进来="+this.machine_id)
			//}
			/* if(options.worksid){ //控制导航返回
				this.worksid = options.worksid
			} */
			// 自定义获取二维码的携带的链接信息
			/* if (options.q) {
			    let qrUrl = decodeURIComponent(options.q)
				this.machine_id = this.getQueryString(qrUrl, 'machine_id')
				this.$base.promoter_id = this.getQueryString(qrUrl, 'promoter_id')
				// console.log(this.machine_id)
				// console.log(this.$base.promoter_id)
				// wx.setNavigationBarTitle({title: '色彩站' + machine_id })
				this.$base.machine_id = this.machine_id
				this.getDetail() //获取数据
				this.Adlist()// 轮播图
			} */
		},
		onShow() {},
		onHide() {}
	};
</script>

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

	page {
		width: 100%;
		height: 100%;
		background: #FFFFFF;

		// 错误提示信息
		.start {
			.start_img {
				width: 260upx;
				height: 260upx;
				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-weight: 400;
				color: #FFFFFF;
				margin: 22upx auto 0;
				line-height: 28upx;
			}
		}
	}
</style>
