<script setup lang="ts">
import Config from "@/config";
import {appPreferenceChoosePost, appPreferenceListGet} from "@/service";
const { t } = useI18n();

// 食物类别数据
const foodCategories = ref([]);

// 计算选中的数量
const selectedCount = computed(() => {
  return foodCategories.value.filter((item) => item.selected).length;
});

// 计算是否可以继续
const canContinue = computed(() => {
  return selectedCount.value > 0;
});

// 切换选择状态
const toggleSelection = (item: any) => {
  if (item.selected) {
    // 如果已选中，直接取消选中
    item.selected = false;
  } else {
    // 如果未选中，检查是否已达到最大选择数量
    if (selectedCount.value < 3) {
      item.selected = true;
    } else {
      uni.showToast({
        title: t('toast.likeTips'),
        icon: "none",
      });
    }
  }
};

// 继续按钮
const handleContinue = () => {
  const selectedItems = foodCategories.value.filter((item) => item.selected);
  appPreferenceChoosePost({
    body: selectedItems.map((item) => item.id),
  }).then(res=> {
    uni.switchTab({
      url: Config.indexPath
    })
  })
};

// 跳过按钮
const handleSkip = () => {
  uni.switchTab({
    url: Config.indexPath
  })
};

onLoad(()=> {
  appPreferenceListGet({}).then(res=> {
    console.log(res, res)
    if(res.data && res.data.length > 0) {
      foodCategories.value = res.data.map((item) => {
        return {
          id: item.id,
          name: item.name,
          image: item.imageUrl,
          selected: false,
        }
      })
    }
  })
})
</script>

<template>
  <!-- 主要内容区域 -->
  <view class="px-30rpx pt-44rpx">
    <status-bar />
    <!-- 标题 -->
    <view class="text-56rpx lh-56rpx font-bold text-#333"
      >{{ t('pages-user.member-center.chooseLike') }}</view
    >

    <!-- 描述文本 -->
    <view class="text-26rpx lh-26rpx text-#999 font-400 mt-16rpx mb-104rpx">
      {{ t('pages-user.member-center.likeDescription') }}
    </view>

    <!-- 食物类别网格 -->
    <view class="px-36rpx">
      <view class="grid grid-cols-3 gap-40rpx">
        <view
          v-for="item in foodCategories"
          :key="item.id"
          class="flex flex-col items-center"
          @click="toggleSelection(item)"
        >
          <!-- 图片容器 -->
          <view
            class="w-148rpx h-148rpx box-border rounded-full overflow-hidden center"
            :class="
              item.selected ? 'border-4rpx border-#CE7138 border-solid' : ''
            "
          >
            <image
              :src="item.image"
              class="w-128rpx h-128rpx rounded-full"
              mode="aspectFill"
            />
          </view>

          <!-- 文字标签 -->
          <text
            class="text-28rpx text-center"
            :class="item.selected ? 'text-#CE7138' : 'text-#333'"
          >
            {{ item.name }}
          </text>
        </view>
      </view>
    </view>

    <!-- 底部按钮区域 -->
    <view class="mt-180rpx">
      <wd-button
        :disabled="!canContinue"
        custom-class="!h-98rpx !text-30rpx !text-white !bg-#14181B !rounded-16rpx mb-32rpx"
        block
        @click="handleContinue"
      >
        {{ t("common.continue") }}
      </wd-button>

      <wd-button
        custom-class="!h-98rpx !text-#333 !text-30rpx !bg-#D8D8D8 !rounded-16rpx"
        block
        @click="handleSkip"
      >
        {{ t('common.skip') }}
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #ffffff;
}
</style>
