<template>
	<view v-if="isShow"
		style=" position: absolute;  top: 0; width: 100%; height: 100%; display: flex; flex-direction: column;  "
		@click="closeView()">

		<view
			style="position: absolute;  top: 0; width: 100%; height: 100%; background: #999999; z-index: 999; opacity: 0.5;  ">
		</view>

		<view style=" position: absolute;
			top: calc(50% - 620upx); 
			height: 1250upx; 
			width: 100%;  
			margin:auto; 
			display: flex; 
			flex-direction: column;
			justify-content: center; 
			z-index: 999;">
			
			<scroll-view scroll-y scroll-with-animation style="box-sizing: border-box;white-space: nowrap;
			width: 700upx; margin:0 auto; overflow: hidden; height: 100%;">
				<view v-for="(item,index) in goods" :key="index" @click="goodclick(item)">
					<view style="float: left; margin: 10upx;
				display: flex;align-items: center;
				background: #fff;border-radius: 15upx; position: relative;
				height: 300upx; width: 210upx;" hover-class="brandactive" :class="[brandtext == item.title ? 'brandactive':'' ]">
						<image mode="widthFix" style="width:calc(100% - 60upx);margin: auto;"
							:src="item.goods_pic + '?x-oss-process=image/resize,lfit,w_700'"></image>
							
							<!-- front_image -->
							<!-- :src="item.goods_pic + '?x-oss-process=image/resize,lfit,w_700'"></image> -->
						<view style="text-align: center; font-size: 24upx; width: 100%; 
							color:#333; position: absolute; bottom: 20upx; ">
							{{item !=null ? item.name : ''}}
						</view>
					</view>
				</view>
			</scroll-view> 

			<!-- <swiper class="swiper-block" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
				circular='false' previous-margin='80rpx' next-margin='80rpx' :current="currentIndex"
				@change="swiperChangeGood">
				<swiper-item class="swiper-item" v-for="(item,index) in goods" :key="index" >
					<view @click="goodclick(item)"  :class="['slide-image', currentIndex === index?'active':'']" mode="aspectFill"
						style="justify-content: center; align-items: center;   ">
						<image :src="item.front_image_old + '?x-oss-process=image/resize,lfit,w_450'"
							style="width: 450upx;  position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);"
							mode="widthFix">
						</image>
					</view>
					<view
						style="width: 100%;font-size: 28upx;color: #333333;text-align: center; position: absolute; bottom: 100upx; z-index: 999;  ">
						{{item !=null ? item.name : ''}}
					</view>
				</swiper-item>
			</swiper> -->
		</view>

	</view>
</template>

<script>
	import homeservice from '@/service/homeservice.js';
	export default {
		data() {
			return {
				isShow: false, //是否显示
				goodtext: '', //选择商品名称
				/* 控制被选中 */
				currentIndex: 0,
				/* 控制位置 */
				goodsitem: null,
				queryPage: {
					s: 'Material.list',
				},
				goods: [], //商品列表
				machine_id: null, //机器码
			};
		},
		mounted() {},

		methods: {

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

			//商品列表滚
			swiperChangeGood(event) {
				this.currentIndex = event.detail.current
			},

			//商品点击事件
			goodclick(e) {
				this.isShow = false;
				this.goodtext = e.name //选择商品名
				this.$emit('selectGoodItem', {
					id: e.id,
				})
			},

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

			//获取商品列表
			getGooods() {
				let that = this;
				homeservice.queryList({
					s: 'Product.getCommonGoods', //新接口
					machine_id: this.machine_id, //机器码
				}).then(result => {
					this.goods = result;
					if (this.goods == null || this.goods == "") {
						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();

		},

	}
</script>

<style lang="scss">
	.swiper-block {
		height: 100%;
		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% - 100upx);
		width: 520upx;
		border-radius: 20upx;
		z-index: 1;
		margin: 0upx 40upx;
		background: url("../../static/item_good_frame.png")
	}

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


	/* .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;
		}
	} */

	// 分类
</style>
