<template>
	<view class="filterbar-box">
		<view class="filterbar">
			<view :class="[
		      'item',
		      item.type,
		      {
		        active:
		          selectType === item.type ,
		      },
		    ]" v-for="item in filterList" :key="item.type" @click="handleFilter(item)">
				<view class="name">
					{{ item.name }}
				</view>
				<view v-if="item.type === 'price'" class="price-icon">
					<u-icon name="arrow-up-fill" :size="7" :color="
		          selectType === 'price' && priceType === 'asc' ? '#C79C53' : '#767676'
		        "></u-icon>
					<u-icon name="arrow-down-fill" :size="7" :color="
		          selectType === 'price' && priceType === 'desc' ? '#C79C53' : '#767676'
		        "></u-icon>
				</view>
        <view v-if="item.type === 'sales_num'" class="price-icon">
          <u-icon name="arrow-up-fill" :size="7" :color="
		          selectType === 'sales_num' && salesType === 'asc' ? '#C79C53' : '#767676'
		        "></u-icon>
          <u-icon name="arrow-down-fill" :size="7" :color="
		          selectType === 'sales_num' && salesType === 'desc' ? '#C79C53' : '#767676'
		        "></u-icon>
        </view>
        <view v-if="item.type === 'sales_num2'" class="price-icon">
          <u-icon name="arrow-up-fill" :size="7" :color="
		          selectType === 'sales_num2' && salesType2 === 'asc' ? '#C79C53' : '#767676'
		        "></u-icon>
          <u-icon name="arrow-down-fill" :size="7" :color="
		          selectType === 'sales_num2' && salesType2 === 'desc' ? '#C79C53' : '#767676'
		        "></u-icon>
        </view>
        <view class="div-a" v-if="item.type != 'sales_num2'"> </view>
			</view>
			<view class="mark-pop" v-show="showCatePop" @click="onClose"> </view>
		</view>
	</view>

</template>

<script>
	import {
		getGoodCate
	} from "@/common/api/good.js";
	export default {
		name: 'FilterBar',
		props: {
			currentCateId: {
				type: [String, Number]
			}
		},
    watch: {
      currentCateId(newVal, oldVal) {
        if (newVal){
          if ("0"==newVal){
            newVal=null
          }
          this.cateValue = newVal
          this.currentCateId = newVal
        }

      }
    },
		data() {
			return {
				cateValue: "",
				subCateId: '',
				btn_color: "",
				cateList: [],
				showCatePop: false,
				selectType: "synthesis",
				priceType: "asc",
        salesType: "asc",
        salesType2: "asc",
				data: [],
				filterList: [{
						name: "最新",
						type: "synthesis",
					},
					{
						name: "价格",
						type: "price",
					},
          {
            name: "销量",
            type: "sales_num",
          },
          {
            name: "人气",
            type: "sales_num2",
          },
				],
			};
		},
		computed: {
		},
		created() {
			this._getGoodCate();

			const configs = uni.getStorageSync('configs')
			if (configs) {
				this.btn_color = configs.btn_color
			}
		},
		mounted() {
			this.cateValue = this.currentCateId
		},
		methods: {
			_getGoodCate() {
				getGoodCate().then(({
					data = []
				}) => {
					this.cateList = data;
				});
			},
			handleFilter(item) {
        if (!this.cateValue){
          this.cateValue = this.currentCateId
        }
				if (this.showCatePop) {
					this.onClose();
				}
				this.selectType = item.type;
				if (item.type === "price") {
					this.priceType = this.priceType === "asc" ? "desc" : "asc";
				} else {
					this.priceType = "asc";
				}
        if (item.type === "sales_num") {
          this.salesType = this.salesType === "asc" ? "desc" : "asc";
        } else {
          this.salesType = "asc";
        }
        if (item.type === "sales_num2") {
          this.salesType2 = this.salesType2 === "asc" ? "desc" : "asc";
        } else {
          this.salesType2 = "asc";
        }
				this.$emit("change", {
					sort: this.selectType === "synthesis" ? "" : this.selectType,
					sortType: this.selectType === "price" ? this.priceType : "",
					cateid: this.cateValue,
				});
			},
			onClose() {
				this.showCatePop = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.filterbar {
		position: relative;
		display: flex;
		align-items: center;
		padding: 33rpx 0 30rpx 0;

		.item {
      position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
			color: #767676;
			line-height: 34rpx;
      width: 25%;
			&.sales_num {
				flex: 1;
			}

			&.price {
				flex: 1;
			}

			&.synthesis,

			&.classify {
				flex-shrink: 0;
			}

			&.active {
				font-weight: 600;
				color: #C79C53;
			}

			.price-icon {
				margin-left: 4rpx;
			}
		}

		.mark-pop {
			position: absolute;
			left: 0;
			right: 0;
			top: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.6);
		}
    .div-a {
      position: absolute;
      right: 0;
      height: 100%;
      width: 2rpx;
      background: #EEEEEE;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }

		.cate-popup {
			position: absolute;
			left: 0;
			right: 0;
			top: 100%;
			background-color: #fff;
		}

		.cate-select-wrap {
			padding: 20rpx 10rpx 40rpx;
			display: flex;
			flex-wrap: wrap;

			.cate-item {
				font-size: 24rpx;
				border: 2rpx solid #2979ff;
				color: #2979ff;
				padding: 4rpx 28rpx;
				margin: 10rpx;
				border-radius: 72rpx;

				&.active {
					color: #fff;
					background-color: #2979ff;
				}
			}
		}
	}

	.sub-cate {
		display: flex;
		flex-wrap: wrap;

		&-list {
			width: 166rpx;
			height: 55rpx;
			font-size: 24rpx;
			border-radius: 12rpx;
			background-color: #fff;
			color: #626262;
			overflow: hidden;
			line-height: 55rpx;
			text-overflow: ellipsis;
			text-align: center;
			margin-right: 15rpx;
			margin-bottom: 23rpx;
		}

		&-active {
			background-color: #F39800;
			color: #fff;
		}
	}
</style>
