<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'
import { eventRecall, fileRecall } from '@/api/cs-device-boot/recall'
const props = defineProps({
    checkedNodes: {
        type: Array,
        default: () => []
    }
})

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

const tableStore: any = new TableStore({
    url: '/cs-device-boot/csTerminalReply/bzLogs',
    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: 'logTime',
            title: '补召时间',
            width: 160,
            formatter: row => {
                return row.cellValue ? row.cellValue : '/'
            }
        },
        {
            field: 'log',
            title: '类型',
            width: 120,
            formatter: row => {
                return row.cellValue ? row.cellValue : '/'
            }
        },
        // {
        //     field: 'status',
        //     title: '状态',
        //     width: 120,
        //     formatter: row => {
        //         return row.cellValue ? row.cellValue : '/'
        //     }
        // },
        {
            field: 'result',
            title: '结果',
            minWidth: 300,
            formatter: row => {
                return row.cellValue ? row.cellValue : '/'
            }
        },


    ],
    beforeSearchFun: () => {
        if (!nodeClick.value || nodeClick.value.level !== 3) {
            ElMessage.warning('请先选中监测点')
            return // 阻止查询
        }
        if (nodeClick.value) {
            tableStore.table.params.searchValue = nodeClick.value.id
        }
    },
    loadCallback: () => { }
})
tableStore.table.params.sortBy = 'harmonic'

provide('tableStore', tableStore)


const nodeClick = ref(null)
// 处理父组件传递的树节点点击事件
const handleTreeNodeClick = (node: any) => {
    nodeClick.value = node
    if (tableStore && tableStore.index) {
        // 判断当前节点是否为监测点层级
        if (node) {
            if (node.level !== 3) {
                tableStore.table.loading = false
                ElMessage.warning('请先选中监测点')
                return
            }
        } else {
            tableStore.table.loading = false
            ElMessage.warning('请先选中监测点')
            return
        }
        tableStore.index()
    }
}


const exportTab = async () => {
    // ElMessage.info('稳态补召功能暂未开发！')
    if (!props.checkedNodes || props.checkedNodes.length === 0) {
        ElMessage.warning('请先勾选监测点')
        return
    }
    
    let  list=props.checkedNodes.filter((node: any) => node.devConType == 'MQTT')
    if(list.length > 0){
        ElMessage.warning('通讯协议为MQTT的装置暂不支持补召,['+list.map((node: any) => node.name).join(',')+']')
        return
    }



    await eventRecall({
        startTime: tableStore.table.params.startTime,
        endTime: tableStore.table.params.endTime,
        lineList: props.checkedNodes.map((node: any) => node.id),
        bzType: 0
    }).then((res: any) => {
        ElMessage.success(res.message)
        tableStore.index()
    })
}


defineExpose({
    handleTreeNodeClick
})

onMounted(() => {
    setTimeout(() => {
        tableStore.table.loading = false
    }, 3000)
})
</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>
