<script setup>
import {reactive, ref, watch} from "vue";
import {GetAllEnv} from "frontend/wailsjs/go/env/Env";
import {ElAutoResizer} from "element-plus";
import {useRoute} from "vue-router";
import {keepAliveFixed} from "src/utils/fixed/el-tablev2";

const table = reactive({
    columns: [
        {
            key: "name",
            dataKey: "name",
            title: "名称",
            width: 300,
            minWidth: "300px",
        },
        {
            key: "value",
            dataKey: "value",
            title: "值",
            width: 300,
            minWidth: "300px",
            flexGrow: 1
        }
    ],
    data: []
})

const tableRef = ref()
keepAliveFixed(tableRef)

GetAllEnv().then((data)=>{
    table.data = Object.entries(data).map(item => {
        return {
            name: item[0],
            value: item[1]
        }
    })
})
</script>

<template>

        <el-auto-resizer>
            <template #default="{ height, width}">
                <el-table-v2 mb-1 :height="height" :width="width" :data="table.data" :columns="table.columns" ref="tableRef">
                    <template #cell="scope">
                        <el-tooltip teleported>
                            <template #content>
                                <div v-for="(item,index) in (scope.rowData[scope.column.dataKey].split(';'))" :key="index">
                                    {{item}}
                                </div>
                            </template>

                            <template #default>
                                <div class="w-full truncate">
                                    {{scope.rowData[scope.column.dataKey]}}
                                </div>
                            </template>
                        </el-tooltip>
                    </template>
                </el-table-v2>
            </template>
        </el-auto-resizer>

</template>

<style scoped>

</style>
