<template>
    <div class="shop-page">
        <h1>商店 - 您当前拥有 {{ points }} 积分</h1>

        <el-table :data="items" style="width: 100%;" height="calc(100vh - 110px)" border>
            <el-table-column label="ID" prop="id" width="100" align="center" />
            <el-table-column label="名称" prop="name" width="200" align="center" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="价格(积分)" prop="points" width="150" align="right" />
            <el-table-column label="您已拥有" prop="myQuantity" width="150" align="right" />
            <el-table-column label="操作" width="180" align="center">
                <template #default="{ row }">
                    <el-button v-if="row.points <= points" type="primary" @click="buyItem(row)">
                        购买
                    </el-button>
                    <el-button v-else type="warning" disabled>
                        积分不足
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { whatCanIBuy, buy } from '@/api/shop/shop'
import { ElButton, ElTable, ElTableColumn, ElMessage, ElInput, ElMessageBox } from 'element-plus'

const points = ref(0)  // 当前用户的积分
const items = ref([])  // 商店物品列表

// 获取当前用户的积分和商店商品信息
const fetchData = async () => {
    try {
        const pointsRes = await whatCanIBuy()
        points.value = pointsRes.points
        items.value = pointsRes.items
    } catch (err) {
        ElMessage.error('加载数据失败，请重试')
    }
}

// 购买操作
const buyItem = async (good) => {
    const { value: count } = await ElMessageBox.prompt('请输入购买数量', `物品名称  （${good.name}）`, {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputPattern: /^(?:[1-9]\d{0,3}|10000)$/,
        inputErrorMessage: '请输入 1 到 10000 之间的整数'
    })

    if (count) {
        try {
            const res = await await buy({ EquipmentId: good.id, Quantity: 1 })
            if (res) {
                good.myQuantity += 1
                points.value -= good.points
                ElMessage.success("购买成功")
            } else {
                ElMessage.error(res.message)
            }
        } catch (err) {
            ElMessage.error('购买失败，请稍后再试')
        }
    }
}

// 页面加载时获取数据
onMounted(() => {
    fetchData()
})
</script>

<style scoped>
.shop-page {
    margin: 20px;
}

.el-table {
    margin-top: 20px;
}

.el-button {
    margin-top: 10px;
}
</style>
