<template>
  <div class="shopping-cart">
    <h1>购物车</h1>
    <div class="cart" v-if="cart.length">
      <div v-for="(item, index) in cart" :key="index" class="cart-item">
        <img :src="item.petProduct.img" :alt="item.petProduct.productName" class="product-image" />
        <div class="cart-item-details">
          <div class="product-info">
            <span class="product-name">{{ item.petProduct.productName }}</span>
            <span class="product-quantity">数量: {{ item.num }}</span>
            <span class="item-sum">￥{{ item.sum.toFixed(2) }}</span>
          </div>
          <div class="item-actions">
            <button @click="removeFromCart(index)" class="remove-button">移除</button>
          </div>
        </div>
      </div>
      <div class="cart-footer">
        <div class="total-price">
          总价格: ￥{{ totalPrice }}
        </div>
        <button @click="checkout" class="checkout-button">结算</button>
      </div>
    </div>
    <div v-else>
      <p>购物车为空。</p>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'; // Assume you have a request utility set up

export default {
  data() {
    return {
      cart: [],
    };
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => total + item.sum, 0).toFixed(2);
    }
  },
  created() {
    this.fetchCartItems();
  },
  methods: {
    async fetchCartItems() {
      try {
        const response = await request({
          method: 'GET',
          url: `/products/cart/items?userName=${this.$store.state.user.name}`,
          baseURL: 'http://localhost:8080',
        });
        this.cart = response.data;
      } catch (error) {
        console.error('Error fetching cart items:', error);
      }
    },
    removeFromCart(index) {
      this.cart.splice(index, 1);
    },
    checkout() {
      // Add checkout logic here
      alert("Proceeding to checkout...");
    },
  }
};
</script>

<style scoped>
.shopping-cart {
  padding: 20px;
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
}

.cart-item {
  display: flex;
  align-items: stretch;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.cart-item-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 115px);
}

.product-info {
  display: flex;
  flex-direction: column;
  flex: 2;
}

.product-name,
.product-quantity {
  margin-bottom: 5px;
}

.item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 1;
  min-width: 120px;
  margin-left: 20px;
}

.item-sum {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

button,
.remove-button {
  padding: 10px 20px;
  background-color: #ff7043;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100px;
  text-align: center;
}

button:hover,
.remove-button:hover {
  background-color: #ff5722;
}

.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}

.total-price,
.checkout-button {
  font-size: 18px;
  font-weight: bold;
  flex: 1;
  width: 49%; /* 以确保它们分布均匀，并给予足够的空间 */
}

.checkout-button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.checkout-button:hover {
  background-color: #45a049;
}
</style>结算按钮太长了，完整修正代码