// 获取元素
const display = document.getElementById('display');
const keys = document.querySelectorAll('.key');

// 添加事件监听器到每个按钮
keys.forEach(key => {
    key.addEventListener('click', () => {
        const keyValue = key.textContent;

        if (keyValue === 'C') {
            // 清空输入
            display.value = '';
        } else if (keyValue === 'CE') {
            // 退格
            display.value = display.value.slice(0, -1);
        } else if (keyValue === '=') {
            try {
                // 计算并显示结果
                const result = eval(display.value);
                if (result === Infinity) {
                    display.value = '除零错误喵';
                } else {
                    display.value = result;
                }
            } catch (error) {
                // 处理非法输入
                display.value = '输入错误喵';
            }
        } else {
            // 添加输入到显示框
            display.value += keyValue;
        }
    });
});

<!-- App.vue -->
<template>
  <div id="app">
    <h1>购物车示例</h1>
    <ProductList @add-to-cart="addToCart" />
    <ShoppingCart :cartItems="cartItems" @remove-from-cart="removeFromCart" />
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';
import ShoppingCart from './components/ShoppingCart.vue';
import { ref } from 'vue';

export default {
  components: {
    ProductList,
    ShoppingCart,
  },
  setup() {
    const cartItems = ref([]);

    const addToCart = (product) => {
      const existingProduct = cartItems.value.find(item => item.id === product.id);
      if (existingProduct) {
        existingProduct.quantity += product.quantity;
      } else {
        cartItems.value.push({ ...product });
      }
    };

    const removeFromCart = (id) => {
      cartItems.value = cartItems.value.filter(item => item.id !== id);
    };

    return {
      cartItems,
      addToCart,
      removeFromCart,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  padding: 20px;
}
</style>

<!-- components/ProductList.vue -->
<template>
  <div>
    <h2>商品列表</h2>
    <div v-for="product in products" :key="product.id" class="product">
      <span>{{ product.name }}</span>
      <span>{{ product.price }}元</span>
      <span>库存: {{ product.stock }}</span>
      <input
          type="number"
          v-model.number="product.quantity"
          min="1"
          :max="product.stock"
          @input="validateQuantity(product)"
      />
      <span v-if="product.errorMessage" class="error">{{ product.errorMessage }}</span>
      <button @click="addToCart(product)">添加到购物车</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  emits: ['add-to-cart'],
  setup(props, { emit }) {
    const products = ref([
      { id: 1, name: '商品 A', price: 100, stock: 10, quantity: 1, errorMessage: '' },
      { id: 2, name: '商品 B', price: 200, stock: 5, quantity: 1, errorMessage: '' },
    ]);

    const validateQuantity = (product) => {
      // Reset error message
      product.errorMessage = '';

      // Validate quantity
      if (product.quantity <= 0) {
        product.errorMessage = '购买数量必须为正整数！';
      } else if (product.quantity > product.stock) {
        product.errorMessage = '购买数量超过库存！';
      }
    };

    const addToCart = (product) => {
      // First, validate the quantity
      validateQuantity(product);

      // If there's an error message, do not proceed
      if (product.errorMessage) {
        return;
      }

      emit('add-to-cart', { ...product });
      product.stock -= product.quantity;  // 更新库存
      product.quantity = 1;  // 重置数量
    };

    return {
      products,
      addToCart,
      validateQuantity,
    };
  },
};
</script>

<style scoped>
.product {
  margin: 10px 0;
}
.error {
  color: red;
  font-size: 12px;
}
</style>

<!-- components/ShoppingCart.vue -->
<template>
  <div>
    <h2>购物车</h2>
    <table>
      <thead>
        <tr>
          <th>商品名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in cartItems" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}元</td>
          <td>
            <input type="number" v-model.number="item.quantity" min="1" @change="updateQuantity(item)" />
          </td>
          <td>{{ item.price * item.quantity }}元</td>
          <td>
            <button @click="removeFromCart(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>总价：{{ totalPrice }}元</h3>
  </div>
</template>

<script>
import { computed } from 'vue';

export default {
  props: {
    cartItems: {
      type: Array,
      required: true,
    },
  },
  emits: ['remove-from-cart'],
  setup(props, { emit }) {
    const totalPrice = computed(() => {
      return props.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
    });

    const updateQuantity = (item) => {
      // 可以在这里进行库存检查
      // 例如: item.quantity = Math.min(item.quantity, item.stock);
    };

    const removeFromCart = (id) => {
      emit('remove-from-cart', id);
    };

    return {
      totalPrice,
      removeFromCart,
      updateQuantity,
    };
  },
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}
</style>