<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="h-full bg-gray-50">
    <div class="w-full mx-auto h-full">
      <div class="bg-white rounded-lg p-3 h-full">
        <div class="flex items-center justify-between mb-3">
          <h1 class="text-sm font-medium">Orders #45892</h1>
        </div>
        <div class="flex flex-col h-[calc(100%-3rem)]">
          <div class="space-y-4 mb-6 overflow-auto flex-1">
          <div
            v-for="(item, index) in orderItems"
            :key="index"
            class="flex items-center justify-between p-4 bg-white border border-gray-100 rounded-lg"
          >
            <div class="flex items-center space-x-4">
              <div class="w-16 h-16 rounded-full overflow-hidden">
                <img :src="item.image" :alt="item.name" class="w-full h-full object-cover" />
              </div>
              <div>
                <h3 class="font-sm">{{ item.name }}</h3>
                <p class="text-xxs text-gray-500">Size: Large, Middle, Small</p>
                <p class="text-orange-500 font-medium mt-1">${{ item.price.toFixed(2) }}</p>
              </div>
            </div>
            <div class="flex items-center space-x-4">
              <button
                class="w-4 h-4 flex items-center justify-center bg-orange-100 text-orange-500 rounded-lg !rounded-button whitespace-nowrap"
                @click="decreaseQuantity(index)"
              >
                <img src="@/assets/img/menu/reduce.svg" alt="" />
              </button>
              <span class="w-4 text-center">{{ item.quantity }}</span>
              <button
                class="w-4 h-4 flex items-center justify-center bg-orange-500 text-white rounded-lg !rounded-button whitespace-nowrap"
                @click="increaseQuantity(index)"
              >
                <img src="@/assets/img/menu/add.svg" alt="" />
              </button>
              <button
                class="w-4 h-4 flex items-center justify-center text-gray-400 hover:text-red-500 !rounded-button whitespace-nowrap"
                @click="removeItem(index)"
              >
                <img src="@/assets/img/menu/delete.svg" alt="" />
              </button>
            </div>
          </div>
        </div>

        <div class="border-t border-gray-100 pt-4">
          <div class="mb-4">
            <h3 class="font-medium mb-2">Order Notes</h3>
            <p class="text-gray-600 text-sm">No Chili, No Cilantro</p>
          </div>

          <div class="flex items-center justify-between pt-4 border-t border-gray-100">
            <span class="font-medium">Total</span>
            <span class="text-sm font-medium">${{ total.toFixed(2) }}</span>
          </div>
        </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

interface OrderItem {
  name: string
  price: number
  quantity: number
  image: string
}

const orderItems = ref<OrderItem[]>([
  {
    name: 'Spicy Seasoned Seafood',
    price: 4.85,
    quantity: 2,
    image: 'https://ai-public.mastergo.com/ai/img_res/1c3d3c5704265a819a659a8d3589bc21.jpg',
  },
  {
    name: 'Premium Grade Mackerel (Cleaned)',
    price: 4.65,
    quantity: 2,
    image: 'https://ai-public.mastergo.com/ai/img_res/6d4be10ce5e234dcec1509d199a41a99.jpg',
  },
  {
    name: 'Grilled Sea Bass',
    price: 4.85,
    quantity: 2,
    image: 'https://ai-public.mastergo.com/ai/img_res/a20aaccbc775fd5729c8b8c6dac46563.jpg',
  },
])
orderItems.value.concat(orderItems.value)
const total = computed(() => {
  return orderItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
})

const increaseQuantity = (index: number) => {
  orderItems.value[index].quantity += 1
}

const decreaseQuantity = (index: number) => {
  if (orderItems.value[index].quantity > 1) {
    orderItems.value[index].quantity -= 1
  }
}

const removeItem = (index: number) => {
  orderItems.value.splice(index, 1)
}
</script>

<style scoped>
.order-item {
  transition: all 0.3s ease;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
