<template>
  <div class="dashboard-cards">
    <div style="font-size:32px; font-weight: bold;  margin-bottom: 20px;    text-align: center;">
      Dashboard
    </div>
    <div style="margin-bottom: 24px; text-align: right;">
      <label style="margin-right: 8px; font-weight: 600;">NE：</label>
      <a-select
        v-model:value="selectedImsNeId"
        :options="imsNeList.map(ne => ({ label: ne.neName || ne.neId, value: ne.neId }))"
        @change="onImsNeChange"
        style="width: 100px; font-size: 15px;"
        :dropdown-style="{ borderRadius: '8px' }"
        placeholder='No NE'
        :bordered="true"
        class="ims-select"
        :allow-clear="false"
      />
      <!--      <a-button-->
      <!--        type="primary"-->
      <!--        style="margin-left: 16px;"-->
      <!--        @click="testDataUpdate"-->
      <!--      >-->
      <!--        测试数据更新-->
      <!--      </a-button>-->
      <!--      <div style="margin-top: 8px; font-size: 12px; color: #666;">-->
      <!--        WebSocket状态: {{ wsStatus }} | 数据点数量: {{ imsRealtimeRawData.length }}-->
      <!--      </div>-->
    </div>
    <div class="row-title">Calls</div>
    <a-row :gutter="[48, 48]">
      <a-col :xs="24" :sm="24" :lg="8">
        <a-card bordered class="metric-card">
          <div class="card-title">active calls <span class="main-icon phone">📞</span></div>
          <div class="card-content">
            <div class="trend-chart">
              <div class="mini-chart" ref="callsChartRef"></div>
              <!--              <div class="card-subtext">60m <span class="card-sub-sep">now</span></div>-->
            </div>
            <div class="metric-info">
              <div class="metric-value">
                {{ calculateActiveCallsValue() }}
                <span class="main-arrow" :class="calculateActiveCallsArrowDirection()">{{ calculateActiveCallsArrow() }}</span>
              </div>
              <div class="metric-change">{{ calculateActiveCallsChange() }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <!--      <a-col :xs="24" :sm="24" :lg="6">-->
      <!--        <a-card bordered class="metric-card">-->
      <!--          <div class="card-title">MOS <span class="main-icon phone">📞</span></div>-->
      <!--          <div class="card-content">-->
      <!--            <div class="trend-chart">-->
      <!--              <div class="mini-chart" ref="mosChartRef"></div>-->
      <!--&lt;!&ndash;              <div class="card-subtext">60m <span class="card-sub-sep">now</span></div>&ndash;&gt;-->
      <!--            </div>-->
      <!--            <div class="metric-info">-->
      <!--              <div class="metric-value">-->
      <!--                4.30-->
      <!--                <span class="main-arrow up">↗</span>-->
      <!--              </div>-->
      <!--              <div class="metric-change">+0.08 last 5m</div>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </a-card>-->
      <!--      </a-col>-->
      <a-col :xs="24" :sm="24" :lg="8">
        <a-card bordered class="metric-card">
          <div class="card-title">calls MO / MT</div>
          <div class="card-content full-width">
            <div class="metric-info" style="width:100%;text-align:center;">
              <div class="metric-value" style="font-size:38px;justify-content:center;">
                {{ calculateMOValue() }}% / {{ calculateMTValue() }}%
              </div>
              <div class="metric-change">{{ calculateMOChange() }} / {{ calculateMTChange() }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :lg="8">
        <a-card bordered class="metric-card">
          <div class="card-title">failed calls <span class="main-icon phone">📞</span></div>
          <div class="card-content">
            <div class="trend-chart">
              <div class="mini-chart" ref="failedCallsChartRef"></div>
              <!--              <div class="card-subtext">60m <span class="card-sub-sep">now</span></div>-->
            </div>
            <div class="metric-info">
              <div class="metric-value">
                {{ calculateFailedCallsValue() }}
                <span class="main-arrow" :class="calculateFailedCallsArrowDirection()">{{ calculateFailedCallsArrow() }}</span>
              </div>
              <div class="metric-change">{{ calculateFailedCallsChange() }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <div class="row-title" style="margin-top: 48px;">Registrations</div>
    <a-row :gutter="[48, 48]">
      <a-col :xs="24" :sm="24" :lg="8">
        <a-card bordered class="metric-card">
          <div class="card-title">active registrations <span class="main-icon calendar">📅</span></div>
          <div class="card-content">
            <div class="trend-chart">
              <div class="mini-chart" ref="regChartRef"></div>
              <!--              <div class="card-subtext">24h <span class="card-sub-sep">now</span></div>-->
            </div>
            <div class="metric-info">
              <div class="metric-value">
                {{ calculateActiveRegistrationsValue() }}
                <span class="main-arrow" :class="calculateActiveRegistrationsArrowDirection()">{{ calculateActiveRegistrationsArrow() }}</span>
              </div>
              <div class="metric-change">{{ calculateActiveRegistrationsChange() }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :lg="8">
        <a-card bordered class="metric-card">
          <div class="card-title">registration success</div>
          <div class="card-content full-width">
            <div class="metric-info" style="width:100%;text-align:center;">
              <div class="metric-value" style="font-size:38px;justify-content:center;">{{ calculateRegSuccessValue() }}%</div>
              <div class="metric-change">{{ calculateRegSuccessChange() }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :lg="8">
        <a-card bordered class="metric-card">
          <div class="card-title">failed registrations total <span class="main-icon calendar">📅</span></div>
          <div class="card-content">
            <div class="trend-chart">
              <div class="mini-chart" ref="failedRegChartRef"></div>
              <!--              <div class="card-subtext">24h <span class="card-sub-sep">now</span></div>-->
            </div>
            <div class="metric-info">
              <div class="metric-value">
                {{ calculateFailedRegistrationsValue() }}
                <span class="main-arrow" :class="calculateFailedRegistrationsArrowDirection()">{{ calculateFailedRegistrationsArrow() }}</span>
              </div>
              <div class="metric-change">{{ calculateFailedRegistrationsChange() }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import useNeListStore from '@/store/modules/ne_list';
import { WS } from '@/plugins/ws-websocket'
import { listKPIData } from '@/api/perfManage/goldTarget'
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'

echarts.use([LineChart, GridComponent, CanvasRenderer])

const callsChartRef = ref<HTMLDivElement | null>(null)
const mosChartRef = ref<HTMLDivElement | null>(null)
const failedCallsChartRef = ref<HTMLDivElement | null>(null)
const regChartRef = ref<HTMLDivElement | null>(null)
const failedRegChartRef = ref<HTMLDivElement | null>(null)

// IMS网元列表
const imsNeList = ref<{ neId: string, neName: string }[]>([])
// 当前选中的IMS网元ID
const selectedImsNeId = ref('')
// WebSocket实例
const imsWs = ref<any>(null)
// IMS实时原始数据（只存储当前选中网元）
const imsRealtimeRawData = ref<any[]>([])
// WebSocket连接状态
const wsStatus = ref('未连接')

// 获取IMS网元列表
onMounted(async () => {
  // console.log('组件挂载，开始获取IMS网元列表') // 调试信息

  const res = await useNeListStore().fnNelist()
  // console.log('获取到的网元列表响应:', res) // 调试信息

  if (res && Array.isArray(res.data)) {
    imsNeList.value = res.data.filter((ne: any) => ne.neType === 'IMS')
    // console.log('过滤后的IMS网元列表:', imsNeList.value) // 调试信息

    if (imsNeList.value.length > 0) {
      selectedImsNeId.value = imsNeList.value[0].neId
      // console.log('默认选中第一个IMS网元:', selectedImsNeId.value) // 调试信息

      // 先获取历史数据，再订阅实时数据
      await fetchHistoryData(selectedImsNeId.value)
      subscribeImsRealtime(selectedImsNeId.value)
    } else {
      // console.warn('没有找到IMS类型的网元') // 调试信息
    }
  } else {
    // console.error('获取网元列表失败或数据格式不正确') // 调试信息
  }
})

// 获取历史数据
async function fetchHistoryData(neId: string) {
  if (!neId) return

  try {
    // 计算30分钟前的时间
    const endTime = Date.now()
    const beginTime = endTime - (30 * 60 * 1000) // 30分钟前

    // 构建查询参数，与黄金指标界面保持一致
    const params = {
      neType: 'IMS',
      neId: neId,
      interval: 60, // 1分钟颗粒度
      beginTime: beginTime.toString(),
      endTime: endTime.toString(),
      sortField: 'timeGroup',
      sortOrder: 'desc',
      pageSize: 30, // 最多获取30条数据
      pageNum: 1
    }

    console.log('获取历史数据参数:', params)

    const res = await listKPIData(params)
    console.log('历史数据响应:', res)

    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
      // 将历史数据转换为与实时数据相同的格式
      const historyData = res.data.map((item: any) => ({
        timestamp: item.timeGroup || Date.now(),
        data: item
      }))

      console.log('转换后的历史数据:', historyData)

      // 将历史数据添加到实时数据数组中（追加而不是覆盖）
      // 注意：这里直接赋值，因为这是初始加载历史数据
      imsRealtimeRawData.value = historyData

      // 更新所有图表
      updateActiveCallsChart()
      updateFailedCallsChart()
      updateActiveRegistrationsChart()
      updateFailedRegistrationsChart()
    } else {
      console.warn('获取历史数据失败或数据为空')
    }
  } catch (error) {
    console.error('获取历史数据出错:', error)
  }
}

// 切换IMS网元时，重新订阅
async function onImsNeChange() {
  // console.log('切换IMS网元，新的网元ID:', selectedImsNeId.value) // 调试信息

  // 切换网元时，先清空旧数据
  imsRealtimeRawData.value = []

  // 先获取历史数据，再订阅实时数据
  await fetchHistoryData(selectedImsNeId.value)
  subscribeImsRealtime(selectedImsNeId.value)
}

// 订阅指定IMS网元实时数据
function subscribeImsRealtime(neId: string) {
  // console.log('开始订阅IMS网元数据，网元ID:', neId) // 调试信息
  wsStatus.value = '连接中...' // 更新状态

  // 关闭旧WebSocket
  if (imsWs.value) {
    // console.log('关闭旧WebSocket连接') // 调试信息
    imsWs.value.close()
    imsWs.value = null
  }

  // 注意：不要清空历史数据，让历史数据保留
  // imsRealtimeRawData.value = [] // 移除这行，避免清空历史数据

  if (!neId) return

  imsWs.value = new WS()
  // console.log('创建新的WebSocket连接') // 调试信息

  imsWs.value.connect({
    url: '/ws',
    params: {
      subGroupID: `10_IMS_${neId}`,
    },
    onmessage: handleIMSRealtimeData,
    onerror: (error: any) => {
      // console.error('WebSocket连接错误:', error) // 调试信息
      wsStatus.value = '连接错误' // 更新状态
    },
    onopen: () => {
      // console.log('WebSocket连接已建立') // 调试信息
      wsStatus.value = '已连接' // 更新状态
    },
    onclose: () => {
      // console.log('WebSocket连接已关闭') // 调试信息
      wsStatus.value = '已断开' // 更新状态
    }
  })
}

// 组件卸载时关闭WebSocket
onBeforeUnmount(() => {
  if (imsWs.value) {
    imsWs.value.close()
    imsWs.value = null
  }
  wsStatus.value = '已断开' // 更新状态
})

// 更新active calls图表
function updateActiveCallsChart() {
  if (!callsChartRef.value) return

  // 获取图表实例
  let chart = echarts.getInstanceByDom(callsChartRef.value)
  if (!chart) {
    chart = echarts.init(callsChartRef.value)
  }

  // 准备图表数据
  const chartData = imsRealtimeRawData.value.map((item, index) => {
    const kpiEvent = item.data
    const scscf07 = Number(kpiEvent['SCSCF.07']) || 0
    return scscf07
  })

  console.log('updateActiveCallsChart - 原始数据点数量:', imsRealtimeRawData.value.length)
  console.log('updateActiveCallsChart - 图表数据:', chartData)

  // 如果没有数据，显示默认的平直线
  if (chartData.length === 0) {
    const defaultData = [0, 0, 0, 0, 0] // 5个默认数据点，值为0
    const xAxisData = [1, 2, 3, 4, 5]

    chart.setOption({
      grid: { left: 0, right: 0, top: 10, bottom: 10 },
      xAxis: { type: 'category', show: false, data: xAxisData },
      yAxis: { type: 'value', show: false },
      series: [{
        data: defaultData,
        type: 'line',  symbol: 'none',
        lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
        areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
      }]
    })
    return
  }

  // 如果数据不足，补充默认数据
  while (chartData.length < 5) {
    chartData.unshift(0) // 在开头补充默认值0
  }

  // 限制数据点数量为最近30个
  if (chartData.length > 30) {
    chartData.splice(0, chartData.length - 30)
  }

  console.log('updateActiveCallsChart - 最终图表数据点数量:', chartData.length)

  // 生成时间轴数据
  const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)

  chart.setOption({
    grid: { left: 0, right: 0, top: 10, bottom: 10 },
    xAxis: { type: 'category', show: false, data: xAxisData },
    yAxis: { type: 'value', show: false },
    series: [{
      data: chartData,
      type: 'line',  symbol: 'none',
      lineStyle: { width: 2, color: '#1890ff' }, // 蓝色线条表示有数据
      areaStyle: { color: 'rgba(24,144,255,0.1)' } // 淡蓝色填充
    }]
  })
}

// 更新failed calls图表
function updateFailedCallsChart() {
  if (!failedCallsChartRef.value) return

  // 获取图表实例
  let chart = echarts.getInstanceByDom(failedCallsChartRef.value)
  if (!chart) {
    chart = echarts.init(failedCallsChartRef.value)
  }

  // 准备图表数据
  const chartData = imsRealtimeRawData.value.map((item, index) => {
    const kpiEvent = item.data
    const scscf06 = Number(kpiEvent['SCSCF.06']) || 0
    const scscf07 = Number(kpiEvent['SCSCF.07']) || 0
    const failedCalls = scscf06 - scscf07
    return failedCalls
  })

  // 如果没有数据，显示默认的平直线
  if (chartData.length === 0) {
    const defaultData = [0, 0, 0, 0, 0] // 5个默认数据点，值为0
    const xAxisData = [1, 2, 3, 4, 5]

    chart.setOption({
      grid: { left: 0, right: 0, top: 10, bottom: 10 },
      xAxis: { type: 'category', show: false, data: xAxisData },
      yAxis: { type: 'value', show: false },
      series: [{
        data: defaultData,
        type: 'line',  symbol: 'none',
        lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
        areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
      }]
    })
    return
  }

  // 如果数据不足，补充默认数据
  while (chartData.length < 5) {
    chartData.unshift(0) // 在开头补充默认值0
  }

  // 限制数据点数量为最近30个
  if (chartData.length > 30) {
    chartData.splice(0, chartData.length - 30)
  }

  // 生成时间轴数据
  const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)

  chart.setOption({
    grid: { left: 0, right: 0, top: 10, bottom: 10 },
    xAxis: { type: 'category', show: false, data: xAxisData },
    yAxis: { type: 'value', show: false },
    series: [{
      data: chartData,
      type: 'line',  symbol: 'none',
      lineStyle: { width: 2, color: '#faad14' }, // 橙色线条表示failed calls
      areaStyle: { color: 'rgba(250,173,20,0.1)' } // 淡橙色填充
    }]
  })
}

// 更新active registrations图表
function updateActiveRegistrationsChart() {
  if (!regChartRef.value) return

  // 获取图表实例
  let chart = echarts.getInstanceByDom(regChartRef.value)
  if (!chart) {
    chart = echarts.init(regChartRef.value)
  }

  // 准备图表数据
  const chartData = imsRealtimeRawData.value.map((item, index) => {
    const kpiEvent = item.data
    const scscf03 = Number(kpiEvent['SCSCF.03']) || 0
    return scscf03
  })

  // 如果没有数据，显示默认的平直线
  if (chartData.length === 0) {
    const defaultData = [0, 0, 0, 0, 0] // 5个默认数据点，值为0
    const xAxisData = [1, 2, 3, 4, 5]

    chart.setOption({
      grid: { left: 0, right: 0, top: 10, bottom: 10 },
      xAxis: { type: 'category', show: false, data: xAxisData },
      yAxis: { type: 'value', show: false },
      series: [{
        data: defaultData,
        type: 'line',  symbol: 'none',
        lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
        areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
      }]
    })
    return
  }

  // 如果数据不足，补充默认数据
  while (chartData.length < 5) {
    chartData.unshift(0) // 在开头补充默认值0
  }

  // 限制数据点数量为最近30个
  if (chartData.length > 30) {
    chartData.splice(0, chartData.length - 30)
  }

  // 生成时间轴数据
  const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)

  chart.setOption({
    grid: { left: 0, right: 0, top: 10, bottom: 10 },
    xAxis: { type: 'category', show: false, data: xAxisData },
    yAxis: { type: 'value', show: false },
    series: [{
      data: chartData,
      type: 'line',  symbol: 'none',
      lineStyle: { width: 2, color: '#1890ff' }, // 蓝色线条表示active registrations
      areaStyle: { color: 'rgba(24,144,255,0.1)' } // 淡蓝色填充
    }]
  })
}

// 更新failed registrations图表
function updateFailedRegistrationsChart() {
  if (!failedRegChartRef.value) return

  // 获取图表实例
  let chart = echarts.getInstanceByDom(failedRegChartRef.value)
  if (!chart) {
    chart = echarts.init(failedRegChartRef.value)
  }

  // 准备图表数据
  const chartData = imsRealtimeRawData.value.map((item, index) => {
    const kpiEvent = item.data
    const scscf04 = Number(kpiEvent['SCSCF.04']) || 0
    const scscf03 = Number(kpiEvent['SCSCF.03']) || 0
    const failedRegistrations = scscf04 - scscf03
    return failedRegistrations
  })

  // 如果没有数据，显示默认的平直线
  if (chartData.length === 0) {
    const defaultData = [0, 0, 0, 0, 0] // 5个默认数据点，值为0
    const xAxisData = [1, 2, 3, 4, 5]

    chart.setOption({
      grid: { left: 0, right: 0, top: 10, bottom: 10 },
      xAxis: { type: 'category', show: false, data: xAxisData },
      yAxis: { type: 'value', show: false },
      series: [{
        data: defaultData,
        type: 'line',  symbol: 'none',
        lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
        areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
      }]
    })
    return
  }

  // 如果数据不足，补充默认数据
  while (chartData.length < 5) {
    chartData.unshift(0) // 在开头补充默认值0
  }

  // 限制数据点数量为最近30个
  if (chartData.length > 30) {
    chartData.splice(0, chartData.length - 30)
  }

  // 生成时间轴数据
  const xAxisData = Array.from({ length: chartData.length }, (_, i) => i + 1)

  chart.setOption({
    grid: { left: 0, right: 0, top: 10, bottom: 10 },
    xAxis: { type: 'category', show: false, data: xAxisData },
    yAxis: { type: 'value', show: false },
    series: [{
      data: chartData,
      type: 'line',  symbol: 'none',
      lineStyle: { width: 2, color: '#f5222d' }, // 红色线条表示failed registrations
      areaStyle: { color: 'rgba(245,34,45,0.1)' } // 淡红色填充
    }]
  })
}

// 处理IMS实时数据（只存储当前选中网元）
function handleIMSRealtimeData(res: any) {
  // console.log('收到实时数据:', res) // 调试信息

  // 检查数据结构：后端实际格式是 {code: 1, data: {...}, msg: 'success'}
  const { code, data, msg } = res

  // 检查是否是错误响应
  if (code !== 1 || !data) {
    // console.warn('收到错误响应或数据格式不正确:', res) // 调试信息
    return
  }

  // 检查是否是连接确认消息（只包含clientId）
  if (data.clientId) {
    // console.log('收到WebSocket连接确认消息:', data.clientId) // 调试信息
    return
  }

  // 检查是否是KPI数据消息（包含data和groupId）
  if (data.data && data.groupId) {
    // console.log('收到KPI数据消息，groupId:', data.groupId) // 调试信息

    // 解析订阅组ID，确认是我们订阅的IMS网元
    const [_, neType, neId] = data.groupId.split('_')
    if (neType !== 'IMS' || neId !== selectedImsNeId.value) {
      // console.log('收到其他网元数据，忽略:', data.groupId) // 调试信息
      return
    }

    const kpiEvent = data.data
    if (!kpiEvent) {
      // console.warn('KPI事件数据为空') // 调试信息
      return
    }

    // console.log('处理IMS网元KPI数据:', kpiEvent) // 调试信息

    // 确保数据结构正确
    const dataToStore = {
      timestamp: Date.now(),
      data: kpiEvent
    }

    // 将新数据添加到数组末尾（最新的数据在最后）
    imsRealtimeRawData.value.push(dataToStore)

    // 保持数据点数量在合理范围内（最多200个点）
    if (imsRealtimeRawData.value.length > 200) {
      imsRealtimeRawData.value.shift() // 移除最早的数据点
    }

    console.log('实时数据已添加，当前数据点数量:', imsRealtimeRawData.value.length)
    console.log('最新数据:', dataToStore)

    // 更新active calls图表
    updateActiveCallsChart()
    // 更新failed calls图表
    updateFailedCallsChart()
    // 更新active registrations图表
    updateActiveRegistrationsChart()
    // 更新failed registrations图表
    updateFailedRegistrationsChart()
  } else {
    // console.log('收到未知格式的数据:', data) // 调试信息
  }
}

onMounted(() => {
  // 初始化所有图表为0值线
  const defaultChartOption = {
    grid: { left: 0, right: 0, top: 10, bottom: 10 },
    xAxis: { type: 'category', show: false, data: [1, 2, 3, 4, 5] },
    yAxis: { type: 'value', show: false },
    series: [{
      data: [0, 0, 0, 0, 0], // 默认显示0值
      type: 'line',  symbol: 'none',
      lineStyle: { width: 2, color: '#d9d9d9' }, // 灰色线条表示无数据
      areaStyle: { color: 'rgba(217,217,217,0.1)' } // 淡灰色填充
    }]
  }

  // active calls
  if (callsChartRef.value) {
    const chart = echarts.init(callsChartRef.value)
    chart.setOption(defaultChartOption)
  }

  // MOS - 保持原有的模拟数据
  if (mosChartRef.value) {
    const chart = echarts.init(mosChartRef.value)
    chart.setOption({
      grid: { left: 0, right: 0, top: 10, bottom: 10 },
      xAxis: { type: 'category', show: false, data: [1,2,3,4,5] },
      yAxis: { type: 'value', show: false },
      series: [{
        data: [4.62, 4.50, 4.40, 4.35, 4.30],
        type: 'line',  symbol: 'none',
        lineStyle: { width: 2, color: '#52c41a' },
        areaStyle: { color: 'rgba(82,196,26,0.1)' }
      }]
    })
  }

  // failed calls
  if (failedCallsChartRef.value) {
    const chart = echarts.init(failedCallsChartRef.value)
    chart.setOption(defaultChartOption)
  }

  // active registrations
  if (regChartRef.value) {
    const chart = echarts.init(regChartRef.value)
    chart.setOption(defaultChartOption)
  }

  // failed registrations
  if (failedRegChartRef.value) {
    const chart = echarts.init(failedRegChartRef.value)
    chart.setOption(defaultChartOption)
  }
})

// 计算MO值 (SCSCF.05/SCSCF.06)*100
function calculateMOValue() {
  if (imsRealtimeRawData.value.length === 0) return '-'

  // 获取最新的数据
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  if (!latestData || !latestData.data) return '-'

  const kpiEvent = latestData.data
  const scscf05 = Number(kpiEvent['SCSCF.05']) || 0
  const scscf06 = Number(kpiEvent['SCSCF.06']) || 0

  if (scscf06 === 0) return '-'

  const moValue = (scscf05 / scscf06) * 100
  return moValue.toFixed(1)
}

// 计算MT值 (SCSCF.06/SCSCF.07)*100
function calculateMTValue() {
  if (imsRealtimeRawData.value.length === 0) return '-'

  // 获取最新的数据
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  if (!latestData || !latestData.data) return '-'

  const kpiEvent = latestData.data
  const scscf06 = Number(kpiEvent['SCSCF.06']) || 0
  const scscf07 = Number(kpiEvent['SCSCF.07']) || 0

  if (scscf07 === 0) return '-'

  const mtValue = (scscf06 / scscf07) * 100
  return mtValue.toFixed(1)
}

// 计算MO变化值（完善版本）
function calculateMOChange() {
  if (imsRealtimeRawData.value.length < 2) return '±0.00% last 1m'

  // 获取最新和上一个数据点
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]

  if (!latestData?.data || !previousData?.data) return '±0.00% last 1m'

  const latestKpi = latestData.data
  const previousKpi = previousData.data

  const latestMO = calculateMOValueFromData(latestKpi)
  const previousMO = calculateMOValueFromData(previousKpi)

  // 检查MO是否有有效值
  if (latestMO === '-' || previousMO === '-') return '±0.00% last 5s'

  // 计算变化幅度
  const change = latestMO - previousMO

  // 检查是否有变化
  if (change === 0) return '±0.00% last 5s'

  const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`

  // 计算时间差
  const timeDiff = calculateTimeDifference(latestData, previousData)

  return `${changeText} last ${timeDiff}`
}

// 计算MT变化值（完善版本）
function calculateMTChange() {
  if (imsRealtimeRawData.value.length < 2) return '±0.00% last 5s'

  // 获取最新和上一个数据点
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]

  if (!latestData?.data || !previousData?.data) return '±0.00% last 5s'

  const latestKpi = latestData.data
  const previousKpi = previousData.data

  const latestMT = calculateMTValueFromData(latestKpi)
  const previousMT = calculateMTValueFromData(previousKpi)

  // 检查MT是否有有效值
  if (latestMT === '-' || previousMT === '-') return '±0.00% last 5s'

  // 计算变化幅度
  const change = latestMT - previousMT

  // 检查是否有变化
  if (change === 0) return '±0.00% last 5s'

  const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`

  // 计算时间差
  const timeDiff = calculateTimeDifference(latestData, previousData)

  return `${changeText} last ${timeDiff}`
}

// 计算时间差函数
function calculateTimeDifference(latestData: any, previousData: any) {
  // 获取时间戳
  const latestTime = latestData.timestamp || latestData.time || Date.now()
  const previousTime = previousData.timestamp || previousData.time || Date.now()

  // 计算时间差（毫秒）
  const diffMs = Math.abs(latestTime - previousTime)

  // 转换为秒
  const diffSeconds = Math.floor(diffMs / 1000)

  // 转换为分钟
  const diffMinutes = Math.floor(diffSeconds / 60)

  // 根据时间差返回合适的格式
  if (diffMinutes > 0) {
    return `${diffMinutes}m`
  } else {
    return `${diffSeconds}s`
  }
}

// 辅助函数：从数据中计算MO值
function calculateMOValueFromData(kpiEvent: any) {
  const scscf05 = Number(kpiEvent['SCSCF.05']) || 0
  const scscf06 = Number(kpiEvent['SCSCF.06']) || 0
  return scscf06 === 0 ? '-' : (scscf05 / scscf06) * 100
}

// 辅助函数：从数据中计算MT值
function calculateMTValueFromData(kpiEvent: any) {
  const scscf06 = Number(kpiEvent['SCSCF.06']) || 0
  const scscf07 = Number(kpiEvent['SCSCF.07']) || 0
  return scscf07 === 0 ? '-' : (scscf06 / scscf07) * 100
}

// 计算registration success值
function calculateRegSuccessValue() {
  if (imsRealtimeRawData.value.length === 0) return '-'

  // 获取最新的数据
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  if (!latestData || !latestData.data) return '-'

  const kpiEvent = latestData.data
  const scscf03 = Number(kpiEvent['SCSCF.03']) || 0
  const scscf04 = Number(kpiEvent['SCSCF.04']) || 0

  if (scscf04 === 0) return '-'

  const regSuccessValue = (scscf03 / scscf04) * 100
  return regSuccessValue.toFixed(1)
}

// 计算registration success变化值
function calculateRegSuccessChange() {
  if (imsRealtimeRawData.value.length < 2) return '±0.00% last 5s'

  // 获取最新和上一个数据点
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]

  if (!latestData?.data || !previousData?.data) return '±0.00% last 5s'

  const latestKpi = latestData.data
  const previousKpi = previousData.data

  const latestRegSuccess = calculateRegSuccessValueFromData(latestKpi)
  const previousRegSuccess = calculateRegSuccessValueFromData(previousKpi)

  // 检查registration success是否有有效值
  if (latestRegSuccess === '-' || previousRegSuccess === '-') return '±0.00% last 5s'

  // 计算变化幅度
  const change = latestRegSuccess - previousRegSuccess

  // 检查是否有变化
  if (change === 0) return '±0.00% last 5s'

  const changeText = change > 0 ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`

  // 计算时间差
  const timeDiff = calculateTimeDifference(latestData, previousData)

  return `${changeText} last ${timeDiff}`
}

// 辅助函数：从数据中计算registration success值
function calculateRegSuccessValueFromData(kpiEvent: any) {
  const scscf03 = Number(kpiEvent['SCSCF.03']) || 0
  const scscf04 = Number(kpiEvent['SCSCF.04']) || 0
  return scscf04 === 0 ? '-' : (scscf03 / scscf04) * 100
}

// 计算active calls值
function calculateActiveCallsValue() {
  if (imsRealtimeRawData.value.length === 0) return '-'

  // 获取最新的数据
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  if (!latestData || !latestData.data) return '-'

  const kpiEvent = latestData.data
  const scscf07 = Number(kpiEvent['SCSCF.07']) || 0

  if (scscf07 === 0) return '-'

  const activeCallsValue = scscf07
  return activeCallsValue.toFixed(0)
}

// 计算active calls箭头方向
function calculateActiveCallsArrowDirection() {
  const changeText = calculateActiveCallsChange()

  if (changeText.startsWith('+')) return 'up'
  if (changeText.startsWith('-')) return 'down'
  return 'up' // ±0 或无变化时默认向上
}

// 计算active calls箭头
function calculateActiveCallsArrow() {
  const changeText = calculateActiveCallsChange()

  if (changeText.startsWith('+')) return '↗'
  if (changeText.startsWith('-')) return '↘'
  return '→' // ±0 或无变化时显示水平箭头
}

// 计算active calls变化值
function calculateActiveCallsChange() {
  if (imsRealtimeRawData.value.length < 2) return '±0 last 5s'

  // 获取最新和上一个数据点
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]

  if (!latestData?.data || !previousData?.data) return '±0 last 5s'

  const latestKpi = latestData.data
  const previousKpi = previousData.data

  const latestActiveCalls = Number(latestKpi['SCSCF.07']) || 0
  const previousActiveCalls = Number(previousKpi['SCSCF.07']) || 0

  // 检查active calls是否有有效值
  if (latestActiveCalls === 0 || previousActiveCalls === 0) return '±0 last 5s'

  // 计算变化幅度
  const change = latestActiveCalls - previousActiveCalls

  // 检查是否有变化
  if (change === 0) return '±0 last 5s'

  const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`

  // 计算时间差
  const timeDiff = calculateTimeDifference(latestData, previousData)

  return `${changeText} last ${timeDiff}`
}

