<template>
	<view v-if="isShow" style="width: 100%; ">

		<view style="position: absolute;  top: 0; width: 100%; height: 100%; background: #999999; z-index:997; opacity: 0.5;  "
			@click="closeView()">
		</view>

		<view style=" width: 562upx; border-radius: 20upx; height: 900upx; z-index: 998; position: absolute ;margin:auto; top:0; right: 0; left: 0; bottom: 0;flex-direction: column">

			<image src="../../static/icon_home_good_back.png" style="width: 562upx; border-radius: 20upx;
			  height: 720upx;
			  left:50%;
			  top:50%;
			  transform: translate(-50%,-50%);
			  position: absolute;"/>

			<view style="position: absolute;  
			  width: 562upx; height:720upx;
			  top: 0;">
			
			 <!--<view style="
				 width: 200upx;
				 height: 120upx;
				 font-size: 34upx;
				 font-weight: 500;
				 color: #000; margin: 0 auto; 
				 text-align: center;line-height: 120upx;">蛋糕形状</view>-->

				<view style="height: 280upx;margin-top: 130upx;">
					<view v-for="(item,index) in goods" :key="index" @click="goodclick(item,index)">
						<view style="
					  margin-left: 70upx;
					 float: left;
					 border-radius: 15upx; 
					 position: relative;
					 width: 180upx;">
							<image mode="widthFix"
								:class="[goodCurrentIndexTop == index? 'good-item-select':'good-item-no-select' ]"
								:src="item.goods_pic + '?x-oss-process=image/resize,lfit,w_180'"></image>
							<view style="
							   text-align: center;
							   font-size: 30upx; 
							   width: 100%; 
							   color:#000; 
							   margin-top: 30upx;">
								{{item !=null ? item.name : ''}}
							</view>
						</view>
					</view>
				</view>

				<view style="margin-top: 50upx; width: 100%;  display: flex; flex-direction: row; justify-content: center;">
					<view v-for="(item,index) in selectGood.attribute" :key="index" @click="sizeclick(item,index)">
						<view style="
					    border-radius: 15upx; 
					    position: relative; 
		                margin: 10upx;">
							<view :class="[sizeCurrentIndexTop == index? 'size-item-select':'size-item-no-select' ]">
								{{item !=null ? item.title : '' }}
							</view>
						</view>
					</view>
			   </view>

			   <view @click="saveGood()" 
			    style="width: 289upx;
                height: 84upx;
                background: #F29F3D;
                border-radius: 42px; 
                color: #fff;
                font-size: 32upx;
                margin: 0 auto;
                line-height: 84upx;
                margin-top:60upx;
                text-align: center;">确定</view>

				<view v-if="isShowCustomize"  @click="toCustomSize()" 
				style="width: 289upx;
               height: 84upx;
               color: #F29F3D;
               font-size: 32upx;
               margin: 0 auto;
               line-height: 84upx;
               margin-top:20upx;
               text-align: center;"> 自定义尺寸</view>
			</view>
		</view>

	</view>
</template>

<script>
	import homeservice from '@/service/homeservice.js';
	export default {
		data() {
			return {
				isShow: false, //是否显示
				goods: [], //商品列表
				machine_id: null, //机器码
				selectGood: null, //选中商品
				goodCurrentIndexTop: 0, //上面商品选中
				sizeCurrentIndexTop: 0, //下面尺寸选中
				selectGoodSize: null, //选中商品尺寸
				isShowCustomize: false, //是否自定义选中
			};
		},
		mounted() {
			
		},

		methods: {

			//自定义尺寸
			toCustomSize() {
				this.isShow = false;
				this.$emit('toCustomSize');
			},

			//保存商品
			saveGood() {
				if (this.selectGood == null) {
					return;
				}
				if (this.selectGoodSize == null) {
					return;
				}
				this.isShow = false;
				this.goodtext = this.selectGoodSize.title //选择商品名
				this.$emit('selectGoodItem', {
					id: this.selectGood.id,
					title: this.goodtext,
					key: this.selectGoodSize.key,
				})
			},

			//关闭视图
			closeView() {
				this.isShow = false;
			},

			//商品点击事件
			goodclick(item, index) {
				this.selectGood = item;
				this.goodCurrentIndexTop = index;
				this.sizeCurrentIndexTop = 0;
				if (this.selectGood.attribute && this.selectGood.attribute.length > 0) {
					this.selectGoodSize = this.selectGood.attribute[0];
				}
			},

			//商品点击事件
			sizeclick(item, index) {
				this.selectGoodSize = item
				this.sizeCurrentIndexTop = index;
			},

			//打开页面
			open(machineId, isShowCustomize) {
				if (isShowCustomize) {
					this.isShowCustomize = isShowCustomize
				} else {
					this.isShowCustomize = false
				}
				this.machine_id = machineId;
				this.getGooods();
			},

			//获取商品列表
			getGooods() {
				let that = this;
				homeservice.queryList({
					machine_id: this.machine_id,
					s: 'machine.newDetail'
				}).then(result => {
					this.goods = result.goods;
					if (this.goods != null && this.goods.length > 0) {
						this.selectGood = this.goods[0];
						this.goodCurrentIndexTop = 0; //上面商品选中
					}
					if (this.selectGood.attribute && this.selectGood.attribute.length > 0) {
						this.selectGoodSize = this.selectGood.attribute[0];
						this.sizeCurrentIndexTop = 0; //下面尺寸选中
					}
					if (this.goods == null || this.goods.length == 0) {
						this.isShow = false;
						uni.showToast({
							title: "设备号不存在，或者没配置商品",
							icon: 'none'
						});
					} else {
						this.isShow = true;
					}
				}).catch(err => {
					this.isShow = false;
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				});
			},

			change(e) {

			},

		},

		onShow(options) {
			getGooods();

		},
		
		options(options){
			
		},
		

	}
</script>

<style lang="scss">
	.swiper-block {
		height: 100%;
		width: 100%;
	}

	.good-item-select {
		border: 5upx #F29F3D solid;
		height: 180upx;
		width: 180upx;
		border-radius: 15upx;
	}

	.good-item-no-select {
		height: 180upx;
		width: 180upx;
		border-radius: 15upx;
		border: 5upx transparent solid;
	}

	.size-item-select {
		border: 2upx #F29F3D solid;
		width: 66upx;
		height: 66upx;
		background: #F5F5F5;
		border-radius: 15upx;
		line-height: 66upx;
		color: #000;
		font-size: 30upx;
		text-align: center;
	}

	.size-item-no-select {
		width: 66upx;
		height: 66upx;
		background: #F5F5F5;
		border-radius: 15upx;
		line-height: 66upx;
		font-size: 30upx;
		color: #000;
		text-align: center;
		border: 2upx transparent solid;
	}
	
</style>
