<template>
	<view>
		<!-- 品牌 -->
		<uni-popup ref="brandscenter" type="center" @change="change" :style="{height: (MobilePhoneHeight * 0.8) +'px'}">
			<view style="width: 690upx; margin:auto; display: flex; flex-direction: column;">
				<view :style="{height: (MobilePhoneHeight * 0.82) +'px'}"
					style="width:100%; background: #FFFFFF; border-radius: 30upx; position: relative;">
					<view @click="cancelBrand()" style="position: absolute; top: 0upx; right: 0upx;">
						<image src="../../../static/icon_guanbi.png" mode=""
							style="height: 23upx; width: 23upx; padding: 21upx 33upx;"></image>
					</view>
					<view style="margin:62upx auto 82upx;font-size: 36upx; text-align: center;">
						请选择手机品牌
					</view>
					<scroll-view scroll-y scroll-with-animation
						:style="{height: (MobilePhoneHeight * 0.75) - 200*pixelRate +'px'}" style="box-sizing: border-box;white-space: nowrap;
					width: 510upx; margin:0 auto; overflow: hidden; ">
						<view v-for="(item,index) in catrgoryList" :key="index" @click="brandclick(item)">
							<!-- 1-4 -->
							<view v-if="catrgoryList.length > 0 && catrgoryList.length <= 4" style="margin:0 0 10upx;
								display: flex;align-items: center; justify-content: center;
								background: #EEEEEE;border-radius: 10upx;
								height: 150upx; width: 510upx;" hover-class="brandactive"
								:class="[brandtext == item.title ? 'brandactive':'' ]">
								<view style="width: 150upx;">
									<image :src="item.icon" mode="aspectFit"
										  style="width: 80upx; height: 80upx; margin: auto; display: block;"></image>
								</view>
								<view style="font-size: 28upx; margin-top: 10upx; max-width: 360upx;
									overflow: hidden; text-overflow: ellipsis; white-space: nowrap;word-break:break-all;">
									{{item.title || ''}}
								</view>
							</view>
							<!-- 5-6 -->
							<view v-if="catrgoryList.length >= 5 && catrgoryList.length <= 6" style="float: left; margin:0 5upx 10upx; 
								display: flex;align-items: center;
								background: #EEEEEE;border-radius: 10upx;
								height: 240upx; width: 240upx;" hover-class="brandactive"
								:class="[brandtext == item.title ? 'brandactive':'' ]">
								<view style="width: 100%;">
									<!-- <view style=" height: 35upx">
									  <view v-if="item.is_size == 1"   style="border-radius: 25upx 25upx 0upx 25upx; width:110upx; height: 35upx; background: #F5696A; color: #FFFFFF; font-size: 19upx; line-height: 35upx; text-align: center;" > 官方数据</view>
									</view> -->
									<image :src="item.icon" mode="aspectFit"
										style="width: 60%; height: 80upx; margin: auto; display: block;"></image>
									<view style="text-align: center; font-size: 28upx;  width: 95%; margin: auto;
									overflow: hidden; text-overflow: ellipsis; white-space: nowrap;word-break:break-all;">
										{{item.title || ''}}
									</view>
								</view>
							</view>
							<!-- 大于六个 -->
							<view v-if="catrgoryList.length > 6" style="float: left; margin: 10upx;
								display: flex;align-items: center;
								background: #EEEEEE;border-radius: 10upx;
								height: 150upx; width: 150upx;" hover-class="brandactive"
								:class="[brandtext == item.title ? 'brandactive':'' ]">
								<view style="width: 100%;">
									<!-- <view style=" height: 35upx">
									  <view v-if="item.is_size == 1"   style="border-radius: 25upx 25upx 0upx 25upx; width:110upx; height: 35upx; background: #F5696A; color: #FFFFFF; font-size: 19upx; line-height: 35upx; text-align: center;" > 官方数据</view>
									</view> -->
									<image :src="item.icon" mode="aspectFit"
										style="width: 50%; height: 60upx; margin: auto; display: block;"></image>
									<view style="text-align: center; font-size: 24upx;  width: 95%; margin: auto;
									overflow: hidden; text-overflow: ellipsis; white-space: nowrap;word-break:break-all;">
										{{item.title || ''}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>

					<view v-if="isShowCustomize"
						style="text-align: center; color: rgba(121, 72, 234, 1); font-weight: 550;margin-top: 5upx;"
						@click="toCustomSize()"> 自定义尺寸 </view>
					<!-- 无数据 -->
					<view v-if="catrgoryList.length < 0" style="text-align: center; color: #BEBEBE;">该设备没有库存</view>
				</view>
			</view>
		</uni-popup>
		<!-- 机型 -->
		<uni-popup ref="modelShow" type="bottom" @change="change" style="position: fixed; z-index: 9998;"
			:style="{height: MobilePhoneHeight +'px'}">
			<view style="width: 750upx; margin:auto; display: flex; flex-direction: column;">
				<view :style="{height: MobilePhoneHeight +'px'}"
					style="width:100%; background: #FFFFFF; border-radius: 30upx 30upx 0 0; position: relative;">
					<view @click="cancelModel()" style="position: absolute; top: 0upx; right: 0upx;">
						<image src="../../../static/icon_guanbi.png" mode=""
							style="height: 23upx; width: 23upx; padding: 21upx 33upx;"></image>
					</view>
					<view style="margin:62upx auto 82upx;font-size: 36upx; text-align: center;">
						请选择手机型号
					</view>
					<scroll-view scroll-y scroll-with-animation
						:style="{height: MobilePhoneHeight - 160*pixelRate +'px'}" style="box-sizing: border-box;
					width: calc(100% - 40upx); margin:20upx auto; height: 1000upx; overflow: hidden;">
						<view v-for="(item,index) in sizelist" :key="index"
							style="float: left; width: calc(100% / 3); margin-bottom: 10upx;" @click="modelclick(item)">
							
							<view style=" height: 35upx">
							  <view v-if="item.is_size == 1"   style="border-radius: 25upx 25upx 0upx 25upx; width:120upx; height: 35upx; background: #F5696A; color: #FFFFFF; font-size: 19upx; line-height: 35upx; text-align: center;" > 官方数据</view>
							</view>
							
							<image :src="item.goods_pic" mode="aspectFit"
								style="width: 160upx; height: 160upx; margin: auto; display: block;"></image>
							<view style="font-size: 24upx;font-weight: 500;
							 text-align: center; height: 66upx;
							overflow: hidden; width: 100%;
							display:-webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;" :class="[goods_id == item.id ? 'modelactive':'' ]">{{item.name || ''}} </view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<!-- 壳子 -->
		<uni-popup ref="shellShow" type="bottom" @change="change" style="position: fixed; z-index: 9998;"
			:style="{height: MobilePhoneHeight +'px'}">
			<view style="width: 750upx; margin:auto; display: flex; flex-direction: column;">
				<view :style="{height: MobilePhoneHeight +'px'}"
					style="width:100%; background: #FFFFFF; border-radius: 30upx 30upx 0 0; position: relative;">
					<view @click="shellModel()" style="position: absolute; top: 0upx; right: 0upx;">
						<image src="../../../static/icon_guanbi.png" mode=""
							style="height: 23upx; width: 23upx; padding: 21upx 33upx;"></image>
					</view>
					<!-- 定制壳自带壳 80 -->
					<view style="display: flex; justify-content: center;height: 80upx;">
						<view style="border-radius:0 0 0 40upx;" @click="customDhell" v-if="choose_surfaceState"
							:class="['classification', { active: category == 0 }]">
							定制壳
						</view>
						<view :class="['classification', { active: category == 1 }]" @click="selfContainedShell"
							v-if="self_surfaceState">
							自带手机壳
						</view>
					</view>
					<!-- 定制壳 248 + 31-->
					<view v-show="category == 0">
						<view v-if="brands.length > 1"
							style="display: flex; align-items: center; width: calc(100% - 40upx); margin:31upx auto 0;">
							<image src="../../../static/icon_more_left.png" mode="" style="width: 64upx; height: 64upx;"
								@click="leftTo()"></image>
							<scroll-view class="scroll-container" :scroll-left="scrollLeft" @scroll="scrollLeftTo"
								scroll-x scroll-with-animation :scroll-into-view="'s' + currentIndex">
								<view :class="['scroll-item', { active: index == currentId }]" :id="'s' + index"
									v-for="(item, index) in brands" :key="index" @tap="handleScroll(item, index)">
									<image :src="item.preview + '?x-oss-process=image/resize,lfit,w_300'"
										mode="aspectFit" style="width: 80upx; height: 160upx; margin:28upx auto 20upx;">
									</image>
									<view v-if="key == 2" style="font-size: 24upx; text-align: center; width: 95%; margin: auto;
									overflow: hidden; text-overflow: ellipsis; white-space: nowrap;word-break:break-all;">
										{{ item.name || ''}}
									</view>
								</view>
							</scroll-view>
							<image src="../../../static/icon_more_right.png" mode=""
								style="width: 64upx; height: 64upx;" @click="rightTo()"></image>
						</view>
						<view :style="{height: MobilePhoneHeight - (80 + 248 + 31 + 112)*pixelRate +'px'}"
							style="display: flex; align-items: center; justify-content: center;">
							<view>
								<!-- 图片 -->
								<image @click="ordersize(brandsitem.id)" v-if="brands.length > 1"
									:src="brandsitem.preview + '?x-oss-process=image/resize,lfit,w_750'" mode="widthFix"
									style="width: 260upx; min-height: 260upx; margin:auto; display: block;"></image>
								<view v-if="brands.length > 1"
									style="font-size: 30upx; font-weight: 500;line-height: 22upx; text-align: center; margin-top: 10upx;">
									{{ goods_id_e.modeltext || ''}}
								</view>
								<image @click="ordersize(brandsitem.id)" v-if="brands.length == 1"
									:src="brandsitem.preview + '?x-oss-process=image/resize,lfit,w_750'" mode="widthFix"
									style="width: 310upx; min-height: 310upx; margin:auto; display: block;"></image>
								<view
									style="font-size: 30upx; font-weight: 500;line-height: 22upx; text-align: center; margin-top: 10upx;">
									{{ brandsitem.name || ''}}
								</view>
								<view @click="ordersize(brandsitem.id)"
									style="font-size: 24upx; font-weight: 500; color: #864BC3; text-align: center; line-height: 50upx; margin-top: 20upx;">
									材质详情>
								</view>
							</view>
						</view>
						<view class="determineBut" @click="determine(2)">确定</view>
					</view>
					<!-- 自带壳 -->
					<view v-show="category == 1">
						<scroll-view scroll-y scroll-with-animation
							:style="{height: MobilePhoneHeight - 430*pixelRate +'px'}" style="box-sizing: border-box;white-space: nowrap;
						width: 540upx; margin:50upx auto 0; overflow: hidden;">
							<view v-for="(item,index) in backgroundColorData" :key="index"
								@click="backgroundColor(item)" style="float: left; margin:0 4upx 8upx;
								border-radius: 10upx;
								border: 2upx solid #FFFFFF;
								height: 96upx; width: 96upx;" :style="{background: item.color_code}"
								:class="[surface_color_id_text == item.color_code ? 'backgroundColoractive':'' ]">
								<span class="tooltiptext"
									:class="[surface_color_id_text == item.color_code ? 'tooltiptextactive':'' ]">
									{{item.name}}
								</span>
							</view>
						</scroll-view>
						<view style="font-size: 30upx; font-weight: 500; color: #F60C0C;
						line-height: 50upx; text-align: center;">
							请点选您当前的手机壳颜色
						</view>
						<view style="font-size: 30upx; font-weight: 500;line-height: 50upx; text-align: center;">
							{{ goods_id_e.modeltext || ''}}
						</view>
						<view class="determineBut" @click="well()">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 请选择颜色 -->
		<uni-popup ref="colorcenter" type="center" @change="change" style="position: fixed; z-index: 9999;">
			<view class="uni-share" style="width: 100%; margin: auto;">
				<view style="width: 690upx; margin:auto; display: flex; flex-direction: column;">
					<view
						style="width:100%; min-height: 1000upx; background: #dcdcdc; border-radius: 30upx; position: relative;">
						<view @click="colorCose()" style="position: absolute; top: 0upx; right: 0upx;">
							<image src="../../../static/icon_guanbi.png" mode="aspectFill"
								style="height: 23upx; width: 23upx; padding: 21upx 33upx;"></image>
						</view>
						<view style="margin:122upx auto 94upx;font-size: 36upx;text-align: center; color: #864BC3;">
							请在扇区点选自带的手机壳颜色
						</view>
						<view style="width: 690upx; height: 500upx;"
							v-if="chartData.series.length > 0 && chartDataState">
							<canvas canvas-id="canvasPie" id="canvasPie" style="width: 690upx; height: 500upx;"
								@touchstart="touchStart"></canvas>
						</view>
						<view v-else style="line-height: 500upx; text-align: center;">
							暂无颜色推荐
						</view>
						<view class="determineButtn" @click="well()">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 自带材质 -->
		<mpvue-picker ref="mpvuePicker" :themeColor="'#53B2B0'" :mode="mode" :pickerValueDefault="pickerValueDefault"
			@onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray">
		</mpvue-picker>
	</view>
</template>

<script>
	import homeservice from '@/service/homeservice.js';
	import uniPopup from '../common/uni-popup/uni-popup.vue';
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import uCharts from '@/js_sdk/u-charts/u-charts.js';
	var _self;
	var canvaPie = null;
	export default {
		props: {
			// windowHeight: {
			// 	type: Number,
			// 	default: 1
			// },
			// pixelRate: {
			// 	type: Number,
			// 	default: 1
			// },
		},
		components: {
			uniPopup,
			mpvuePicker
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				chartData: {
					categories: [],
					series: []
				},
				chartDataState: false,
				mode: 'selector',
				pickerValueArray: [],
				pickerValueDefault: [0],
				brands: [],
				currentId: 0,
				/* 控制被选中 */
				currentIndex: 0,
				/* 控制位置 */
				brandsitem: null,
				queryPage: {
					s: 'Material.list',
				},
				category: 0, // 0：定制壳 1：自带壳
				baseSetting: null, //获取设备是否开启支付、是否开放材质的接口
				choose_surfaceState: false, // 是否开启材质选择 0：不开放 1：开放
				self_surfaceState: false, // 是否开启自带材质 0：不开放 1：开放
				texture: { //自带材质
					materialScience: null, //名称
					materialScienceId: null, //自带材质id
					price: null, //金额
				},
				long: null,
				catrgoryList: [],
				sizelist: [],
				brandtext: null,
				modeltext: null,
				goods_id: null,
				dict_id: null,
				machine_id: null,
				key: null, //1直营配送站 2 万能通用版 3色彩自助站
				goods_id_e: null,
				sn: null,
				titleHeight: 0,
				MobilePhoneHeight: 0,
				pixelRate: 1,
				surface_id: 0, //材质对应的编号，没有的话就为0或者不传
				surface_color: null, //材质颜色
				surfaceName: null, //材质名称
				surface_color_series_id: 0, //选择的色系编号，没有的话就不传或者为0
				surface_color_id: 0, //选择的颜色编号，没有的话就不传或者为0
				surface_color_series_id_text: null,
				surface_color_id_text: null,
				ColorSeriesData: null, //获取色彩主题的接口
				switchBrandState: 0, //0正常 1跳过选择手机型号 2定制页选择材质
				scrollLeft: 0,
				old: {
					scrollLeft: 0,
					scrollWidth: 0
				},
				backgroundColorId: null,
				backgroundColorData: [],
				isShowCustomize: false, //是否显示自定义尺寸
			};
		},
		mounted() {},
		methods: {

			//调转自定义页面
			toCustomSize() {
				this.$emit('toCustomSize')
			},

			backgroundColor(item) {
				this.surface_color_series_id = item.surface_color_series_id //选择的色系编号，没有的话就不传或者为0
				this.surface_color_id = item.id
				this.surface_color_id_text = item.color_code
			},

			scrollLeftTo(e) {
				this.old.scrollLeft = e.detail.scrollLeft
				this.old.scrollWidth = e.detail.scrollWidth
			},

			leftTo() {
				this.scrollLeft = this.old.scrollLeft
				this.$nextTick(() => {
					this.scrollLeft = 0
				})
			},
			rightTo() {
				this.scrollLeft = this.old.scrollLeft
				let Width = uni.upx2px(540);
				let cWidth = uni.upx2px(172);
				if (this.brands.length > 3) {
					this.scrollLeft = this.scrollLeft + cWidth
				}
			},
			open(options) {
				this.surface_color_series_id = 0 //选择的色系编号，没有的话就不传或者为0
				this.surface_color_id = 0 //选择的颜色编号，没有的话就不传或者为0
				this.surface_color_id_text = null //选择的颜色名称
				this.category = 0 // 0：定制壳 1：自带壳
				if (options.isShowCustomize) {
					this.isShowCustomize = options.isShowCustomize
				}else{
					this.isShowCustomize = false
				}
				//获取导航条高度
				let sys = this.$base.appInformation ? this.$base.appInformation : wx.getSystemInfoSync(); // 自定义页头适配
				let navBarHeight = sys.screenHeight - sys.windowHeight - sys.statusBarHeight;
				this.titleHeight = sys.statusBarHeight + 46
				//获取屏幕宽高
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						that.MobilePhoneHeight = res.windowHeight - that.titleHeight // 屏幕高度
						that.pixelRate = res.windowWidth / 750;
					},
				})
				if (options.switchBrandState == 0) { //0正常 1跳过选择手机型号 2定制页选择材质
					this.$nextTick(() => {
						this.$refs['brandscenter'].open()
					})
				}
				if (options.machine_id != 'null') {
					this.machine_id = options.machine_id;
					this.key = options.key;
					this.goods_id = options.goods_id;
					this.sn = options.sn;
					this.switchBrandState = options.switchBrandState
				}
				if (options.switchBrandState == 0) { //0正常 1跳过选择手机型号 2定制页选择材质
					this.Customize_now() // 查询手机壳品牌
				}
				this.machineGetBaseSetting(options) // 获取设备是否开启支付、是否开放材质的接口
			},
			customDhell() { // 定制壳
				this.category = 0
			},
			selfContainedShell() { // 自带壳
				this.category = 1
			},
			colorCose() {
				this.chartDataState = false
				this.$refs['colorcenter'].close() //关闭颜色
			},
			imageTo(e) {
				this.surface_color_series_id = 0 //选择的色系编号，没有的话就不传或者为0
				this.surface_color_id = 0
				let touchMoveX = e.touches[0].clientX;
				let touchMoveY = e.touches[0].clientY - (250 * this.pixelRate + this.titleHeight);
				let support
				if ((touchMoveX > 165 && touchMoveX < 210) && (touchMoveY > 0 && touchMoveY < 140)) {
					this.surface_color_series_id_text = '黑色色系'
					this.surface_color_series_id = 1
					support = this.ColorSeriesData.filter(function(item) {
						return item.id == 1
					})[0].support
				} else if ((touchMoveX > 210 && touchMoveX < 375) && (touchMoveY > 0 && touchMoveY < 150)) { //白色
					this.surface_color_series_id_text = '白色色系'
					this.surface_color_series_id = 2
					support = this.ColorSeriesData.filter(function(item) {
						return item.id == 2
					})[0].support
				} else if ((touchMoveX > 170 && touchMoveX < 375) && (touchMoveY > 150 && touchMoveY < 312)) { //浅色
					this.surface_color_series_id_text = '浅色色系'
					this.surface_color_series_id = 4
					support = this.ColorSeriesData.filter(function(item) {
						return item.id == 4
					})[0].support
				} else if ((touchMoveX > 0 && touchMoveX < 165) && (touchMoveY > 0 && touchMoveY < 312)) { //深色
					this.surface_color_series_id_text = '深色色系'
					this.surface_color_series_id = 3
					support = this.ColorSeriesData.filter(function(item) {
						return item.id == 3
					})[0].support
				}
				if (support.value == 1) {
					this.getColorBySeries()
				} else {
					// uni.showToast({
					// 	title: '不支持色系！',
					// 	icon: 'none'
					// });
				}
			},
			getColorBySeries() {
				this.$nextTick(() => {
					this.$refs['colorcenter'].open()
				})
				// 获取主题下颜色
				homeservice.userphoneappletsIndex({
					s: 'Surface.getColorBySeries',
					color_series_id: this.surface_color_series_id
				}).then(result => {
					this.chartData.series = []
					result.forEach(item => {
						this.chartData.series.push({
							name: item.name,
							data: 1,
							color: item.color_code,
							id: item.id,
						})
					})
					this.chartDataState = true
					this.cWidth = uni.upx2px(690);
					this.cHeight = uni.upx2px(500);
					this.showPie("canvasPie", this.chartData);
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.stopPullDownRefresh();
					// uni.showToast({
					// 	title: err.msg || err.data,
					// 	icon: 'none'
					// });
				});
			},
			showPie(canvasId, chartData) {
				_self = this;
				canvaPie = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					legend: {
						"show": false,
					}, //图例设置，是否显示图表下方各类别的标识
					dataLabel: false, //是否在图表中显示数据标签内容值
					dataPointShape: false, //是否在图表中显示数据点图形标识
					extra: {
						pie: {
							lableWidth: 15
						}
					},
				});
			},
			touchStart(e) {
				_self = this;
				_self.surface_color_id = 0
				_self.surface_color_id_text = null
				canvaPie.showToolTip(e, {
					format: function(item) {
						_self.surface_color_id = item.id
						_self.surface_color_id_text = item.color
						return item.name
					}
				})
			},
			well() {
				var loading = false
				if (loading) return;
				if (this.surface_color_id == 0) { //自带
					uni.showToast({
						title: '请选择自带的手机壳颜色！',
						icon: 'none'
					});
					return false;
				}
				loading = true
				if (loading) {
					this.chartDataState = false
					this.$refs['colorcenter'].close()
					this.determine(1)
				}
			},
			loadbgImage(e) { //获取图片真实
				var width = e.detail.width * this.pixelRate; //获取图片真实
				var height = e.detail.height * this.pixelRate; //获取图片真实高度
			},
			ordersize(surface_id) {
				if (this.key == 2) {
					uni.navigateTo({
						url: '../mine/goodsordersize?surface_id=' + surface_id
					})
				} else {
					uni.navigateTo({
						url: '../mine/goodsordersize?goods_id=' + surface_id
					})
				}
			},
			typeShow() {
				this.$refs.mpvuePicker.show();
			},
			onConfirm(e) { //自带材质
				this.texture.materialScience = e.label
				this.texture.materialScienceId = e.value[0]
				this.texture.price = this.pickerValueArray.filter(function(item) {
					return item.value == e.value[0]
				})[0].price
			},
			onChange(e) { //自带材质
				this.texture.materialScience = e.label
				this.texture.materialScienceId = e.value[0]
				this.texture.price = this.pickerValueArray.filter(function(item) {
					return item.value == e.value[0]
				})[0].price
			},
			onCancel(e) { //自带材质
				// console.log(e)
			},
			determine(e) {
				if (this.key == 2) { //单机版
					var loading = false
					if (loading) return;
					if (this.brandsitem == null && e == 2) { //定制
						uni.showToast({
							title: '请选择手机壳材质！',
							icon: 'none'
						});
						return false;
					}
					if (this.texture.materialScienceId == null && e == 1) { //自带
						uni.showToast({
							title: '请选择手机壳材质！',
							icon: 'none'
						});
						return false;
					}
					if (this.surface_color_id == 0 && e == 1) { //自带
						uni.showToast({
							title: '请选择手机壳颜色！',
							icon: 'none'
						});
						return false;
					}
					loading = true
					if (loading) {
						if (e == 2) {
							this.surface_id = this.brandsitem.id
							this.surface_color = this.brandsitem.color
							this.surfaceName = this.brandsitem.name
							this.surface_color_series_id = 0
							this.surface_color_id = 0
							this.surface_color_series_id_text = null
							this.surface_color_id_text = null
						} else if (e == 1) {
							this.surface_id = this.texture.materialScienceId
							this.surface_color = null
							this.surfaceName = null
						}
						this.$emit('goodsbrands', {
							sn: this.sn,
							goods_id_e: this.goods_id_e, //手机壳信息
							surface_type: e, //材质类型 0：默认 1：自带壳 2：定制壳
							surface_id: this.surface_id, //材质对应的编号，没有的话就为0或者不传
							surface_color: this.surface_color, //材质颜色
							surfaceName: this.surfaceName, //材质名称
							surface_color_series_id: this.surface_color_series_id, //选择的色系编号，没有的话就不传或者为0
							surface_color_id: this.surface_color_id, //选择的颜色编号，没有的话就不传或者为0
							surface_color_series_id_text: this.surface_color_series_id_text, //选择的色系编号名称
							surface_color_id_text: this.surface_color_id_text, //选择的颜色编号
							switchBrandState: this.switchBrandState,
						})
						this.$refs['shellShow'].close() //关闭手机壳子弹框
					}
				} else {
					var loading = false
					if (loading) return;
					if (this.brandsitem == null) { //定制
						uni.showToast({
							title: '请选择手机壳材质！',
							icon: 'none'
						});
						return false;
					}
					loading = true
					if (loading) {
						this.$base.goodsOldId = this.$base.goodsTemporaryId //产品id
						// 自助机获取商品和货道
						homeservice.queryList({
							s: 'Product.machineDetail', //新接口
							machine_id: this.machine_id,
							id: this.brandsitem.id //商品id
						}).then(result => {
							this.modeltext = this.brandsitem.name //机型名
							this.goods_id = this.brandsitem.id //产品id
							this.dict_id = result.dict_id //产品属性id
							this.goods_id_e = {
								brandtext: this.brandsitem.name, // 品牌名
								modeltext: this.brandsitem.name, // 机型商品名
								goods_id: this.brandsitem.id, // 产品id
								dict_id: result.dict_id, // 产品属性
							}
							this.$emit('goodsbrands', {
								sn: this.sn,
								goods_id_e: this.goods_id_e,
								surface_type: 0, //材质类型 0：默认 1：自带壳 2：定制壳
								surface_id: 0, //材质对应的编号，没有的话就为0或者不传
								surface_color: null, //材质颜色
								surfaceName: null, //材质名称
								surface_color_series_id: 0, //选择的色系编号，没有的话就不传或者为0
								surface_color_id: 0, //选择的颜色编号，没有的话就不传或者为0
								surface_color_series_id_text: null,
								surface_color_id_text: 'none', //手机底色
								switchBrandState: 0,
							})
							this.$refs['shellShow'].close() //关闭手机壳子弹框
						}).catch(err => {
							// uni.showToast({
							// 	title: err.msg,
							// 	icon: 'none'
							// });
						});
					}
				}
			},
			handleScroll(item, index) {
				this.brandsitem = item;
				this.currentId = index;
				this.currentIndex = Math.max(0, index - 1);
			},
			cancelBrand() {
				this.$refs['brandscenter'].close()
			},
			cancelModel() {
				this.$refs['modelShow'].close()
			},
			shellModel() {
				this.$refs['shellShow'].close() //关闭手机壳子弹框
			},
			shellTo() {
				this.$refs['modelShow'].close() //关闭机型弹框
				// this.baseSetting.choose_surface = 1// 是否开启材质选择 0：不开放 1：开放
				// this.baseSetting.self_surface = 1// 是否开启自带材质 0：不开放 1：开放
				if (this.baseSetting.choose_surface == 1) { //开启材质选择
					homeservice.userphoneappletsIndex({ // 获取定制壳 
						s: 'Surface.getSurfaceByGoods',
						machine_id: this.machine_id,
						goods_id: this.goods_id || 83
					}).then(result => {
						this.brands = []
						this.brandsitem = null
						if (result.length > 0) {
							this.brands = result
							this.brandsitem = result[0]
						}

						//判断只有一个自定壳材质 直接调转Diy 界面
						if (this.brands.length == 1 && this.baseSetting.self_surface == 0) {
							this.determine(2)
						} else {
							this.shellwo()
						}

						//this.shellwo()
						uni.stopPullDownRefresh();
					}).catch(err => {
						uni.stopPullDownRefresh();
						uni.showToast({
							title: err.msg || err.data,
							icon: 'none'
						});
					});
				} else {
					this.shellwo()
				}
				// this.baseSetting.choose_surface = 1// 是否开启材质选择 0：不开放 1：开放
				// this.baseSetting.self_surface = 1// 是否开启自带材质 0：不开放 1：开放
				if (this.baseSetting.self_surface == 1) { //开启自带材质
					// 获取自带壳
					homeservice.userphoneappletsIndex({
						s: 'Surface.getAllByCategory',
						category: 1, // 1：自带壳 2：定制壳
					}).then(result => {
						if (result.length > 0) {
							this.pickerValueArray = []
							result.forEach((item, index) => {
								this.pickerValueArray.push({
									label: item.name,
									value: item.id,
									name: item.name,
									id: item.id,
									preview: item.preview,
									price: item.price
								})
							})
							// 默认第一个
							this.texture.materialScience = this.pickerValueArray[0].label
							this.texture.materialScienceId = this.pickerValueArray[0].value
							this.texture.price = this.pickerValueArray[0].price
						}
						uni.stopPullDownRefresh();
					}).catch(err => {
						uni.stopPullDownRefresh();
						uni.showToast({
							title: err.msg || err.data,
							icon: 'none'
						});
					});
					// 获取色彩主题的接口
					homeservice.userphoneappletsIndex({
						s: 'Surface.getAllColorSeries'
					}).then(result => {
						this.ColorSeriesData = result
						uni.stopPullDownRefresh();
					}).catch(err => {
						uni.stopPullDownRefresh();
						uni.showToast({
							title: err.msg || err.data,
							icon: 'none'
						});
					});
					// 获取色系所有的颜色
					homeservice.userphoneappletsIndex({
						s: 'Surface.getAllColor'
					}).then(result => {
						this.backgroundColorData = result
						uni.stopPullDownRefresh();
					}).catch(err => {
						uni.stopPullDownRefresh();
						uni.showToast({
							title: err.msg || err.data,
							icon: 'none'
						});
					});
				}
			},
			shellwo() {
				this.choose_surfaceState = false //关闭材质选项框
				this.self_surfaceState = false //关闭自带选项框
				if (this.baseSetting.choose_surface == 1 && this.baseSetting.self_surface == 1) {
					if (this.brands.length > 0) {
						this.choose_surfaceState = true
						this.self_surfaceState = true
					} else {
						this.choose_surfaceState = false
						this.self_surfaceState = false
						this.category = 1
					}
				} else if (this.baseSetting.choose_surface == 0 && this.baseSetting.self_surface == 1) {
					this.choose_surfaceState = false
					this.self_surfaceState = false
					this.category = 1
				} else if (this.baseSetting.choose_surface == 1 && this.baseSetting.self_surface == 0) {
					if (this.brands.length <= 0) {
						this.changeChannel()
						return;
					}
				}
				this.currentId = 0
				this.currentIndex = 0
				this.pickerValueDefault = [0]
				this.$nextTick(() => {
					this.$refs['shellShow'].open() //打开手机壳子弹框
				})
			},
			machineGetBaseSetting(options) { // 获取设备是否开启支付、是否开放材质的接口
				// homeservice.machineGetBaseSetting({
				// 	s: 'Machine.getBaseSetting',
				// 	machine_id: this.machine_id,
				// }).then(result => {
				 	this.baseSetting = options.baseSetting
					console.log(this.baseSetting);
					if (options.switchBrandState == 1 || options.switchBrandState == 2) { //1跳过选择手机型号 2定制页选择材质
						this.goods_id_e = {
							brandtext: this.$base.appInformation.brand, // 品牌名
							modeltext: this.$base.appInformation.model, // 机型名
							goods_id: options.goods_id, // 产品id
							dict_id: options.dict_id, // 产品属性
						}
						this.modeltext = this.$base.appInformation.model //机型名
						this.goods_id = options.goods_id //产品id
						this.dict_id = options.dict_id //产品属性id
						// 测试数据
						// this.baseSetting.choose_surface = 1// 是否开启材质选择 0：不开放 1：开放
						// this.baseSetting.self_surface = 1// 是否开启自带材质 0：不开放 1：开放
						if (this.key == 2) { //单机版
							if (this.baseSetting.choose_surface == 0 && this.baseSetting.self_surface == 0) {
								this.changeChannel()
							} else {
								this.shellTo()
							}
						} else { //自助版
							if (this.$base.goodsOldId) {
								this.$base.goodsTemporaryId = this.$base.goodsOldId //更新产品id
							}
							this.shellSelfHelp()
						}
					}
			},
			brandclick(e) {
				// 获取设备指定品牌下的在线商品
				homeservice.queryList({
					s: 'Product.getBrandProducts', //新接口
					goods_brand_id: e.id, //品牌id
					machine_id: this.machine_id,
					key: this.key
				}).then(result => {
					this.brandtext = e.title // 品牌名
					this.$base.appInformation.brand = e.title // 品牌名
					this.sizelist = result // 品牌机型
					this.$refs['brandscenter'].close()
					this.$nextTick(() => {
						this.$refs['modelShow'].open()
					})
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				});
			},
			modelclick(e) {
				// 自助机获取商品和货道
				homeservice.queryList({
					s: 'Product.machineDetail', //新接口
					machine_id: this.machine_id,
					id: e.id //品牌id
				}).then(result => {
					this.goods_id_e = {
						brandtext: e.name, // 品牌名
						modeltext: e.name, // 机型商品名
						goods_id: e.id, // 产品id
						dict_id: result.dict_id, // 产品属性
					}
					this.modeltext = e.name //机型名
					this.$base.appInformation.model = e.name //机型名
					this.goods_id = e.id //产品id
					this.$base.goodsTemporaryId = e.id //更新产品id
					this.dict_id = result.dict_id //产品属性id
					// this.baseSetting.choose_surface = 1// 是否开启材质选择 0：不开放 1：开放
					// this.baseSetting.self_surface = 1// 是否开启自带材质 0：不开放 1：开放
					//console.log(this.baseSetting+"this.key="+this.key)
					if (this.key == 2) { //单机版
						if (this.baseSetting.choose_surface == 0 && this.baseSetting.self_surface == 0) {
							this.changeChannel()
						} else {
							this.shellTo()
						}
					} else { //自助版
						this.shellSelfHelp()
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				});
			},
			shellSelfHelp() {
				this.$refs['modelShow'].close() //关闭机型弹框
				// 自助机获取商品同型号下不同的材质
				homeservice.userphoneappletsIndex({
					s: 'Product.getSameModes', //新接口
					machine_id: this.machine_id,
					key: this.key,
					goods_id: this.$base.goodsTemporaryId //商品id
				}).then(result => {
					this.brands = []
					this.brandsitem = null
					if (result.length > 0) {
						result.forEach(item => {
							item.preview = item.surface_pic
							item.price = item.sales_price
						})
						this.brands = result
						this.brandsitem = result[0]
					}

					//判断只有一个自定壳材质 直接调转Diy 界面
					if (this.brands.length == 1 && this.baseSetting.self_surface == 0) {
						this.determine(2)
					} else {
						this.shellSelfHelpwo()
					}

					//this.shellSelfHelpwo()
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: err.msg || err.data,
						icon: 'none'
					});
				});
			},
			shellSelfHelpwo() {
				this.choose_surfaceState = false //关闭材质选项框
				this.self_surfaceState = false //关闭自带选项框
				// 默认
				this.currentId = 0
				this.currentIndex = 0
				this.pickerValueDefault = [0]
				this.$nextTick(() => {
					this.$refs['shellShow'].open() //打开手机壳子弹框
				})
			},
			change(e) {},
			//获取设备在线商品的品牌
			Customize_now() {
				homeservice.queryList({
					s: 'Product.getBrands', //新接口
					machine_id: this.machine_id,
					key: this.key
				}).then(result => {
					this.catrgoryList = result;
					this.$base.productfind = result //缓存下来
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				});
				this.sizelist = []
				this.brandtext = null
				this.modeltext = null
				this.goods_id = null
				this.dict_id = null
			},
			cancel_center() {
				this.modeltext = null
				this.goods_id = null
				this.dict_id = null
				this.sizelist = []
			},
			changeChannel() {
				var loading = false
				if (loading) return;
				// if (this.goods_id == null) {
				// 	uni.showToast({title: '请选择手机壳型号！',icon: 'none'});
				// 	return false;
				// }
				loading = true
				if (loading) {
					this.$refs['modelShow'].close()
					// 有设备判断设备是否正常
					if (this.machine_id != undefined && this.machine_id != null && this.machine_id != '') {
						if (this.key == 2) {
							this.goodsbrandTo()
						} else {
							// 锁定库存// s: 'Order.lockAttrStock',
							homeservice.queryList({
								s: 'Order.newLockAttrStock',
								machine_id: this.machine_id, //设备id
								goods_id: this.goods_id, //产品
								dict_id: this.dict_id, //产品属性id
								old_sn: this.sn
							}).then(result => {
								this.$base.lockInventory = result //锁库存储存信息
								this.sn = result.sn
								uni.setStorage({
									key: 'setgood',
									data: {
										sn: this.sn,
										brandtext: this.brandtext,
										modeltext: this.modeltext,
										goods_id: this.goods_id
									},
									success: function() {
										// console.log('success');
									}
								});
								this.goodsbrandTo()
							}).catch(err => {
								uni.showToast({
									title: err.msg || err.data,
									icon: 'none'
								});
							});
						}
					} else {
						this.goodsbrandTo()
					}
				}
			},
			goodsbrandTo() {
				this.$emit('goodsbrands', {
					sn: this.sn,
					goods_id_e: this.goods_id_e,
					surface_type: 0, //材质类型 0：默认 1：自带壳 2：定制壳
					surface_id: 0, //材质对应的编号，没有的话就为0或者不传
					surface_color: null, //材质颜色
					surfaceName: null, //材质名称
					surface_color_series_id: 0, //选择的色系编号，没有的话就不传或者为0
					surface_color_id: 0, //选择的颜色编号，没有的话就不传或者为0
					surface_color_series_id_text: null,
					surface_color_id_text: 'none', //手机底色
					switchBrandState: 0,
				})
			},
		},
		onShow(options) {
			
		},
	}
