<template>
    <div class="content">
        【我的物品】.<Abutton @click="Refresh">刷新</Abutton> <br>
        金元: {{ bagInfo.gold }}<br />
        金贝: {{ bagInfo.cowry }} <br />
        负重:{{ bagInfo.onWeight }}/{{ bagInfo.maxWeight }} <br />
        {{ bagInfo.copper }}铜<br />
        <Abar href="/">交易记录</Abar><br>
        <Abar href="/">赠送记录</Abar>
    </div>
    <div class="content">
        <div class="common">
            【
            <Acheak @click="ChangeBag('0')" :on-value="type" on-cheak="0">装备</Acheak>|
            <Acheak @click="ChangeBag('1')" :on-value="type" on-cheak="1">药品</Acheak>|
            <Acheak @click="ChangeBag('2')" :on-value="type" on-cheak="2">物品</Acheak>|
            <Acheak @click="ChangeBag('3')" :on-value="type" on-cheak="3">坐骑</Acheak>
            】
        </div>
        <div class="common">

        </div>
        <div class="common serch">
            搜索内容：<input type="text" class="search-ipt" v-model="serch">&nbsp;
            <button class="ipt-btn" name="serch" @click="BindData">搜索</button>
        </div>
        <div class="common">
            <div v-if="type == '0'">
                <Acheak @click="ChangeChildBag('0')" :on-value="type_ch" on-cheak="0">全部</Acheak>.
                <Acheak @click="ChangeChildBag('1')" :on-value="type_ch" on-cheak="1">穿戴</Acheak>.
                <Acheak @click="ChangeChildBag('2')" :on-value="type_ch" on-cheak="2">到期</Acheak>
            </div>
            <div v-if="type == '2'">
                <Acheak @click="ChangeChildBag('0')" :on-value="type_ch" on-cheak="0">全部</Acheak>.<Acheak
                    @click="ChangeChildBag('1')" :on-value="type_ch" on-cheak="1">宝石</Acheak>.<Acheak
                    @click="ChangeChildBag('2')" :on-value="type_ch" on-cheak="2">九宫</Acheak>.<Acheak
                    @click="ChangeChildBag('3')" :on-value="type_ch" on-cheak="3">圣痕</Acheak>.<Acheak
                    @click="ChangeChildBag('4')" :on-value="type_ch" on-cheak="4">宝箱</Acheak>.<Acheak
                    @click="ChangeChildBag('5')" :on-value="type_ch" on-cheak="5">材料</Acheak>.<Acheak
                    @click="ChangeChildBag('6')" :on-value="type_ch" on-cheak="6">图纸</Acheak>.<Acheak
                    @click="ChangeChildBag('7')" :on-value="type_ch" on-cheak="7">卡片</Acheak>.<Acheak
                    @click="ChangeChildBag('8')" :on-value="type_ch" on-cheak="8">货物</Acheak>.<Acheak
                    @click="ChangeChildBag('9')" :on-value="type_ch" on-cheak="9">其他</Acheak>
            </div>
        </div>

    </div>
    <div class="content">
        暂无道具.
    </div>
    <div class="content">
        <Pagination :currentPage="currentPage" :limit="10" :total="total" @pageChange="handlePageChange" />
    </div>
</template>
<script setup lang="ts">

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

const currentPage = ref<number>(1);
const total = ref<number>(0);
const bagInfo = ref<any>({});
const data = ref<Array<any>>([]);
const type = ref('0');
const type_ch = ref('0');
const serch = ref('');


onMounted(async () => {
    try {

        let result = await BagService.GetUserBagData();
        if (result.code == 0) {
            bagInfo.value = result.data;
            await BindData();
        }
        console.log(result);
    }
    finally {
        PageLoading.Close();
    }
})

const BindData = async (): Promise<void> => {
    let result = await MapService.GetMapUser(currentPage.value);
    if (result.code == 0) {
        data.value = result.data.data;
        total.value = result.data.total;
        console.log(result);
    }
    else {
        MessageExtend.ShowDialog("提示", result.msg);
    }
};

/**切换背包 */
const ChangeBag = async (_type: string): Promise<void> => {
    type.value = _type;
    await BindData();
}

const ChangeChildBag = async (ch: string): Promise<void> => {
    type_ch.value = ch;
    await BindData();
}

/**刷新 */
const Refresh = async (): Promise<void> => {
    serch.value = '';
    MessageExtend.LoadingToast("刷新中...");
    currentPage.value = 1;
    await BindData();
    MessageExtend.LoadingClose();
    PageExtend.ScrollToTop();
}

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

</script>