<template>
	<view>
		<view style="width:630upx; margin:auto; display: flex; flex-direction: column;">
			<view style="width:100%; min-height: 741upx; background: #282932; border-radius: 10upx; position: relative;">
				<view @click="cancel()" style="position: absolute; top: 0upx; right: 0upx;">
					<image src="../../static/mine/icon_guanbi.png" mode=""
					style="height: 23upx; width: 23upx; padding: 21upx 33upx;"></image>
				</view>
				<!-- 品牌 -->
				<view v-if="sizelist.length == 0">
					<view style="margin:46upx auto 52upx;font-size: 36upx; color: #FFFFFF; text-align: center;">
						请选择定制手机壳品牌
					</view>
					<!-- 无数据 -->
					<view v-if="catrgoryList.length == null" style="text-align: center; color: #BEBEBE;">该设备没有库存</view>
					
					<scroll-view scroll-y scroll-with-animation style="box-sizing: border-box;white-space: nowrap;
					width: 288upx; margin:30upx auto; height: 600upx; overflow: hidden;">
						<view v-for="(item,index) in catrgoryList" :key="index" @click="brandclick(item)"
						:class="[brandtext == item.title ? 'brandactive':'' ]"
						style="margin-bottom: 10upx; display: flex;align-items: center;
						background: #373743;border-radius: 10upx;height: 90upx; line-height: 90upx; justify-content: center; overflow: hidden;">
							<view style="width: 45%;">
								<image :src="item.icon" mode="aspectFit" style="width: 30%; height: 60upx; margin-right: 26upx; float: right;"></image>
							</view>
							<view style="width: 55%;">
								<view style="text-align: left; color: #FFFFFF; font-size: 28upx;" >{{item.title}} </view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 机型 -->
				<view v-if="sizelist.length > 0">
					<view style="margin:46upx auto 52upx;font-size: 36upx; color: #FFFFFF; text-align: center;">
						请选择手机壳型号
					</view>
					<scroll-view scroll-y scroll-with-animation style="box-sizing: border-box;white-space: nowrap;
					width: calc(100% - 60upx); margin:30upx auto; height: 500upx; overflow: hidden;">
						<view v-for="(item,index) in sizelist" :key="index" style="float: left; margin-bottom: 20upx;">
							<view class="model" :class="[modeltext == item.title ? 'modelactive':'' ]" @click="modelclick(item)">{{item.title}} </view>
						</view>
					</scroll-view>
					<view style="width:100%; display: flex; height: 100upx; align-items: center;border-radius:0 0 10upx 10upx; position: relative;z-index: 3; margin-bottom: 20upx;">
						<view @click.stop="cancel_center()"  style="width:50%;">
							<view class="canbutton">返回</view>
						</view>
						<view @click.stop="changeChannel()" style="width:50%;">
							<view class="experiencebutton" style="margin: auto;">
								确定
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import homeservice from '@/service/homeservice.js';
	export default {
		props: {
			// sn: {
			// 	type: Number
			// }
		},
		components: {
			
		},
		data() {
			return {
				queryPage: {
					s: 'Material.list',
				},
				long: null,
				catrgoryList:null,
				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
			};
		},
		mounted() {
			
		},
		/**
		 * 组件的公有方法列表
		 */
		methods: {
			cancel(){
				this.$emit('brandscenterclose')
			},
			open(options) {
				this.catrgoryList = this.$base.productfind
				//console.log(options)
				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.Customize_now()
			},
			brandclick(e){
				this.brandtext = e.title
				this.sizelist = e.sub
			},
			modelclick(e){
				this.modeltext = e.title
				this.goods_id = e.id
				this.dict_id = e.dict_id
				this.goods_id_e = e
			},
			// 手机壳品牌
			Customize_now(){
				homeservice.queryList({
					s: 'product.find',
					machine_id:this.machine_id,
					key:this.key
				}).then(result => {
					this.catrgoryList = result[0].brand;
					this.$base.productfind = result[0].brand
					console.log(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(){
				// 释放锁定库存
				// homeservice.queryList({
				// 	// s: 'Order.lockAttrStock',
				// 	s: 'Order.newLockAttrStock',
				// 	machine_id:this.machine_id, //设备id
				// 	goods_id:null, //产品
				// 	dict_id:null,//产品属性id
				// 	old_sn:null,
				// 	onlyClear:1
				// }).then(result => {
					
				// }).catch(err => {
				// 	uni.showToast({title: err.msg || err.data,icon: 'none'});
				// });
				var loading = false
				if (loading) return;
				if (this.goods_id == null) {
					uni.showToast({title: '请选择手机壳型号！',icon: 'none'});
					return false;
				}
				loading = true
				if (loading) {
					// 有设备判断设备是否正常
					if(this.machine_id != undefined && this.machine_id != null && this.machine_id != ''){
						if(this.key == 2){
							this.$emit('goodsbrands',{
								sn:this.sn,
								goods_id_e:this.goods_id_e
							})
						}else{
							// 锁定库存
							homeservice.queryList({
								//s: 'Order.lockAttrStock',
								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 //锁库存储存信息
								//console.log(result.sn)
								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.$emit('goodsbrands',{
									sn:this.sn,
									goods_id_e:this.goods_id_e
								})
							}).catch(err => {
								uni.showToast({title: err.msg || err.data,icon: 'none'});
							});
						}
					}else{
						this.$emit('goodsbrands',{
							sn:this.sn,
							goods_id_e:this.goods_id_e
						})
					}
				}
			}
		},
		onShow(options) {
			
		},
	}
</script>

<style lang="scss">
	.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: #141319 !important;
		color: #FFFFFF !important;
	}
	// 型号
	.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: #1A7DCD;
	}
</style>
