<script lang="ts">
export default {
    name: "CityUItems"
}
</script>

<script lang="ts" setup>
import { inject, onMounted, Ref, ref } from "vue";
import { LoggerKey } from "../ts/class/Logger";
import { ItemHelperKey } from "../ts/class/utils/ItemHelper";
import { itemNameDict } from "../ts/dictionary/translation";
import toThousands from "../ts/func/utils/toThousands";

const logger = inject(LoggerKey);
const itemHelper = inject(ItemHelperKey);

const doFetch = () => fetch(window.addRFC("https://www.torn.com/city.php?step=mapData"), {
    "headers": {
        "accept": "*/*",
        "sec-ch-ua-mobile": "?0",
        "sec-fetch-dest": "empty",
        "sec-fetch-mode": "cors",
        "sec-fetch-site": "same-origin",
        "x-requested-with": "XMLHttpRequest"
    },
    "referrer": "https://www.torn.com/city.php",
    "referrerPolicy": "strict-origin-when-cross-origin",
    "body": null,
    "method": "GET",
    "mode": "cors",
    "credentials": "include"
});
const ret: Ref<{ title: string, price: number, id: number }[]> = ref(null);
const msg = ref("");
const total = ref(0);

onMounted(async () => {
    let _ret: { territoryUserItems?: string, error?: string } = {};
    try {
        _ret = await (await doFetch()).json();
        if (_ret.territoryUserItems) {
            // 地图垃圾列表
            let itemList: { title: string }[] = JSON.parse(window.atob(_ret.territoryUserItems));
            // 加入id和价格信息
            // 物品id map
            let itemNameMap = itemHelper.getItemNameMap();
            // 物品价格
            let itemPrice = itemHelper.getLocalPriceData();
            let tmp = [];
            for (const item of itemList) {
                let itemInfo: { title: string, price: number, id: number } = {
                    title: item.title,
                    price: null,
                    id: null,
                };
                // 加入译名
                if (itemNameDict[item.title]) {
                    itemInfo.title += `(${ itemNameDict[item.title] })`;
                }
                // 物品转id
                if (itemNameMap.data) {
                    itemInfo.id = itemNameMap.data[item.title];
                } else {
                    itemInfo.id = (await itemNameMap.promise)[item.title];
                }
                // 价格
                if (itemPrice.data) {
                    itemInfo.price = itemPrice.data[itemInfo.id].price;
                } else {
                    itemInfo.price = (await itemPrice.promise)[itemInfo.id].price;
                }
                total.value += itemInfo.price;
                tmp.push(itemInfo);
            }
            ret.value = tmp;
        } else {
            ret.value = [];
        }
        if (_ret.error) {
            msg.value = _ret.error;
        }
    } catch (e) {
        logger.error(e.stack);
        ret.value = [];
        ret.value.push({ title: '错误' + e.message, price: -1, id: 0 });
    }
});
</script>

<template>
    <div v-if="ret">
        <div v-if="msg" style="color: red">{{ msg }}</div>
        <el-text>飞行、住院等非OK状态时该表格不可用</el-text>
        <el-table v-if="ret" :data="ret" style="width: 100%">
            <el-table-column label="物品">
                <template #default="scope">
                    <div>
                        <span :style="{backgroundImage: 'url(/images/items/'+scope.row.id+'/small.png)'}"
                              style="display:inline-block;width:38px;height:19px;"/>
                        <span v-text="scope.row.title"/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="价值(缓)">
                <template #default="scope">
                    <div v-text="'$'+toThousands(scope.row.price)"/>
                </template>
            </el-table-column>
        </el-table>
        <div>总计 ${{ toThousands(total) }}</div>
    </div>
    <el-skeleton v-if="!ret" :rows="8" animated/>
</template>

<style scoped>

</style>