<template>
    <div v-if="commonUtils.getScriptEngine() === UserScriptEngine.RAW" class="wh-f-item">
        <el-image :src="staticImageSrc"/>
    </div>
    <el-table v-else-if="!loading" :data="tableData" style="width: 100%">
        <el-table-column label="区域" prop="area"/>
        <el-table-column label="更新时间" prop="updateTime"/>
        <el-table-column label="库存" prop="stock"/>
    </el-table>
    <el-skeleton v-if="loading" :rows="13" animated/>
</template>

<script lang="ts" setup>
import { CommonUtilsKey } from "../ts/class/utils/CommonUtils";
import { inject, onMounted, ref } from "vue";
import UserScriptEngine from "../ts/enum/UserScriptEngine.js";
import TravelItem from "../ts/feature/TravelItem";
import { LoggerKey } from "../ts/class/Logger";
import { Container } from "../ts/container/Container";

const commonUtils = inject(CommonUtilsKey);
const travelItem = Container.factory(TravelItem)
const logger = inject(LoggerKey);
const loading = ref(true);
const staticImageSrc = 'https://jjins.github.io/t2i/stock.png?' + Date.now();
const tableData = ref([]);
let travelItemData = null;

onMounted(async () => {
    travelItemData = await travelItem.get();
    loading.value = false;
    travelItem.itemFiler.forEach(item => {
        const update = (new Date().getTime() - new Date(travelItemData.stocks[item.name]['update'] * 1000).getTime()) / 1000 | 0;
        const tableItem = {
            area: item.show,
            updateTime: `${ update / 60 | 0 }分${ update % 60 | 0 }秒前`,
            stock: [],
        };
        travelItemData.stocks[item.name]['stocks'].forEach(stock => {
            if (item.stocks[stock.name]) {
                tableItem.stock.push(`${ item.stocks[stock.name] }(${ stock['quantity'] })`);
                // table += `<td${ stock['quantity'] === 0 ? ' style="background-color:#f44336;color:white;border-color:#000;"' : '' }>${ el.stocks[stock.name] } (${ stock['quantity'] })</td>`;
            }
        });
        tableData.value.push(tableItem);
    });
});
</script>

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

<style scoped>
.wh-f-item .el-image {
    display: block;
    margin: 0 auto;
}
</style>
