<template>
    <div class="view">
        <TableHeader datePicker ref="headerRef" :showReset="false" showExport>
            <template v-slot:operation>
                <el-button type="primary" :icon="Setting" @click="exportTab">补召</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef" />
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, provide, nextTick, watch } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { ElMessage, ElTree } from 'element-plus'
import TableHeader from '@/components/table/header/index.vue'
import { Setting } from '@element-plus/icons-vue'

const props = defineProps({
    checkedNodes: {
        type: Array,
        default: () => []
    }
})

const tableParams: any = ref({})
const headerRef = ref()

const tableStore: any = new TableStore({
    url: '/cs-device-boot/portableOfflLog/queryMainLogPage',
    publicHeight: 80,
    method: 'POST',
    exportName: '稳态补召',
    column: [
        {
            title: '序号',
            width: 80,
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        {
            field: 'projectName',
            title: '工程名称',
            minWidth: 170,
            formatter: row => {
                return row.cellValue ? row.cellValue : '/'
            }
        },
        { field: 'successCount', title: '成功解析数', minWidth: 150 },
        { field: 'startTime', title: '导入开始时间', minWidth: 170, sortable: true },
        { field: 'endTime', title: '导入结束时间', minWidth: 170, sortable: true },
        {
            title: '解析状态',
            field: 'status',
            width: 100,
            render: 'tag',
            custom: {
                0: 'warning',
                1: 'success',
                2: 'danger',
                3: 'primary'
            },
            replaceValue: {
                0: '未解析',
                1: '解析成功',
                2: '解析失败',
                3: '文件不存在'
            }
        },
        {
            title: '操作',
            fixed: 'right',
            width: '100',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '详情',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {}
                }
            ]
        }
    ],
    beforeSearchFun: () => {},
    loadCallback: () => {}
})

provide('tableStore', tableStore)

const exportTab = () => {
    ElMessage.info('稳态补召功能暂未开发！')
}
//获取请求参数
const getTableParams = (val: any) => {
    tableParams.value = val
    tableStore.index()
}

defineExpose({
    getTableParams
})

onMounted(() => {
    tableStore.index()
})
</script>

<style lang="scss" scoped>
.header_btn {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.view :deep(.el-table) {
    height: calc(100% - 56px);
}
</style>
