<template>
    <div :style="height">
        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <AssessTree
                    ref="AssessTreeRef"
                    :default-expand-all="false"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                    :highlight-current="true"
                    :current-node-key="currentTreeKey"
                    :expand-on-click-node="false"
                ></AssessTree>
            </pane>
            <pane style="background: #fff">
                <div class="actionButtons mb10">
                    <el-button icon="el-icon-Download" type="primary" @click="exportExcelTemplate" :loading="loading">
                        模版下载
                    </el-button>
                    <el-button type="primary" icon="el-icon-Upload" @click="handleImportClick">导入数据背景</el-button>
                    <el-button type="primary" icon="el-icon-Memo" class="ml10" @click="assess2">评估</el-button>
                    <el-button type="primary" icon="el-icon-Download" @click="exportReport">导出报告</el-button>
                </div>
                <div :style="collapseHeight" style="overflow-y: auto">
                    <el-collapse v-model="collapseName" class="pl10 pr10">
                        <el-collapse-item title="基本信息" :name="1">
                            <div class="loading-container">
                                <div v-if="infoLoading" class="loading-wrapper">
                                    <el-icon class="is-loading"><Loading /></el-icon>
                                    <span class="loading-text">加载中...</span>
                                </div>
                                <information
                                    v-show="!infoLoading"
                                    :node-id="currentNodeId"
                                    @data-loaded="() => (infoLoading = false)"
                                />
                            </div>
                        </el-collapse-item>
                        <el-collapse-item title="评估结果信息" :name="2">
                            <div class="loading-container">
                                <div v-if="outcomeLoading" class="loading-wrapper">
                                    <el-icon class="is-loading"><Loading /></el-icon>
                                    <span class="loading-text">加载中...</span>
                                </div>
                                <Outcome
                                    v-show="!outcomeLoading"
                                    :node-id="currentNodeId"
                                    @data-status="handleDataStatus"
                                    @data-loaded="() => (outcomeLoading = false)"
                                />
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </pane>
        </splitpanes>
    </div>

    <AssessTemplate ref="assessTemplate" @data-success="assess"></AssessTemplate>
</template>

<script setup lang="ts">
import { ElMessage, ElLoading } from 'element-plus'
import { onMounted, ref, provide, nextTick } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import AssessTree from '@/components/tree/pqs/assessTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import information from './information.vue'
import Outcome from './outcome.vue'
import { exportResult, downloadAssessTemplate, assessResult, userGetInfo } from '@/api/advance-boot/assess'
import { Loading } from '@element-plus/icons-vue'
import AssessTemplate from './assessTemplate.vue'

defineOptions({
    // name: 'harmonic-boot/report/word'
})
const collapseName = ref([1, 2])
const height = mainHeight(80)
const collapseHeight = mainHeight(125)
const size = ref(19)
const dotList: any = ref({})
const infoLoading = ref(false)
const outcomeLoading = ref(false)
const loading = ref(false)
const assessTemplate = ref()
// 添加当前节点 ID 的响应式变量
const currentNodeId = ref<string | number | null>(null)
const currentNodeName = ref('')

const tableStore = new TableStore({
    url: '',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {},
    loadCallback: () => {}
})
provide('tableStore', tableStore)

//有无评估结果
const result = ref(true)
const handleDataStatus = (hasData: boolean) => {
    if (!hasData) {
        result.value = false
    } else {
        result.value = true
    }
}

//模板下载
const exportExcelTemplate = async () => {
    loading.value = true
    downloadAssessTemplate().then((res: any) => {
        let blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
        })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = '评估结果模板'
        document.body.appendChild(link)
        link.click()
        link.remove()
    })
    await setTimeout(() => {
        loading.value = false
    }, 0)
}

//导出
const exportReport = () => {
    if (!result.value) {
        ElMessage.warning('请先评估！')
        return
    }

    const loadingMessage = ElMessage({
        message: '正在导出中',
        icon: h(Loading),
        duration: 0 // 不自动关闭
    })

    exportResult({}, currentNodeId.value ?? '')
        .then((res: any) => {
            let blob = new Blob([res], {
                // 注意使用 res.data 而不是 res
                type: 'application/vnd.ms-excel'
            })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a')
            link.href = url
            link.download = currentNodeName.value + '-评估结果.xls' // 建议添加文件扩展名
            document.body.appendChild(link)
            link.click()
            link.remove()
            window.URL.revokeObjectURL(url)

            // 关闭加载提示并显示成功消息
            loadingMessage.close()
            ElMessage.success('导出成功！')
        })
        .catch(error => {
            // 处理导出失败情况
            loadingMessage.close()
            ElMessage.error('导出失败，请重试！')
        })
}

//导入
const handleImportClick = () => {
    if (!currentNodeId.value) {
        ElMessage.warning('请选择评估节点！')
        return
    }
    assessTemplate.value.open('导入背景数据', currentNodeId.value.toString())
}

// 导入弹窗关闭后通知父组件更新
const assess = async () => {
    // 展开评估结果
    collapseName.value = [2]
    // 更新评估状态
    result.value = true

    // ✅ 强制更新 nodeId，触发子组件的 watch
    // 可以通过修改 currentNodeId 的值，或者重新赋值来触发 watch
    const tempId = currentNodeId.value
    currentNodeId.value = null // 先置空

    setTimeout(() => {
        currentNodeId.value = tempId // 再恢复，触发 watch
    }, 0)
}

