<script setup lang="ts">
const { t } = useI18n();

const emit = defineEmits(["togglePickup", "toggleDiscount", "toggleScore", "togglePrice"]);

const isPickup = ref(false);
function togglePickup() {
  isPickup.value = !isPickup.value;
  emit("togglePickup", isPickup.value ? 1 : 2);
}
const isDiscount = ref(false);
function toggleDiscount() {
  isDiscount.value = !isDiscount.value;
  emit("toggleDiscount", isDiscount.value ? 1 : 2);
}

function handleScore() {
  emit("toggleScore");
}

function handlePrice() {
  emit("togglePrice");
}
</script>

<template>
  <view>
    <scroll-view :scroll-x="true">
      <view class="flex items-center">
        <view class="w-27rpx shrink-0"></view>
        <view @click="togglePickup" :class="[isPickup ? 'bg-#333333 text-#fff' : 'bg-#F2F2F2 text-#333']" class="flex items-center transition-all mr-22rpx h-64rpx rounded-32rpx px-22rpx text-26rpx font-bold">
          <image v-show="!isPickup" src="@img/chef/120.png" class="w-28rpx h-28rpx mr-10rpx"></image>
          <image v-show="isPickup" src="@img/chef/122.png" class="w-28rpx h-28rpx mr-10rpx"></image>
          {{ t('components.filtrate-tool.pickup') }}
        </view>

        <view @click="toggleDiscount" :class="[isDiscount ? 'bg-#333333 text-#fff' : 'bg-#F2F2F2 text-#333']" class="flex items-center transition-all mr-22rpx h-64rpx rounded-32rpx px-22rpx text-26rpx font-bold">
          <image v-show="!isDiscount" src="@img/chef/121.png" class="w-28rpx h-28rpx mr-10rpx"></image>
          <image v-show="isDiscount" src="@img/chef/123.png" class="w-28rpx h-28rpx mr-10rpx"></image>
          {{ t('components.filtrate-tool.discount') }}
        </view>

        <view @click="handleScore" class="flex items-center mr-22rpx h-64rpx rounded-32rpx bg-#F2F2F2 px-22rpx text-26rpx text-#333 font-bold">
          {{ t('components.filtrate-tool.score') }}
          <image src="@img/chef/101.png" class="w-24rpx h-24rpx ml-10rpx"></image>
        </view>

        <view @click="handlePrice" class="flex items-center h-64rpx rounded-32rpx bg-#F2F2F2 px-22rpx text-26rpx text-#333 font-bold">
          {{ t('components.filtrate-tool.price') }}
          <image src="@img/chef/101.png" class="w-24rpx h-24rpx ml-10rpx"></image>
        </view>

        <view class="w-27rpx shrink-0 op-0">1</view>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">

</style>