// 计算failed calls值
function calculateFailedCallsValue() {
  if (imsRealtimeRawData.value.length === 0) return '-'

  // 获取最新的数据
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  if (!latestData || !latestData.data) return '-'

  const kpiEvent = latestData.data
  const scscf06 = Number(kpiEvent['SCSCF.06']) || 0
  const scscf07 = Number(kpiEvent['SCSCF.07']) || 0

  const failedCallsValue = scscf06 - scscf07
  return failedCallsValue.toFixed(0)
}

// 计算failed calls箭头方向
function calculateFailedCallsArrowDirection() {
  const changeText = calculateFailedCallsChange()

  if (changeText.startsWith('+')) return 'up'
  if (changeText.startsWith('-')) return 'down'
  return 'up' // ±0 或无变化时默认向上
}

// 计算failed calls箭头
function calculateFailedCallsArrow() {
  const changeText = calculateFailedCallsChange()

  if (changeText.startsWith('+')) return '↗'
  if (changeText.startsWith('-')) return '↘'
  return '→' // ±0 或无变化时显示水平箭头
}

// 计算failed calls变化值
function calculateFailedCallsChange() {
  if (imsRealtimeRawData.value.length < 2) return '±0 last 5s'

  // 获取最新和上一个数据点
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]

  if (!latestData?.data || !previousData?.data) return '±0 last 5s'

  const latestKpi = latestData.data
  const previousKpi = previousData.data

  const latestScscf06 = Number(latestKpi['SCSCF.06']) || 0
  const latestScscf07 = Number(latestKpi['SCSCF.07']) || 0
  const previousScscf06 = Number(previousKpi['SCSCF.06']) || 0
  const previousScscf07 = Number(previousKpi['SCSCF.07']) || 0

  const latestFailedCalls = latestScscf06 - latestScscf07
  const previousFailedCalls = previousScscf06 - previousScscf07

  // 计算变化幅度
  const change = latestFailedCalls - previousFailedCalls

  // 检查是否有变化
  if (change === 0) return '±0 last 5s'

  const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`

  // 计算时间差
  const timeDiff = calculateTimeDifference(latestData, previousData)

  return `${changeText} last ${timeDiff}`
}

// 计算active registrations值
function calculateActiveRegistrationsValue() {
  if (imsRealtimeRawData.value.length === 0) return '-'

  // 获取最新的数据
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  if (!latestData || !latestData.data) return '-'

  const kpiEvent = latestData.data
  const scscf03 = Number(kpiEvent['SCSCF.03']) || 0

  if (scscf03 === 0) return '-'

  const activeRegistrationsValue = scscf03
  return activeRegistrationsValue.toFixed(0)
}

// 计算active registrations箭头方向
function calculateActiveRegistrationsArrowDirection() {
  const changeText = calculateActiveRegistrationsChange()

  if (changeText.startsWith('+')) return 'up'
  if (changeText.startsWith('-')) return 'down'
  return 'up' // ±0 或无变化时默认向上
}

// 计算active registrations箭头
function calculateActiveRegistrationsArrow() {
  const changeText = calculateActiveRegistrationsChange()

  if (changeText.startsWith('+')) return '↗'
  if (changeText.startsWith('-')) return '↘'
  return '→' // ±0 或无变化时显示水平箭头
}

// 计算active registrations变化值
function calculateActiveRegistrationsChange() {
  if (imsRealtimeRawData.value.length < 2) return '±0 last 5s'

  // 获取最新和上一个数据点
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]

  if (!latestData?.data || !previousData?.data) return '±0 last 5s'

  const latestKpi = latestData.data
  const previousKpi = previousData.data

  const latestActiveRegistrations = Number(latestKpi['SCSCF.03']) || 0
  const previousActiveRegistrations = Number(previousKpi['SCSCF.03']) || 0

  // 检查active registrations是否有有效值
  if (latestActiveRegistrations === 0 || previousActiveRegistrations === 0) return '±0 last 5s'

  // 计算变化幅度
  const change = latestActiveRegistrations - previousActiveRegistrations

  // 检查是否有变化
  if (change === 0) return '±0 last 5s'

  const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`

  // 计算时间差
  const timeDiff = calculateTimeDifference(latestData, previousData)

  return `${changeText} last ${timeDiff}`
}

