<script setup lang="ts">
import { ref } from 'vue'
import { getZlService } from '@/api/scjh.js'

const zls = ref([
    {
        generalOrder: '',
        divisionOrder: '',
        subordinateOrder: '',
        productName: '',
        batch: '',
        quantity: '',
        startTime: '',
        endTime: '',
        status: '',
        currentProcess: '',
        totalProcess: '',
    },
])

const getZl = async () => {
    let result = await getZlService()
    zls.value = result.data
    console.log(zls.value)
}

/**
 * 高亮当前流程
 * @param totalProcess 总流程字符串
 * @param currentProcess 当前流程
 * @returns 包含高亮 HTML 的字符串
 */
const highlightCurrentProcess = (totalProcess: string, currentProcess: string): string => {
    if (!totalProcess || !currentProcess) return totalProcess
    const processes = totalProcess.split('->')
    return processes
        .map((process) =>
            process === currentProcess
                ? `<span style="color: red; font-weight: bold;">${process}</span>`
                : process
        )
        .join('->')
}

/**
 * 计算进度百分比
 * @param totalProcess 总流程字符串
 * @param currentProcess 当前流程
 * @returns 进度百分比（0-100）
 */
const calculateProgress = (totalProcess: string, currentProcess: string): number => {
    if (!totalProcess || !currentProcess) return 0
    const processes = totalProcess.split('->')
    const currentIndex = processes.indexOf(currentProcess)
    if (currentIndex === -1) return 0
    return Math.round(((currentIndex + 1) / processes.length) * 100)
}

getZl()
</script>

<template>
    <h1>实时监控</h1>

    <el-table :data="zls" border style="width: 100%">
        <el-table-column prop="generalOrder" label="总制令" />
        <el-table-column prop="divisionOrder" label="分制令" />
        <el-table-column prop="subordinateOrder" label="子制令" />
        <el-table-column prop="productName" label="产品名" />
        <el-table-column prop="batch" label="批次" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="currentProcess" label="最新进展" >
            <template #default="{ row }">
                <el-tooltip
                    class="item"
                    effect="dark"
                    placement="top"
                    popper-class="tooltip-content"
                >
                    <template #content>
                        <div v-html="highlightCurrentProcess(row.totalProcess, row.currentProcess)"></div>
                    </template>
                    <span>{{ row.currentProcess }}</span>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column label="进度" width="300">
            <template #default="{ row }">
                <div style="display: flex; align-items: center;">
                    <!-- 进度条 -->
                    <el-progress
                        :stroke-width="20"
                        :percentage="calculateProgress(row.totalProcess, row.currentProcess)"
                        style="flex: 1;"
                        :show-text="false"
                    />

                    <span style="margin-left: 10px; font-size: 14px; font-weight: bold;">
                        {{ calculateProgress(row.totalProcess, row.currentProcess) }}%
                    </span>
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>

<style>

.tooltip-content {
    font-size: 16px; /* 提高字体大小 */
    line-height: 1.5; /* 提升可读性 */
    max-width: 500px; /* 设置最大宽度 */
    word-wrap: break-word; /* 自动换行 */
}
</style>