<template>
  <a-card title="购物车">
    <a-table :dataSource="items" :columns="columns" rowKey="id">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'product'">
          {{ record.product.name }}
        </template>
        <template v-else-if="column.key === 'quantity'">
          <a-input-number :min="1" v-model:value="record.quantity" @change="val => updateQuantity(record, val)" />
        </template>
        <template v-else-if="column.key === 'price'">
          ￥{{ record.product.price }}
        </template>
        <template v-else-if="column.key === 'action'">
          <a-button type="link" danger @click="remove(record)">删除</a-button>
        </template>
      </template>
    </a-table>
    <a-button type="primary" style="margin-top: 16px" @click="goCheckout">去结算</a-button>
  </a-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import api from '../../api'

const router = useRouter()
const items = ref([])
const columns = [
  { title: '商品', key: 'product' },
  { title: '数量', key: 'quantity' },
  { title: '单价', key: 'price' },
  { title: '操作', key: 'action' }
]

const load = async () => {
  const res = await api.get('/api/user/cart')
  if (res.success) items.value = res.data
}

const updateQuantity = async (record, val) => {
  await api.put(`/api/user/cart/${record.id}`, { productId: record.product.id, quantity: val })
}

const remove = async (record) => {
  await api.delete(`/api/user/cart/${record.id}`)
  load()
}

const goCheckout = () => router.push('/checkout')

onMounted(load)
</script>
