<template>
<div class="cart">
    <h2>清单</h2>
    <p v-show="!products.length"><i>请添加产品到购物车</i></p>
    <ul>
    <li
        v-for="product in products"
        :key="product.id">
        {{ product.title }} - {{ product.price }} x {{ product.quantity }}
    </li>
    </ul>
    <p>合计: {{ total }}</p>
    <p><el-button type="primary" :disabled="!products.length" @click="checkout()">提交</el-button></p>
    <p v-show="checkoutStatus">提交 {{ checkoutStatus }}.</p>
</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useCart } from '../store/cart'
import { ElButton } from 'element-plus'

const checkoutStatus = computed(() => useCart().checkoutStatus)
const products = computed(() => useCart().cartProducts)
const total = computed(() => useCart().cartTotalPrice)
const checkout = function () {
    useCart().checkout()
}
</script>