<template>
    <div class="module-title">
        交易信息
    </div>
    <div class="module-content">
        <div class="item border-btm" v-for="(item, index) in data" :key="index">
            {{ PageExtend.GetPageIndex(currentPage, 10, index + 1) }}.[{{ GetRankName(item.code) }}]
           <span v-if="item.code == 'Equ'">
                <Abar :href='"/trade/info?id=" + item.tradeId'>{{ item.name }}({{ item.price }}铜贝)</Abar>
            </span>
            <span v-else>
                <Abar :href='"/prop/goods?id=" + item.propId'>{{ item.name }}({{ item.price }}铜贝)</Abar>
            </span>
            [<Abutton @click="Buy(item)">购买</Abutton>]
        </div>
        <span v-if="data.length == 0">
            暂无交易.
        </span>
    </div>
    <div class="content">
        <Pagination :currentPage="currentPage" :limit="10" :total="total" @pageChange="handlePageChange" />
    </div>
    <GamePopup v-model:show="showBuy" title="【购买】">
        <!-- 自定义内容 -->
        <div class="common">
            物品名称：{{ showGoods.name }}<br>
            购买单价：{{ showGoods.price }} 铜贝<br>
            <span v-if="showGoods.code != 'Equ'">
                剩余数量：{{ showGoods.count }}
            </span>
        </div>
        <div class="common" style="text-align: center;">
            <span v-if="showGoods.code != 'Equ'">
                购买数量：<input type="number" class="search-ipt" v-model="count"><br>
            </span>
            <button class="ipt-btn" name="serch" @click="ShopOk" style="margin-top: 15px;">购买</button>
        </div>
    </GamePopup>
</template>
<script setup lang="ts">

definePageMeta({
    layout: layout.default,
    middleware: 'page-loading'
})

const currentPage = ref<number>(1);
const total = ref<number>(0);
const data = ref<Array<any>>([]);
const showBuy = ref(false);
const count = ref(1);
const showGoods = ref<any>({});


let no = PageExtend.QueryString("no");

onMounted(async () => {
    try {
        await BindData();
    }
    finally {
        PageLoading.Close();
    }
})

const BindData = async (): Promise<void> => {
    let result = await TradeService.GetTradeData(no, 0, "", currentPage.value);
    if (result.code == 0) {
        data.value = result.data.data;
        total.value = result.data.total;

    }
    else {
        MessageExtend.ShowDialog("提示", result.msg);
    }
};

/**翻页 */
const handlePageChange = async (page: number): Promise<void> => {
    currentPage.value = page;
    await BindData();
};

const GetRankName = (type: string) => {
    let result = '其他';
    switch (type) {
        case "Equ":
            result = "装备"; break;
        case "Goods":
            result = "物品"; break;

    }
    return result;
}
const Buy = (info: any) => {
    showGoods.value = info;
    count.value = 1;
    showBuy.value = true;
}
const ShopOk = async () => {
    if (count.value < 1 || count.value > 99) {
        MessageExtend.ShowToast("每次购买数量在1~99哦.");
        return;
    }
    MessageExtend.LoadingToast("购买中...");
    let result = await TradeService.Buy(showGoods.value.tradeId, count.value);
    MessageExtend.LoadingClose();
    if (result.code == 0) {
        showBuy.value = false;
        await BindData();
        MessageExtend.Notify(`成功购买${showGoods.value.name}×${count.value}`, "success");        
    }
    else {
        MessageExtend.ShowDialog("提示", result.msg);
    }
}
</script>