<template>
  <div class="shopping-cart-container">
    <div class="shopping-cart-wrapper">
      <h2>购物车</h2>
      <el-table :data="cartItems" style="width: 100%">
        <el-table-column label="商品" min-width="300">
          <template #default="{ row }">
            <div class="item-info">
              <el-image :src="(row.imgUrl?.indexOf('http') == 0 ? '' : 'https://') + row.imgUrl"
                style="width: 60px; height: 60px" fit="cover" />
              <span class="item-name">{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" min-width="120">
          <template #default="{ row }">
            ¥{{ row.price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="数量" min-width="120">
          <template #default="{ row }">
            <el-input-number v-model="row.quantity" :min="1" :max="row.stock"
              @change="(value) => updateQuantity(row.id, value)"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="总价" min-width="120">
          <template #default="{ row }">
            ¥{{ (row.price * row.quantity).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template #default="{ row }">
            <el-button type="danger" @click="removeItem(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="cart-summary">
        <div class="total-price">
          总价: ¥{{ totalPrice.toFixed(2) }}
        </div>
        <div class="total-items">
          商品总数: {{ totalItems }}
        </div>
      </div>
      <div class="cart-actions">
        <el-button type="danger" @click="clearCart">清空购物车</el-button>
        <el-button type="primary" @click="goToCheckout" :disabled="cartItems.length === 0">去结算</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useShoppingCartStore } from '@/store/modules/shoppingCart';
import { ElMessage } from 'element-plus';

const router = useRouter();
const cartStore = useShoppingCartStore();

const cartItems = computed(() => cartStore.cartItems);
const totalPrice = computed(() => cartStore.totalPrice);
const totalItems = computed(() => cartStore.totalItems);

const updateQuantity = (itemId, quantity) => {
  cartStore.updateQuantity(itemId, quantity);
};

const removeItem = (itemId) => {
  cartStore.removeItem(itemId);
  ElMessage.success('商品已从购物车移除');
};

const clearCart = () => {
  cartStore.clearCart();
  ElMessage.success('购物车已清空');
};

const goToCheckout = () => {
  if (cartItems.value.length === 0) {
    ElMessage.warning('购物车为空');
    return;
  }

  // 将购物车商品数据传递给确认订单页面
  router.push({
    name: 'ConfirmOrder',
    query: {
      items: JSON.stringify(cartItems.value.map(item => ({
        id: item.id,
        name: item.name,
        price: item.price,
        quantity: item.quantity,
        imgUrl: item.imgUrl
      })))
    }
  });
};
</script>

<style scoped>
.shopping-cart-container {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  padding: 24px;
  width: 100%;
  margin: 0;
}

.shopping-cart-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

h2 {
  margin: 0;
  font-size: 20px;
  color: #2c3e50;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.item-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-name {
  flex: 1;
  word-break: break-all;
  white-space: normal;
}

.cart-summary {
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.total-price {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
}

.total-items {
  margin-top: 10px;
  color: #606266;
}

.cart-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

:deep(.el-table) {
  --el-table-border-color: #ebeef5;
  --el-table-header-bg-color: #f8f9fa;
}

:deep(.el-input-number) {
  width: 120px;
}
</style>