<!-- 解析列表 -->
<template>
    <el-dialog v-model="dialogVisible" title="详情" width="70%" draggable @closed="close">
        <div :style="tableHeight">
            <vxe-table border auto-resize height="auto" :data="tableData" v-bind="defaultAttribute">
                <vxe-column field="name" align="center" title="文件名称"></vxe-column>
                <vxe-column field="createTime" align="center" title="导入时间"></vxe-column>
                <vxe-column field="allCount" align="center" title="数据总数(条)" width="120"></vxe-column>
                <vxe-column field="realCount" align="center" title="已入库总数(条)" width="120"></vxe-column>
                <vxe-column field="state" align="center" title="解析状态" width="100">
                    <template v-slot:default="scoped">
                        <el-tag type="warning" v-if="scoped.row.state == 0">未解析</el-tag>
                        <el-tag type="success" v-if="scoped.row.state == 1">解析成功</el-tag>
                        <el-tag type="danger" v-if="scoped.row.state == 2">解析失败</el-tag>
                        <el-tag type="primary" v-if="scoped.row.state == 3">文件不存在</el-tag>
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import TableStore from '@/utils/tableStore'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
const emit = defineEmits(['back'])
const dialogVisible = ref(false)
const tableHeight = mainHeight(440)
const height = ref(0)
height.value = window.innerHeight < 1080 ? 230 : 450

const tableStore: any = new TableStore({
    url: '',
    // publicHeight: height.value,
    showPage: false,
    column: [
        { width: '60', type: 'checkbox', fixed: 'left' },
        { title: '序号',  width: 80,formatter: (row: any) => {
        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
      } },
        { field: 'name', title: '文件名称', minWidth: 170 },
        { field: 'createTime', title: '导入时间', minWidth: 170 },
        { field: 'allCount', title: '数据总数(条)', minWidth: 170 },
        { field: 'realCount', title: '已入库总数(条)', minWidth: 170 },
        {
            title: '解析状态',
            field: 'state',
            width: 100,
            render: 'tag',
            custom: {
                0: 'warning',
                1: 'success',
                2: 'danger',
                3: 'primary'
            },
            replaceValue: {
                0: '未解析',
                1: '解析成功',
                2: '解析失败',
                3: '文件不存在'
            }
        },
        {
            title: '操作',
            width: '180',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '详情',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {
                        // console.log(row.portableOfflLogList)
                    }
                }
            ]
        }
    ],
    loadCallback: () => {
        tableStore.table.data = []
    }
})
//返回
const handleBack = () => {
    emit('back')
}
const tableData: any = ref()
const open = (val: any) => {
    dialogVisible.value = true
    tableData.value = val
    setTimeout(() => {
        tableStore.index()
    }, 10)
}
const close = () => {
    dialogVisible.value = false
}
const updateViewportHeight = async () => {
    height.value = window.innerHeight < 1080 ? 230 : 450
    tableStore.table.publicHeight = height.value
}

onMounted(() => {
    updateViewportHeight() // 初始化视口高度
    window.addEventListener('resize', updateViewportHeight) // 监听窗口大小变化
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', updateViewportHeight) // 移除监听
})
defineExpose({ open })
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
    overflow-y: none !important;
    max-height: 70vh !important;
}
</style>
