<template>
  <div class="container">
    <h1>添加商品</h1>
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
    <div class="add-product">
      <input v-model="newProduct.name" placeholder="商品名称" />
      <input
        v-model.number="newProduct.price"
        placeholder="单价"
        type="number"
        min="1"
        step="1"
      />
      <input
        v-model.number="newProduct.quantity"
        placeholder="数量"
        type="number"
        min="1"
        step="1"
      />
      <button @click="addProduct">添加商品</button>
    </div>


    <table class="product-table" v-if="products.length">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(product, index) in products" :key="index">
          <td>{{ product.name }}</td>
          <td>{{ product.price.toFixed(2) }}</td>
          <td>
            <input
              v-model.number="product.quantity"
              type="number"
              min="1"
              step="1"
              @change="checkQuantity(index)"
            />
          </td>
          <td>{{ (product.price * product.quantity).toFixed(2) }}</td>
          <td>
            <button @click="removeProduct(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <div v-else class="empty-cart">当前购物车为空</div>

    <div class="total">总计：{{ totalPrice.toFixed(2) }} 元</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const products = ref([]);

const newProduct = ref({
  name: '',
  price: 1,
  quantity: 1
});


const errorMessage = ref('');
const addProduct = () => {
  if (newProduct.value.name && newProduct.value.price >= 1 && newProduct.value.quantity >= 1) {
    products.value.push({
      name: newProduct.value.name,
      price: newProduct.value.price,
      quantity: newProduct.value.quantity
    });
    newProduct.value.name = '';
    newProduct.value.price = 1;
    newProduct.value.quantity = 1;
  } else {
    errorMessage.value = '请输入有效的商品名称、单价和数量(数量至少为1)!';
    setTimeout(() => {
      errorMessage.value = '';
    }, 2000);
  }
      console.log(errorMessage.value);
};

const removeProduct = (index) => {
  products.value.splice(index, 1);
};

const checkQuantity = (index) => {
  if (products.value[index].quantity < 1) {
    products.value[index].quantity = 1;
  }
};

const totalPrice = computed(() => {
  return products.value.reduce((total, product) => {
    return total + product.price * product.quantity;
  }, 0);
});
</script>

<style scoped>

.container {
  max-width: 900px;
  margin: 30px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 2.2em;
  color: #333;
}


.error-message {
  background-color: #ffdddd;
  border: 1px solid #ff5c5c;
  color: #d8000c;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 20px;
}


.add-product {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 25px;
  justify-content: center;
}

.add-product input {
  padding: 8px 12px;
  font-size: 1em;
  border: 1px solid #ddd;
  border-radius: 5px;
  flex: 1 1 200px;
}

.add-product button {
  padding: 8px 20px;
  font-size: 1em;
  border: none;
  background-color: #42b983;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-product button:hover {
  background-color: #369870;
}


.product-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
}

.product-table th,
.product-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.product-table th {
  background-color: #f7f7f7;
  font-weight: 600;
}

.product-table tbody tr:hover {
  background-color: #f1f1f1;
}

.product-table input {
  width: 60px;
  text-align: center;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}


.empty-cart {
  text-align: center;
  font-size: 1.2em;
  color: #999;
  margin-bottom: 25px;
}

.total {
  text-align: right;
  font-size: 1.6em;
  font-weight: bold;
  padding: 15px;
  background-color: #f7f7f7;
  border-radius: 5px;
}
</style>
