<template>
	<view class="hot_main_content">
		<view class="clearfix">
			<view class="hot_head_left">
				<view>
					<text class="hot_title">
						<i v-if="style_setting.icon_url_show" class="hot_icon" :style="{'background-image':'url('+style_setting.icon_url+')'}"></i>
						{{style_setting.title}}
					</text>
					<text class="hot_sub_title">{{style_setting.sub_title}}</text>
				</view>
			</view>
			<view class="hot_cate_list">
				<text class="hot_cate_item" v-for="(item, key) in cate_list" :key="key" @click="changeCate(key)">{{item.cate_name}}</text>
			</view>
		</view>
		<view class="flex_goods" v-for="(val, key) in cate_list" :key="key" v-if="key === hotIndex">
			<view class="hot_goods_item" v-for="(item, index) in val.goods_list" :key="index">
				<image class="hot_goods_icon" :src="style_setting.angle_sign_url"></image>
				<image class="hot_goods_img" :src="item.default_image || $noGoodsImg" @click="$jumpGoodDetail(item.goods_id)"></image>
				<text class="hot_goods_name" v-if="style_setting.title_show">{{item.title}}</text>
				<text class="hot_goods_subname" v-if="style_setting.sub_title_show">{{item.sub_title}}</text>
				<view class="between_price">
					<view class="between_left" v-if="style_setting.price_show">
						<text class="hot_pro_price">￥{{item.price}}</text>
						<!-- <text class="hot_price">￥{{item.price}}</text> -->
					</view>
					<i class="hot_cart_icon" v-if="style_setting.cart_show" @click="$addCart(item.spec_id)"></i>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			wrapper_props: {
				type: Object
			}
		},
		data() {
			return {
				style_setting: this.wrapper_props.style_setting,
				cate_list: this.wrapper_props.cate_list,
				hotIndex: 0
			}
		},
		methods: {
			changeCate(index) {
				this.hotIndex = index
			}
		}
	}
</script>

<style lang="less" scoped>
	.clearfix::after {
		content: "";
		display: block;
		height: 0;
		clear:both;
		visibility: hidden;
	}
	.hot_main_content {
		width: 93.6%;
		margin: 0 auto;
	}
	.hot_head_left {
		display: inline-block;
		float: left;
	}
	.hot_icon {
		display: inline-block;
		width: 28rpx;
		height: 28rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.hot_title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium,PingFang SC;
		font-weight: 500;
		color: #464646;
		line-height: 44rpx;
		display: block;
	}
	.hot_sub_title {
		font-size: 22rpx;
		color: #7c7c7c;
		line-height: 32rpx;
		display: block;
	}
	.hot_cate_list {
		white-space: nowrap;
		overflow: scroll;
		position: relative;
		top: 10rpx;
	}
	.hot_cate_list::-webkit-scrollbar {
		display: none;
	}
	.hot_cate_item {
		width: 164rpx;
		height: 88rpx;
		line-height: 88rpx;
		display: inline-block;
		font-family: PingFangSC-Medium,PingFang SC;
		font-weight: 500;
		color: #464646;
		font-size: 32rpx;
		text-align: center;
	}
	.flex_goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.hot_goods_item {
			position: relative;
			width: 346rpx;
			text-align: center;
			margin-top: 20rpx;
			background: #fff;
			padding-bottom: 12rpx;
			.hot_goods_icon {
				position: absolute;
				left: 0;
				top: 0;
				width: 80rpx;
				height: 80rpx;
				z-index: 2;
			}
			.hot_goods_img {
				width: 280rpx;
				height: 280rpx;
			}
			.hot_goods_name, .hot_goods_subname {
				width: 280rpx;
				display: block;
				text-align: left;
				font-size: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: 0 auto;
			}
			.hot_goods_name {			
				color: #212121;
				margin-top: 16rpx;
			}
			.hot_goods_subname {
				color: #6e6e6e;
			}
		}
		.between_price {
			position: relative;
			width: 280rpx;
			height: 44rpx;
			margin: 12rpx auto 0;
			.between_left {
				position: absolute;
				left: 0;
			}
			text {
				display: block;
				text-align: left;
			}
			.hot_pro_price {
				font-size: 32rpx;
				font-family: PingFangSC-Regular,PingFang SC;
				font-weight: 400;
				color: #c3a070;
			}
			.hot_price {
				font-size: 24rpx;
				font-family: PingFangSC-Light,PingFang SC;
				font-weight: 300;
				color: #aeaeae;
				text-decoration: line-through;
			}
			.hot_cart_icon {
				display: inline-block;
				width: 44rpx;
				height: 44rpx;
				background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAAAAACN7WTCAAABfElEQVRIx2P4TyZgGNU4qnFUIxEafx87+eYvORqvVFRUbiTLxstTSktW/yHHj7/2FRa9ICtw/kzM2wa2/MTmzZs2gTAEbL3yi0Co7sye/A9IfcpGBVlZU/7i1/g4o/gryObzEJtgdm4uyliDX+PXgpQn2Ly0LaUNv8Z/PYl7sGlcnTiRQMpZETsXm8aJccsJaDwTXfULU9/3ouiDBDS+j4z5jKnxU3T4IwIaf+SFXMXUeCsk+jOh3NEfuBpT4+bAwl+ENK7x68bUOMOvl2B+vOmd8h1d7F+F9xKCGj/5e75DF/sc6X6MoMbfOS7oiv6/dnF5SbjomODYhV4O7HIM+ExY4z5b+1lr1gPBurVr16xZs3rVipnetpV/CWv8XmiFAbzuElPKfd4wpb8PCPr7+yeAwMRJK14Mt5L822ZQmJ6FhOOHTSDOub/EaFwVCwYfwJxFYHbcR2I03stJTk5OgqaC6xkgTjdRNv7//R0I/sEKaWTOaI08qnHoaQQAAyi97TBEkioAAAAASUVORK5CYII=) no-repeat;
				background-size: 100% 100%;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}
</style>