<template>
  <div class="app-container">
    <h1 class="page-title">美食菜品搜索</h1>

    <!-- 搜索框 -->
    <div class="search-container">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入菜品名称、分类或标签"
        clearable
        class="search-box"
        @keyup.enter="handleDishSearch"
      >
        <template #append>
          <el-button type="primary" @click="handleDishSearch">搜索</el-button>
        </template>
      </el-input>
    </div>

    <!-- 搜索结果展示 -->
    <div v-if="searchResults.length > 0" class="search-results">
      <h2>搜索结果</h2>
      <el-row :gutter="20" class="products-grid">
        <el-col :span="6" v-for="dish in searchResults" :key="dish.dishId">
          <el-card shadow="hover" class="product-card">
            <img :src="dish.imageUrl" class="product-img" />
            <h3>菜名: {{ dish.dishName }}</h3>
            <p>{{ dish.description }}</p>
            <p>价格: ¥{{ dish.price }}</p>
            <el-button type="primary" @click="goToDetail(dish.dishId)">查看菜品详情</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div v-else class="no-result">
      <p>未找到符合条件的菜品</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios' // 引入 axios
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
// 定义 FoodItem 类型
interface Dish {
  dishId: number
  dishName: string
  category: string
  price: number
  stock: number
  status: string
  description: string
  imageUrl: string
  sales: number
  tag: string
}
const searchKeyword = ref('')
const searchResults = ref<Dish[]>([])
// 搜索菜品
const handleDishSearch = async () => {
  const branchId = localStorage.getItem('selectedStoreId')
  if (!branchId) {
    ElMessage.error('未选择门店')
    return
  }

  try {
    const response = await axios.get('http://localhost:8080/user/dishes/search', {
      //ok
      params: {
        keyword: searchKeyword.value,
        branchId,
      },
    })

    searchResults.value = response.data

    if (searchResults.value.length === 0) {
      ElMessage.warning('未找到相关菜品')
    }
  } catch (error) {
    console.error('菜品搜索失败', error)
    ElMessage.error('搜索失败，请稍后重试')
  }
}
// 跳转到详情页
const router = useRouter()
function goToDetail(id: number) {
  router.push(`/user/detail/${id}`)
}
</script>

<style scoped>
.search-box .el-input__inner {
  height: 50px !important;
  font-size: 20px !important;
  border-radius: 12px 0 0 12px !important;
  background-color: #fff4c7 !important;
  padding: 0 15px !important;
}

.search-box .el-input-group__append {
  height: 50px !important;
  border-radius: 0 12px 12px 0 !important;
  background-color: #fccc0a !important;
}

.search-box .el-button {
  height: 50px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  border-radius: 0 12px 12px 0 !important;
  background-color: #fccc0a !important;
  color: #000 !important;
}
.app-container {
  padding: 20px;
}

.page-title {
  font-size: 36px;
  color: #5a2e0c; /* 深棕色 */
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.search-container {
  margin-bottom: 20px;
}

.food-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.food-image {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.food-info {
  display: flex;
  flex-direction: column;
}

.recommended-foods,
.search-results {
  margin-top: 20px;
}

.el-button {
  margin-left: 10px;
}
.product-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.product-card .el-button {
  color: #000 !important;
  background-color: #fccc0a !important;
  border-color: #fccc0a !important;
}
.product-card {
  background-color: #fff8e1; /* 淡黄色背景 */
}
</style>
