<template>
    <el-carousel height="400px">
        <el-carousel-item v-for="(banner, index) in banners" :key="index">
            <img :src="banner.imageUrl" class="banner-img" />
        </el-carousel-item>
    </el-carousel>

<!-- 查看菜单按钮容器 -->
<div class="category-container">
  <div class="category-title">菜单</div>
  <div class="category-buttons">
    <el-button type="primary" @click="goToMenu">
      查看菜单
    </el-button>
  </div>
</div>

    <el-row :gutter="20" style="margin: 20px 0;">

<el-col :span="8">
  <el-card>
    <template #header>
      <span>
        <el-icon><Postcard /></el-icon>&nbsp;&nbsp;火热新品
      </span>
    </template>

    <div 
      v-for="item in hotNewProducts" 
      :key="item.dishId" 
      class="recommend-item"
    >
      <img 
        :src="item.imageUrl" 
        alt="图片" 
        class="dish-img"
      />
      <div class="dish-info">
        <div class="dish-name">{{ item.dishName || '未命名' }}</div>
        <div class="dish-meta">
          <span class="dish-price">¥{{ item.price?.toFixed(2) || '0.00' }}</span>
          <el-button 
            type="primary" 
            link 
            size="small"
            @click="goToDetail(item.dishId)"
          >
            查看详情
          </el-button>
        </div>
      </div>
    </div>
  </el-card>
</el-col>

<el-col :span="8">
  <el-card>
    <template #header>
      <span>
        <el-icon><Postcard /></el-icon>&nbsp;&nbsp;热门菜品
      </span>
    </template>

    <div 
      v-for="item in popularDishes" 
      :key="item.dishId" 
      class="recommend-item"
    >
      <img 
        :src="item.imageUrl" 
        alt="图片" 
        class="dish-img"
      />
      <div class="dish-info">
        <div class="dish-name">{{ item.dishName || '未命名' }}</div>
        <div class="dish-meta">
          <span class="dish-price">¥{{ item.price?.toFixed(2) || '0.00' }}</span>
          <el-button 
            type="primary" 
            link 
            size="small"
            @click="goToDetail(item.dishId)"
          >
            查看详情
          </el-button>
        </div>
      </div>
    </div>
  </el-card>
</el-col>


<el-col :span="8">
  <el-card>
    <template #header>
      <span><el-icon><Postcard /></el-icon>&nbsp;&nbsp;猜你想吃</span>
    </template>

    <div 
      v-for="item in discountedDishes" 
      :key="item.dishId" 
      class="recommend-item"
    >
      <img 
        :src="item.imageUrl" 
        alt="图片" 
        class="dish-img"
      />
      <div class="dish-info">
        <div class="dish-name">{{ item.dishName || '未命名' }}</div>
        <div class="dish-meta">
          <span class="dish-price">¥{{ item.price?.toFixed(2) || '0.00' }}</span>
          <el-button 
            type="primary" 
            link 
            size="small"
            @click="goToDetail(item.dishId)"
          >
            查看详情
          </el-button>
        </div>
      </div>
    </div>
  </el-card>
</el-col>
</el-row>
</template>

<script setup lang='ts'>
import { ref, onMounted } from "vue";
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/userStores/user'
// 初始化路由
const router = useRouter();
const activeCategory = ref('');
const discountedDishes = ref([]);
const popularDishes= ref([]);
const hotNewProducts= ref([]);
// 导航到详情页的方法
function goToDetail(id: number) {
  router.push(`/user/detail/${id}`);
}
// 跳转到菜单页面
const goToMenu = () => {
  router.push('/type');
};

const banners = ref([
    { imageUrl: "/image/1.png" },
    { imageUrl: "/image/2.png" },
    { imageUrl: "/image/3.png" },
]);
const branchId = localStorage.getItem('selectedStoreId');
onMounted(async () => {
  const userStore = useUserStore()
  const userId = userStore.userId
  if (!userId) return

  try {
    const userRes = await axios.get(`/api/user/orders/top-dishes/${userId}`)//ok
    discountedDishes.value = userRes.data

    const hotRes = await axios.get(`/api/user/dishes/hot/${branchId}`)//ok
    popularDishes.value = hotRes.data

    const res = await axios.get(`/api/user/dishes/latest/${branchId}`);//ok
    hotNewProducts.value = res.data;
  } catch (e) {
    console.error('获取猜你喜欢菜品失败', e)
    console.log('当前userId:', userId)
  }
})

</script>

<style scoped>
.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.news-item:last-child {
    border-bottom: none;
}

.product-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* 新增的分类容器样式 */
.category-container {
  padding: 20px;
  background-color: #a75f00;
  border-radius: 8px;
  margin: 20px 0;
}

.category-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #303133;
}

.category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-buttons .el-button {
  min-width: 120px;     /* 增加按钮最小宽度 */
  height: 48px;         /* 增加按钮高度 */
  font-size: 16px;      /* 增大文字大小 */
  padding: 0 20px;      /* 增加内边距 */
  border-radius: 6px;   /* 调整圆角 */
  background-color: #fccc0a;
  border-color: #fccc0a;
  color: #000;
}
/* 修改查看详情按钮颜色和字体大小 */
.recommend-item .el-button {
  color: #000 !important;
  background-color: #fccc0a !important;
  border-color: #fff2be !important;
  font-size: 16px !important;
}

.recommend-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  background-color: #f7de7b !important;
}

.recommend-item:last-child {
  border-bottom: none;
}

.dish-img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 12px;
}

.dish-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dish-name {
  font-weight: 500;
  font-size: 16px;
  color: #303133;
  margin-bottom: 6px;
}

.dish-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #909399;
}

.dish-price {
  color: #f56c6c;
  font-weight: bold;
}
.el-card {
  background-color: #fcd35e;
}
</style>