<template>
	<view class="sh-option-tags p-b-20 m-l-20">
		<view class='shop-item' :class="item.isCheck? 'f-active-color':''" v-for="(item,index) in tagsList" :key="index" @tap="changeTab(index,item)" >
			<view class="item">{{item.brandName}}</view>
			<!-- <view class='shop-icon' v-show="item.key=='priceAsc'">
				<u-icon :name="item.status ===1?'arrow-up-fill':'arrow-down-fill'" color="#8e8e8e" size="8"></u-icon>
			</view> -->
		</view>
	</view>	
</template>

<script>
	import { EventBus } from "@/shopro/eventBus/eventBus.js";
	 export default{
		 props:{
			tagsList: {
				type: Object,
				default() {
					return [];
				}
			},
		},
		data() {
			return {
				lineBg:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAYAAABdC15GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFxSURBVHgBzZNRTsJAEIb/WTW+lpiY+FZPIDew3ABP4GJ8hxsI9zBpOYHeQDwBPQI+mRiRvpLojtPdYhCorQqF/6GdbGd2vvwzBXZcNAt4oj1ANeUoAT5iqkUjbEFLHNmhD1YPEvpZ3ghkGlVDCkc94/BmHMq998I5ONiY1ZBfpKAyuOtgAc5yOEDmYEWNh32BHF91sGHZHmwW4azciN9aQwnz3SJEgOmte+R2tdLprTYoa50mvuomlLpD4Y3oQZnov6D2RzCqI93bWOHaEmAGqQUyRBlZR1WfarcD/EJ2z8DtzDGvsMCwpm8XOCfDUsVOCYhiqRxI/CTQo4UOvjzO7Pow18vfywneuUHHUUxLn55lLw5JFpZ8bEUcY8oXdOLWiHLTxvoGpLqoUmy6dBT15o/ox3znpoycAmxUsiJTbs1cmxeVKp+0zmFIS7bGWiVghC7Vwse8jFKAX9eljh4ggKLLv7uaQvG9/F59Oo2SouxPu7OTCxN/s8wAAAAASUVORK5CYII=",
				shopList:{
					currentIndex:0,
					data:[
						{name:"京东自营",status:0,key:"new"},
						{name:"全部分类",status:0,key:"priceAsc"},
						{name:"全部品牌",status:0},
						{name:"全部品牌",status:0}
					]
				}
			}
		},
		methods: {
			changeTab(index,item){
				let isCheck = !item.isCheck 
				EventBus.$emit("changeBrand",index,isCheck) //传当前index，和true/false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sh-option-tags{
		display: flex;
		color: #5a5a5a;
		// justify-content: center;
		flex-wrap:wrap;
		// justify-content: space-between;
		margin-right: 20rpx;
		
	}
	 .shop-item{
		 width: 32%;
		// flex:1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70rpx;
		font-size: 28rpx;
		background-color: #f6f6f6;
		border-radius: 30rpx;
		margin-bottom: 16rpx;
		margin-right:10rpx ;
		.item{
			padding: 0 5rpx ;
			overflow: hidden;
			white-space: nowrap; 
			text-overflow: ellipsis;
		}
	 }
	 .shop-item:nth-child(3n){
		 margin-right: 0px;
	 }
	 .f-active-color{
	 	color:#f2270c;
	 	font-weight: bold;
	 	background-color: #fcedeb;
	 	border: 1px solid #fcedeb;
	 }
	 .shop-icon{
		position: relative;
		margin-lef:10rpx;
	 }
	 .iconfont{
		width:16rpx;
		height: 8rpx;
		position: absolute;
		left:0;
	 }
	 .up{
		top:-34rpx;
	 }
	 .down{
		top:-24rpx;
	 }

</style>