<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.8) +'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:122upx auto 94upx;font-size: 36upx;text-align: center;">
						请选择手机品牌
					</view> -->
					<view style="margin:62upx auto 50upx;font-size: 36upx; text-align: center;">
						请选择商品
					</view>
					<scroll-view scroll-y scroll-with-animation
						:style="{height: (MobilePhoneHeight * 0.8) - 200*pixelRate +'px'}" style="box-sizing: border-box;white-space: nowrap;
					width: 510upx; margin:0 auto; overflow: hidden; margin-bottom: 50upx;">
						<view v-for="(item,index) in goods" :key="index" @click="goodclick(item)">
							<view style="float: left; margin: 10upx;
								display: flex;align-items: center;
								background: #EEEEEE;border-radius: 10upx;
								height: 150upx; width: 150upx;" hover-class="brandactive" :class="[goodtext == item.name ? 'brandactive':'' ]">
								<view style="width: 100%;">
									<image :src="item.front_image"
										style="width: 50%; height: 70upx; margin: auto; display: block;"></image>
									<view style="text-align: center; font-size: 24upx; margin-top: 10upx; width: 95%; margin: auto;
									overflow: hidden; text-overflow: ellipsis; white-space: nowrap;word-break:break-all;">
										{{item.name || ''}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<!-- 无数据 -->
					<view v-if="catrgoryList.length < 0" style="text-align: center; color: #BEBEBE;">该设备没有库存</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import homeservice from '@/service/homeservice.js';
	import uniPopup from '../index/common/uni-popup/uni-popup.vue';
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	var _self;
	var canvaPie = null;
	export default {
		props: {
			// windowHeight: {
			// 	type: Number,
			// 	default: 1
			// },
			// pixelRate: {
			// 	type: Number,
			// 	default: 1
			// },
		},
		components: {
			uniPopup,
			mpvuePicker
		},
		data() {
			return {
				goodtext: '', //选择商品名称
				goods: [],
				currentId: 0,
				/* 控制被选中 */
				currentIndex: 0,
				/* 控制位置 */
				goodsitem: null,
				queryPage: {
					s: 'Material.list',
				},

			};
		},
		mounted() {},

		methods: {


			//商品点击事件
			goodclick(e) {
				this.goodtext = e.name //选择商品名
				this.$refs['brandscenter'].close();
				this.$emit('selectGoodItem', {
					id: e.id,
					name: e.name, //手机壳信息
				})

			},

			//打开页面
			open() {
				this.getGooods();
				//this.$refs['brandscenter'].open();
			},


			//获取商品列表
			getGooods() {
				homeservice.queryList({
					s: 'Product.getCommonGoods', //新接口
				}).then(result => {
					this.goods = result;
					this.$refs['brandscenter'].open();
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				});
			},

			change(e) {},


		},

		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>