// 计算failed registrations值
function calculateFailedRegistrationsValue() {
  if (imsRealtimeRawData.value.length === 0) return '-'

  // 获取最新的数据
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  if (!latestData || !latestData.data) return '-'

  const kpiEvent = latestData.data
  const scscf04 = Number(kpiEvent['SCSCF.04']) || 0
  const scscf03 = Number(kpiEvent['SCSCF.03']) || 0

  const failedRegistrationsValue = scscf04 - scscf03
  return failedRegistrationsValue.toFixed(0)
}

// 计算failed registrations箭头方向
function calculateFailedRegistrationsArrowDirection() {
  const changeText = calculateFailedRegistrationsChange()

  if (changeText.startsWith('+')) return 'up'
  if (changeText.startsWith('-')) return 'down'
  return 'up' // ±0 或无变化时默认向上
}

// 计算failed registrations箭头
function calculateFailedRegistrationsArrow() {
  const changeText = calculateFailedRegistrationsChange()

  if (changeText.startsWith('+')) return '↗'
  if (changeText.startsWith('-')) return '↘'
  return '→' // ±0 或无变化时显示水平箭头
}

// 计算failed registrations变化值
function calculateFailedRegistrationsChange() {
  if (imsRealtimeRawData.value.length < 2) return '±0 last 5s'

  // 获取最新和上一个数据点
  const latestData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 1]
  const previousData = imsRealtimeRawData.value[imsRealtimeRawData.value.length - 2]

  if (!latestData?.data || !previousData?.data) return '±0 last 5s'

  const latestKpi = latestData.data
  const previousKpi = previousData.data

  const latestScscf04 = Number(latestKpi['SCSCF.04']) || 0
  const latestScscf03 = Number(latestKpi['SCSCF.03']) || 0
  const previousScscf04 = Number(previousKpi['SCSCF.04']) || 0
  const previousScscf03 = Number(previousKpi['SCSCF.03']) || 0

  const latestFailedRegistrations = latestScscf04 - latestScscf03
  const previousFailedRegistrations = previousScscf04 - previousScscf03

  // 计算变化幅度
  const change = latestFailedRegistrations - previousFailedRegistrations

  // 检查是否有变化
  if (change === 0) return '±0 last 5s'

  const changeText = change > 0 ? `+${change.toFixed(0)}` : `${change.toFixed(0)}`

  // 计算时间差
  const timeDiff = calculateTimeDifference(latestData, previousData)

  return `${changeText} last ${timeDiff}`
}

