<template>
  <div>
    <el-page-header @back="goBack" content="购物车">
    </el-page-header>
    <el-table
      :data="cartItems"
      style="width: 100%"@selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="商品信息">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center;">
            <img :src="scope.row.image" style="width: 100px; height: 100px; margin-right: 10px;" alt="">
            <div>
              <span>{{ scope.row.name }}</span><br>
              <span>{{ scope.row.sku }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="数量">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.quantity" controls-position="right" @change="handleChange(scope.row)" :min="1" :max="10"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="价格" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span style="color: red">购物车中已选{{process}}件商品，总计金额为{{aggregate}}</span>
  </div>
</template>

<script>
export default {
  name: "ShoppingCart",
  data() {
    return {
      cartItems: [
        {
          name: "商品1",
          image: "http://127.0.0.1:9300/statics/2024/03/26/0d73d0b8ac7fbcb12194a0835f1632a4_20240326200358A001.png",
          sku: "规格1",
          quantity: 1,
          price:188
        },
        {
          name: "商品2",
          image: "http://127.0.0.1:9300/statics/2024/03/26/0d73d0b8ac7fbcb12194a0835f1632a4_20240326200358A001.png",
          sku: "规格2",
          quantity: 1,
          price:155
        }
      ],
      process: 0, //商品数量
      aggregate: 0, //总计
      selectedItems: [] // 选中的项
    };
  },
  methods: {
    handleDelete(index, row) {
      console.log("index",index)
      console.log(index, row);
    },
    goBack() {
      console.log('go back');
    },
    handleChange(item) {
      const index = this.cartItems.findIndex(cartItem => cartItem === item);
      if (index !== -1) {
        this.cartItems[index].quantity = item.quantity;
        if (this.selectedItems.includes(this.cartItems[index])) {
          this.calculateTotal();
        }
      }
    },
    handleSelectionChange(val) {
      this.selectedItems = val; // 更新选中的项
      this.calculateTotal();
    },
    calculateTotal() {
      this.process = 0;
      this.aggregate = 0;
      for (let i = 0; i < this.selectedItems.length; i++) {
        this.process += this.selectedItems[i].quantity;
        this.aggregate += this.selectedItems[i].price * this.selectedItems[i].quantity;
      }
    }
  }
};
</script>
