<template>
  <view class="container">
    <view class="food-list">
      <view class="food-item" v-for="(item, index) in filteredHistoryList" :key="index" @click="handleDonate(item)">
        <image class="food-img" :src="item.businessAvatar"></image>
        <view class="food-info">
          <text class="food-title">{{ item.businessName }}</text>
          <text class="food-sale">月售：456</text>
          <text class="food-lifting">起送：15</text>
          <text class="food-favorable">积分兑换更优惠</text>
          <text class="food-favorable">距离约:1.5km</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import {apiImageUrl} from '../../API/api'

const historyList = ref([])
const filteredHistoryList = computed(() => {
  return historyList.value.filter(item => item.categoryId === '4')
})

const fetchHistoryData = async () => {
  try {
    const res = await uni.request({
      url: apiImageUrl + '/api/business/list',
      method: 'POST'
    })
    if (res.data.code === 0) {
      historyList.value = res.data.data
    }
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

onMounted(() => {
  fetchHistoryData()
})

const handleDonate = (item) => {
  if (!item || !item.hasOwnProperty('id')) {
    console.error("The 'item' variable is undefined or missing the 'id' property.")
    return
  }

  const merchantId = item.id

  uni.navigateTo({
    url: `/pages/merchant/merchant?merchantId=${merchantId}`,
  })

  console.log(`Navigating to merchant details page with merchantId: ${merchantId}`)
}
</script>
<style>
page {
  background-color: #f4f8fb;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.food-list {
  width: 100%;
}

.food-item {
  background-color: #fff;
  display: flex;
  margin-bottom: 20rpx;
  padding: 10px;
}

.food-img {
  width: 250rpx;
  height: 200rpx;
  margin-right: 20rpx;
  border-radius: 10px;
}

.food-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.food-title {
  font-size: 38rpx;
  font-weight: 700;
}

.food-sale {
  font-size: 28rpx;
  color: #666;
}

.food-lifting,
.food-favorable{
  font-size: 24rpx;
  color: #999;
}
</style>
<strong></strong>