<template>
    <el-dialog draggable v-model="dialogVisible" :title="title" width="900" :close-on-click-modal="false"
        :before-close="handleClose">

        <!-- 表格区域 -->
        <div class="table-area" :style="layout1">
            <vxe-table v-bind="defaultAttribute" :data="tableData" v-loading="loading" height="auto">
                <vxe-column type="seq" title="序号" width="80" align="center" />
                <vxe-column field="version" title="版本" min-width="120" align="center" />
                <vxe-column field="result" title="升级结果" width="120" align="center">
                    <template #default="{ row }">
                        <el-tag :type="getResultTagType(row.result)" size="small">
                            {{ getResultText(row.result) }}
                        </el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="upgradeTime" title="升级时间" width="180" align="center" />
                <vxe-column field="upgradeUser" title="升级人" width="120" align="center" />
            </vxe-table>
        </div>


    </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { ElMessage } from 'element-plus'
import { mainHeight } from '@/utils/layout'
import { getByDevId } from '@/api/cs-device-boot/cloudDeviceEntry'
const layout1 = mainHeight(100, 2)
// 弹框显示控制
const dialogVisible = ref(false)

// 表格数据
const tableData = ref([])

// 加载状态
const loading = ref(false)
const title = ref('升级日志')
// 升级结果标签类型映射
const getResultTagType = (result) => {
    const map = {
        success: 'success',
        fail: 'danger',
        processing: 'warning'
    }
    return map[result] || 'info'
}

// 升级结果文本映射
const getResultText = (result) => {
    const map = {
        success: '成功',
        fail: '失败',
        processing: '进行中'
    }
    return map[result] || result
}

// 打开弹框
const open = (row) => {
    title.value = `${row.name}_升级日志`
    dialogVisible.value = true
    getByDevId({
        devId: row.id
    }).then((res) => {
        tableData = res.data
    })

}

// 加载表格数据
const loadTableData = async (deviceId) => {
    loading.value = true

}

// 关闭弹框
const handleClose = () => {
    dialogVisible.value = false
    // 重置数据
    tableData.value = []
}

// 暴露方法给父组件
defineExpose({
    open
})

</script>

<style scoped></style>