// 测试数据更新
function testDataUpdate() {
  // console.log('测试数据更新')

  // 创建模拟的后端KPI数据消息格式
  const mockWebSocketMessage = {
    code: 1,
    data: {
      data: {
        'SCSCF.03': Math.floor(Math.random() * 300000) + 200000, // active registrations
        'SCSCF.04': Math.floor(Math.random() * 310000) + 200000, // total registrations
        'SCSCF.05': Math.floor(Math.random() * 15000) + 10000,   // MO calls
        'SCSCF.06': Math.floor(Math.random() * 16000) + 10000,   // total calls
        'SCSCF.07': Math.floor(Math.random() * 15000) + 10000,   // successful calls
      },
      groupId: `10_IMS_${selectedImsNeId.value}`
    },
    msg: 'success'
  }

  // console.log('模拟WebSocket消息:', mockWebSocketMessage)

  // 直接调用handleIMSRealtimeData函数
  handleIMSRealtimeData(mockWebSocketMessage)
}
</script>

<style scoped>
.row-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-left: 8px;
  border-left: 3px solid #1890ff;
}
.dashboard-cards {
  padding: 16px;
}
.metric-card {
  border-radius: 16px;
  height: 100%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-content {
  display: flex;
  align-items: center;
}
.trend-chart {
  flex: 2;
  height: 60px;
  min-width: 140px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.mini-chart {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  display: block;
}
.card-subtext {
  font-size: 12px;
  color: #b0b0b0;
  margin-top: 2px;
  letter-spacing: 0.1em;
}
.card-sub-sep {
  margin-left: 18px;
}
.metric-info {
  flex: 1;
  margin-left: 16px;
  text-align: right;
  min-width: 90px;
}
.metric-value {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.metric-change {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
.main-arrow.up { color: #4CAF50; margin-left: 8px; }
.main-arrow.down { color: #F44336; margin-left: 8px; }
.main-icon.phone { color: #1890ff; font-size: 22px; margin-left: 8px; }
.main-icon.calendar { color: #52c41a; font-size: 22px; margin-left: 8px; }
.full-width {
  width: 100%;
  text-align: center;
}

/* IMS网元选择框样式 */
.ims-select :deep(.ant-select-selector) {
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.08);
  min-height: 36px;
  font-size: 15px;
  border: 1px solid #d9d9d9;
  transition: all 0.3s;
}

.ims-select :deep(.ant-select-selector:hover) {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
}

.ims-select :deep(.ant-select-focused .ant-select-selector) {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.ims-select :deep(.ant-select-selection-item) {
  font-weight: 600;
  color: #333;
}

.ims-select :deep(.ant-select-arrow) {
  color: #666;
}

/* 暗色主题适配 */
[data-theme='dark'] .ims-select :deep(.ant-select-selector) {
  background-color: #1f1f1f;
  border-color: #434343;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme='dark'] .ims-select :deep(.ant-select-selection-item) {
  color: #cacada;
}

[data-theme='dark'] .ims-select :deep(.ant-select-arrow) {
  color: #cacada;
}
</style>
