<template>
	<view class="sort-bar">
		<view class="sort-item" :class="{ active: currentIndex === 0 }" @tap="onSort(0)">
			<text>{{ $t('mall.sort.comprehensive') }}</text>
		</view>
		<view class="sort-item" :class="{ active: currentIndex === 1 }" @tap="onSort(1)">
			<text>{{ $t('mall.sort.sales') }}</text>
		</view>
		<view class="sort-item" :class="{ active: currentIndex === 2 }" @tap="onSort(2)">
			<text>{{ $t('mall.sort.new') }}</text>
		</view>
		<view class="sort-item" :class="{ active: currentIndex === 3 }" @tap="onSort(3)">
			<text>{{ $t('mall.sort.price') }}</text>
			<view class="price-arrow">
				<text class="arrow-up" :class="{ active: priceOrder === 1 && currentIndex === 3 }">▲</text>
				<text class="arrow-down" :class="{ active: priceOrder === 2 && currentIndex === 3 }">▼</text>
			</view>
		</view>
		<view class="sort-item" @tap="$emit('filter')">
			<text>{{ $t('mall.sort.filter') }}</text>
			<text class="filter-icon">⚡</text>
		</view>
	</view>
</template>

<script>
const SORT_MAP = [
	{ sort: 'weigh', order: 'desc' },
	{ sort: 'sales', order: 'desc' },
	{ sort: 'createtime', order: 'desc' },
	{ sort: 'price', order: 'asc' }
]

export default {
	name: 'mall-sort-bar',
	props: {
		currentSort: {
			type: String,
			default: 'weigh'
		},
		currentOrder: {
			type: String,
			default: 'desc'
		}
	},
	data() {
		return {
			currentIndex: 0,
			priceOrder: 0
		}
	},
	methods: {
		onSort(index) {
			if (index === 3) {
				if (this.currentIndex === 3) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1
				} else {
					this.priceOrder = 1
				}
			} else {
				this.priceOrder = 0
			}
			this.currentIndex = index

			let sort, order
			if (index === 3) {
				sort = 'price'
				order = this.priceOrder === 1 ? 'desc' : 'asc'
			} else {
				sort = SORT_MAP[index].sort
				order = SORT_MAP[index].order
			}
			this.$emit('change', { sort, order })
		}
	}
}
</script>

<style lang="scss" scoped>
.sort-bar {
	display: flex;
	align-items: center;
	height: 80rpx;
	background: #fff;
	padding: 0 10rpx;
	border-bottom: 1rpx solid #f0f0f0;
}
.sort-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #666;
	height: 100%;
}
.sort-item.active {
	color: #e54d42;
	font-weight: bold;
}
.price-arrow {
	display: flex;
	flex-direction: column;
	margin-left: 6rpx;
	line-height: 1;
}
.arrow-up, .arrow-down {
	font-size: 16rpx;
	color: #ccc;
	line-height: 1;
}
.arrow-up.active {
	color: #e54d42;
}
.arrow-down.active {
	color: #e54d42;
}
.filter-icon {
	font-size: 22rpx;
	margin-left: 4rpx;
}
</style>