</script>

<style lang="scss">
	.classification {
		width: 300upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		background: #EEEEEE;
		border-radius: 0 0 40upx 0;
		font-size: 36upx;
		color: #666666;

		&.active {
			background: #864BC3 !important;
			color: #FFFFFF !important;
		}
	}

	// 分类
	.scroll-container {
		box-sizing: border-box;
		white-space: nowrap;
		width: 540upx;
		margin: auto;

		.scroll-item {
			width: 152upx;
			height: 248upx;
			background: #F5F5F5;
			border-radius: 20upx;
			text-align: center;
			display: inline-block;
			margin: 0 10upx;
			border: 4upx solid #F5F5F5;

			&.active {
				background: #FFFFFF !important;
				border: 4upx solid #864BC3;
			}

			//  &.active::before {
			// 	content: '...';
			// 	position: absolute;
			// 	left: calc(50% - 10px);
			// 	top: 100%;
			// 	width: 20px;
			// 	margin-left: 0px;
			// 	margin-top: -5px;
			// 	border-top: 4px dotted #595959;
			// }
		}
	}

	.experiencebutton {
		width: 230upx;
		height: 70upx;
		line-height: 70upx;
		text-align: center;
		color: #FFFFFF;
		margin: 40upx auto 0;
		border-radius: 35upx;
		background: linear-gradient(to right, #834DC4, #1983D7);
		font-size: 26upx;
	}

	.canbutton {
		color: #FFFFFF;
		font-size: 26upx;
		width: 218upx;
		height: 58upx;
		line-height: 58upx;
		border: 1px transparent solid;
		border-radius: 30px;
		position: relative;
		margin: auto;
		background: #292933;
		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;
	}

	// 品牌
	.brandactive {
		background: #E4D0F6 !important;
	}

	.backgroundColoractive {
		border: 2upx #834DC4 solid !important;
	}

	.tooltiptext {
		visibility: hidden;
		min-width: 120upx;
		background-color: black;
		color: #fff;
		text-align: center;
		border-radius: 6upx;
		padding: 5upx 0;
		font-size: 20upx;
		/* 定位 */
		position: fixed;
		z-index: 1;
	}

	.tooltiptextactive {
		visibility: visible;
	}

	// 型号
	.model {
		padding: 0upx 20upx;
		height: 60upx;
		line-height: 60upx;
		background: #141319;
		text-align: center;
		color: #FFFFFF;
		border-radius: 30upx;
		margin-right: 20upx;
		font-size: 28upx;
	}

	.modelactive {
		color: #553177 !important;
	}

	.determineBut {
		background: linear-gradient(92deg, #178CE6, #984ACE);
		color: #FFFFFF;
		position: fixed;
		bottom: 110upx;
		text-align: center;
		left: 0;
		right: 0;
		width: 251upx;
		height: 77upx;
		line-height: 77upx;
		border-radius: 38upx;
		font-size: 31upx;
		margin: auto;
	}

	.determineButtn {
		width: 251upx;
		margin: 34upx auto 0;
		height: 77upx;
		line-height: 77upx;
		text-align: center;
		background: linear-gradient(92deg, #178CE6, #984ACE);
		opacity: 0.86;
		border-radius: 38upx;
		font-size: 31upx;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>