<template>
	<view class="result-tabs">
		<view class="result-tabs__row">
			<text
				v-for="item in tabOptions"
				:key="item.value"
				class="result-tabs__item"
				:class="{ 'result-tabs__item--active': modelValue === item.value }"
				@click="onTab(item.value)"
			>
				{{ item.label }}
			</text>
		</view>
		<view v-if="modelValue === priceTab" class="result-tabs__price">
			<text
				v-for="item in priceOptions"
				:key="item.value"
				class="result-tabs__price-item"
				:class="{ 'result-tabs__price-item--active': priceOrder === item.value }"
				@click="onPriceOrder(item.value)"
			>
				{{ item.label }}
			</text>
		</view>
	</view>
</template>

<script setup>
import {
  SEARCH_TAB_OPTIONS,
  SEARCH_TAB_PRICE,
  PRICE_ORDER_OPTIONS
} from '@/constants/search'

defineProps({
  modelValue: {
    type: String,
    default: 'sales'
  },
  priceOrder: {
    type: String,
    default: 'price_asc'
  }
})

const emit = defineEmits(['update:modelValue', 'update:priceOrder', 'change', 'price-change'])

const tabOptions = SEARCH_TAB_OPTIONS
const priceOptions = PRICE_ORDER_OPTIONS
const priceTab = SEARCH_TAB_PRICE

function onTab(value) {
  emit('update:modelValue', value)
  emit('change', value)
}

function onPriceOrder(value) {
  emit('update:priceOrder', value)
  emit('price-change', value)
}
</script>

<style lang="scss" scoped>
.result-tabs {
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
}
.result-tabs__row {
	display: flex;
	align-items: center;
	padding: 16rpx 24rpx;
}
.result-tabs__item {
	margin-right: 40rpx;
	font-size: 28rpx;
	color: #666;
}
.result-tabs__item--active {
	color: #2e7d32;
	font-weight: 600;
}
.result-tabs__price {
	display: flex;
	padding: 0 24rpx 16rpx;
}
.result-tabs__price-item {
	margin-right: 24rpx;
	font-size: 24rpx;
	color: #999;
	padding: 8rpx 20rpx;
	background: #f5f6f8;
	border-radius: 24rpx;
}
.result-tabs__price-item--active {
	color: #2e7d32;
	background: rgba(46, 125, 50, 0.1);
}
</style>