//评估
const assess2 = async () => {
    // 显示导出中提示
    const loading = ElMessage({
        message: '评估结果中',
        icon: h(Loading),
        duration: 0 // 不自动关闭
    })

    userGetInfo({ assessId: currentNodeId.value })
        .then(res => {
            // 获取昨天的日期
            const yesterday = new Date()
            yesterday.setDate(yesterday.getDate() - 1)

            // 格式化为 yyyy-MM-dd
            const yyyy = yesterday.getFullYear()
            const mm = String(yesterday.getMonth() + 1).padStart(2, '0')
            const dd = String(yesterday.getDate()).padStart(2, '0')
            const yesterdayStr = `${yyyy}-${mm}-${dd}`

            const assessData = {
                assessId: currentNodeId.value,
                endTime: `${yesterdayStr} 23:59:59`, // 使用动态的昨天日期
                id: res.data.lineId,
                startTime: `${yesterdayStr} 00:00:00` // 使用动态的昨天日期
            }

            assessResult(assessData)
                .then(res => {
                    // 关闭加载提示并显示成功消息
                    loading.close()
                    ElMessage.success('评估成功！')

                    // 展开评估结果
                    collapseName.value = [2]
                    // 更新评估状态
                    result.value = true

                    const tempId = currentNodeId.value
                    currentNodeId.value = null // 先置空
                    setTimeout(() => {
                        currentNodeId.value = tempId // 再恢复，触发 watch
                    }, 0)
                })
                .catch(error => {
                    // 关闭加载提示并显示失败消息
                    loading.close()
                    ElMessage.error('评估失败')
                })
        })
        .catch(error => {
            // 处理 userGetInfo 的错误
            loading.close()
            ElMessage.error('获取用户信息失败')
        })
}

onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    setTimeout(() => {
        if (dom) {
            size.value = Math.round((180 / dom.offsetHeight) * 120)
        }
    }, 100)
})

// 添加树组件的引用
const AssessTreeRef = ref()
// 控制树组件当前高亮的节点key
const currentTreeKey = ref<string | number | null>(null)
// 保存上一次真正有效的节点key（子节点）
const lastValidNodeKey = ref<string | number | null>(null)

const handleNodeClick = (data: any, node: any) => {
    // 阻止点击父节点的逻辑处理
    if (
        !data ||
        (node && !node.isLeaf) ||
        (data.children && data.children.length > 0) ||
        (node && node.childNodes && node.childNodes.length > 0)
    ) {
        // 点击父节点时，保持树的高亮状态为上一次有效的子节点
        currentTreeKey.value = lastValidNodeKey.value
        return
    }

    // 如果点击的是同一个节点，不需要重新加载，但可以提供刷新功能
    if (currentNodeId.value === data?.id) {
        // 可选：如果你希望重复点击能刷新数据，可以保留下面的代码
        // 否则可以直接 return 不做任何操作
        infoLoading.value = true
        outcomeLoading.value = true
        // 强制触发子组件重新加载，通过先置空再恢复
        const tempId = currentNodeId.value
        currentNodeId.value = null
        nextTick(() => {
            currentNodeId.value = tempId
        })
        return
    }

    // 点击的是不同的子节点，更新高亮状态
    lastValidNodeKey.value = data?.id || null
    currentTreeKey.value = lastValidNodeKey.value
    dotList.value = data
    currentNodeId.value = data?.id || null
    currentNodeName.value = data?.name || ''

    // ✅ 开启两个 loading
    infoLoading.value = true
    outcomeLoading.value = true
}
const setId = (id: any) => {
    setTimeout(() => {
        lastValidNodeKey.value = id
        currentTreeKey.value = lastValidNodeKey.value
        dotList.value = findNodeByTreeId(AssessTreeRef.value?.tree, id)?.name || {}
        currentNodeName.value = findNodeByTreeId(AssessTreeRef.value?.tree, id)?.name || '' //data?.name || ''
        currentNodeId.value = id
        AssessTreeRef.value?.scrollToNode(id)
    }, 100)
}
/**
 * 递归查找树形结构中匹配treeId的节点对象
 * @param {Array} treeData - 树形结构数据（数组）
 * @param {string} targetTreeId - 要查找的treeId
 * @returns {object|null} 匹配的节点对象（未找到返回null）
 */
const findNodeByTreeId = (treeData: any, id: any) => {
    // 遍历每一个顶层节点
    for (const node of treeData) {
        // 1. 当前节点匹配，直接返回
        if (node.id === id) {
            return node
        }
        // 2. 当前节点有子节点，递归查找子节点
        if (node.children && Array.isArray(node.children) && node.children.length > 0) {
            const foundNode: any = findNodeByTreeId(node.children, id)
            // 子节点中找到则返回（终止递归）
            if (foundNode) {
                return foundNode
            }
        }
    }
    // 遍历完所有节点未找到，返回null
    return null
}
defineExpose({
    setId
})
</script>
<style lang="scss" scoped>
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}

:deep(.el-collapse-item__header) {
    // font-family: AlimamaDongFangDaKai;
    font-size: 20px;
    &::before {
        content: '▍'; /* 添加星号 */
        font-size: 16px;
        color: var(--el-color-primary);
    }
}

.actionButtons {
    display: flex;
    justify-content: flex-end;
}

.loading-container {
    position: relative;
    min-height: 100px; /* 防止空白时高度塌陷 */
}

.loading-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.loading-text {
    margin-left: 8px;
    color: #606266;
}

.is-loading {
    animation: rotating 2s linear infinite;
}

@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.ml10 {
    margin-left: 10px;
}
</style>
