<template>
	<view class="full-width full-height">
		<!-- 自定义头部 -->
		<myhead :worksid="worksid" :title="myheadtext" :color="'#fff'" :titleShow="true" :backShow="true" :isBack="true"
			: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>
					</swiper-item>
				</swiper>
				<view style="position: fixed; bottom: 60upx; text-align: center;left: 0; right: 0;">
					<view class="dots">
						<view v-for="(item, index) in Adlists" class="dot-wrapper" :key="index">
							<image v-if="index == currentSwiper" src="../../static/icon_banner_dot.png"
								style="width: 15upx; height: 15upx; margin-left: 10upx;"></image>
							<image else src="../../static/icon_banner_select_dot.png"
								style="width: 15upx; height: 15upx; margin-left: 10upx;"></image>
						</view>
					</view>
				</view>

				<view @click="Customize_now" hover-class="hover-class-bg" style="position: fixed; bottom: 130upx; left: 0; right: 0; margin: auto;
				width: 300upx; height: 100upx; 
				background: linear-gradient(92deg, #E6B01A, #F29F3D);
				box-shadow: 0px 19px 48px 1px rgba(20, 31, 62, 0.35);
				border-radius: 40px;">
					<view
						style=" text-align: center; line-height: 100upx; font-size: 36upx; font-weight: 500; color: #FFFFFF;">
						立即定制</view>
				</view>
				<!-- <view @click="toProxyApplet()" v-if="list.is_open_manage == 1"
					style="position: fixed; bottom: 35upx; text-align: center;left: 0; right: 0;font-size: 32upx; margin: auto; color: #fff;">
					运营中心</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="toLineList"
			style="position: fixed; z-index: 99; right: 0; bottom: 440upx; width: 109upx; height: 123upx;">
			<image src="../../static/liebiao.png" mode="" style="width: 243upx; height: 123upx;"></image>
		</view>
		
		<view @click="toProxyApplet()" v-if="list.is_open_manage == 1" style="position: fixed; z-index: 99; right: 0; bottom: 300upx; display: flex;align-items: center;justify-content: center;
		   width: 100upx; height: 88upx; background: #F29F3D; border-radius: 44upx 0px 0px 44upx;">
			<view style="font-size: 24upx; font-weight: 800; color: #FFFFFF;">
				<view>运营</view>
				<view>中心</view>
			</view>
		</view>
		

		<switchGoods ref="switchGoods" @selectGoodItem="selectGoodItem" @toCustomSize="toCustomSize"></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 switchGoods from '../index/switchGoods.vue'; //选择商品
	import Env from '@/util/Env.js';

	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',
				goods: [], //商品列表
				currentIndex: 0,
				selectItem: null, //选择对象
				name: "",
				show_admin_login: 0
			};
		},

		methods: {




			//调转代理小程序
			toProxyApplet() {
				var url = Env.getBaseURL();
				var envVersionName = "trial";
				if (url.indexOf("colorpark") != -1) {
					envVersionName = "release";
				}
				wx.navigateToMiniProgram({
					appId: 'wx9cd3934f286f3d71',
					envVersion: envVersionName,
					path: 'pages/index/start-up?machine_id=' + this.machine_id + "&partner_id=" + this.list.partner_id + "&appletType=5",
					success(res) {

					}
				})
			},


			//调转代理小程序
			// toProxyApplet() {
			// 	var url = Env.getBaseURL();
			// 	var envVersionName = "trial";
			// 	if (url.indexOf("colorpark") != -1) {
			// 		envVersionName = "release";
			// 	}
			// 	wx.navigateToMiniProgram({
			// 		appId: 'wx9cd3934f286f3d71',
			// 		envVersion: envVersionName,
			// 		success(res) {

			// 		}
			// 	})
			// },

			//首次进来检查是否
			toFirstCheck() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: (res) => {
						userService.login({
							s: 'Init.checkAdminAuth',
							code: res.code,
							partner_id: that.list.partner_id
						}).then(result => {
							that.show_admin_login = result.show_admin_login
						}).catch(err => {

						});
					},
					fail: (res) => {

					}
				});
			},

			//自定义尺寸
			toCustomSize() {
				uni.navigateTo({
					url: '../mall/size?machine_id=' + this.machine_id +
						"&isFirstPage=true" +
						"&machineDetail=" + JSON.stringify(this.list)
				})
			},

			//去排队列表
			toLineList() {
				if (!this.$AppContext.checkLogin()) {
					this.tologo(2)
				} 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 +
						"&title=" + item.title +
						"&real_width=" + item.key +
						"&machineDetail=" + JSON.stringify(this.list) +
						"&type = 1"
				})
			},

			//立即定制
			Customize_now() {


				if (!this.$AppContext.checkLogin()) {
					this.tologo(1)
				} else {

					let isShowCustomizeData = this.list.customize_size == 1 ? true : false
					this.$refs['switchGoods'].open(this.machine_id, isShowCustomizeData);
				}
			},

			//打电话
			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(type) {
				// 先登陆
				let that = this;
				uni.login({
					provider: 'weixin',
					success: (res) => {
						userService.login({
							s: 'Init.init',
							code: res.code
						}).then(r => {
							if (type == 1) {
								let isShowCustomizeData = that.list.customize_size == 1 ? true : false
								that.$refs['switchGoods'].open(that.machine_id, isShowCustomizeData);
								//that.$refs['switchGoods'].open(that.machine_id);
							} else {
								uni.navigateTo({
									url: '../mall/lineUp?machine_id=' + that.machine_id +
										'&key=' + that.key
								})
							}
						}).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.newDetail'
				}).then(res => {
					this.statusloading = 1;
					if (res) {
						this.list = res;
						this.toFirstCheck();
						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: 'index_top',
					machine_id: this.machine_id
				}).then(result => {
					this.Adlists = result
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				});
			},
		},

		//上拉刷新
		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;
		},

		onLoad(options) {
			if (options.machine_id) {
				this.machine_id = options.machine_id;
			}
			this.myheadtext = this.machine_id + "-定制";
			this.$base.machine_id = this.machine_id
			this.statusloading = 1;
			this.Adlist() // 轮播图
			//this.getDetail();
		},

		onShow() {
			this.getDetail();
		},

		onHide() {

		}

	};
</script>

<style lang="scss">
	@import "../index/css/main.css";
	/* height: calc(100% - 400upx);
			width: 100%;
	        position: absolute;
			top: 200upx; */

	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;
			}
		}
	}

	.swiper-block {
		height: calc(100% - 100upx);
		width: 100%;
		/* height: calc(100% - 300upx);
		width: 100%;
	    position: absolute;
		top: 150upx; */
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		overflow: unset;
	}

	.slide-image {
		height: calc(100% - 250upx);
		width: 520upx;
		border-radius: 20upx;
		z-index: 1;
		margin: 0upx 40upx;
		background: #FFFFFF;

	}

	.active {
		transform: scale(1.14);
		transition: all 0.2s ease-in 0s;
		z-index: 20;
	}
</style>