<script setup lang="ts">
import { computed, watch, ref, onUnmounted } from 'vue';
import { useEcharts } from '@/hooks/common/echarts';
import { useAppStore } from '@/store/modules/app';
import type { ECOption } from '@/hooks/common/echarts';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '@/store/modules/auth';
import { clientAuth } from '@/service/ue/client';

const { t } = useI18n();
const authStore = useAuthStore();
defineOptions({
  name: 'HeaderBanner'
});

const appStore = useAppStore();

// 本地界面显示用的数据类型
interface GaugeDisplayData {
  id: number;
  title: string;
  value: number;
  max: number;
  unit: string;
  displayValue?: string;
  subTitle?: string;
  description?: string;
  speedLimits?: {
    upLimit: string;
    downLimit: string;
  };
}

// 添加速率单位转换函数
const formatSpeed = (speedBps: number): { value: number; unit: string } => {
  // 处理 0 值、undefined 或 null 的情况
  if (!speedBps || speedBps === 0) {
    return { value: 0, unit: 'B/s' };
  }

  if (speedBps < 1024) {
    return { value: Number(speedBps.toFixed(2)), unit: 'B/s' };
  } else if (speedBps < 1024 * 1024) {
    return { value: Number((speedBps / 1024).toFixed(2)), unit: 'KB/s' };
  } else if (speedBps < 1024 * 1024 * 1024) {
    return { value: Number((speedBps / (1024 * 1024)).toFixed(2)), unit: 'MB/s' };
  } else {
    return { value: Number((speedBps / (1024 * 1024 * 1024)).toFixed(2)), unit: 'GB/s' };
  }
};

// 添加流量单位转换函数
const formatTraffic = (bytes: number): { value: number; unit: string } => {
  // 处理 0 值、undefined 或 null 的情况
  if (!bytes || bytes === 0) {
    return { value: 0, unit: 'B' };
  }

  if (bytes < 1024) {
    return { value: Number(bytes.toFixed(2)), unit: 'B' };
  } else if (bytes < 1024 * 1024) {
    return { value: Number((bytes / 1024).toFixed(2)), unit: 'KB' };
  } else if (bytes < 1024 * 1024 * 1024) {
    return { value: Number((bytes / (1024 * 1024)).toFixed(2)), unit: 'MB' };
  } else {
    return { value: Number((bytes / (1024 * 1024 * 1024)).toFixed(2)), unit: 'GB' };
  }
};

// 添加格式化余额的函数
const formatBalance = (balance: number | string): string => {
  // 确保转换为数字类型
  const numBalance = Number(balance);
  // 检查是否是有效数字
  if (isNaN(numBalance)) {
    return '0.00';
  }
  return numBalance.toFixed(2);
};

// 修改基础数据，移除速率仪表盘
const baseData = ref<GaugeDisplayData[]>([
  {
    id: 0,
    title: t('page.headerbanner.Remainingcredit'),
    value: 0,
    max: 100,
    unit: t('page.headerbanner.money'),
    description: t('page.headerbanner.monthphonebill'),
    subTitle: t('page.headerbanner.deviceCount') + `: 0${t('page.headerbanner.device')}`,
    displayValue: '-'
  },
  {
    id: 1,
    title: t('page.headerbanner.Flowremaining'),
    value: 0,
    max: 1024,
    unit: 'B',
    //description: t('page.headerbanner.monthflowr'),
    //subTitle: t('page.headerbanner.Used') + ': 0B',
    description: '-',
    subTitle: '-',
    speedLimits: {
      // upLimit: t('page.headerbanner.nolimit'),
      // downLimit: t('page.headerbanner.nolimit')
      upLimit: '-',
      downLimit: '-'
    }
  }
]);

// 计算属性保持不变
const gaugeData = computed(() => baseData.value);

// 仪盘配置生成函数
const getGaugeOptions = (data: GaugeDisplayData): ECOption => ({
  backgroundColor: 'transparent',
  series: [{
    name: data.title,
    type: 'gauge',
    min: 0,
    max: data.max,
    startAngle: 200,
    endAngle: -20,
    radius: '85%',
    center: ['50%', '55%'],
    axisLine: {
      lineStyle: {
        width: 15,
        color: [
          [data.value / (data.max || 1), '#4284f5'],
          [1, '#0c47a7']
        ]
      }
    },
    pointer: {
      width: 3,
      length: '60%',
      itemStyle: {
        color: '#ffeb3b'
      }
    },
    axisTick: {
      show: true,
      distance: -23,
      length: 8,
      lineStyle: {
        color: '#fff',
        width: 1,
        opacity: 0.3
      }
    },
    splitLine: {
      show: true,
      distance: -22,
      length: 12,
      lineStyle: {
        color: '#fff',
        width: 2,
        opacity: 0.3
      }
    },
    axisLabel: {
      show: false
    },
    detail: {
      show: false
    },
    title: {
      show: false
    },
    data: [{
      value: data.value,
      name: data.title
    }]
  }]
});

// 创建三个仪表盘实例
const { domRef: gauge1Ref, updateOptions: updateGauge1 } = useEcharts(() => getGaugeOptions(gaugeData.value[0]), {
  onRender: () => {}
});
const { domRef: gauge2Ref, updateOptions: updateGauge2 } = useEcharts(() => getGaugeOptions(gaugeData.value[1]), {
  onRender: () => {}
});

// 更新单个图表的数据
const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?: number) => {
  const ratio = progressRatio !== undefined ? progressRatio : (data.value / (data.max || 1));

  // 创建完整的新配置
  const newOpts: ECOption = {
    backgroundColor: 'transparent',
    series: [{
      name: data.title,
      type: 'gauge',
      min: 0,
      max: data.max || 1,
      startAngle: 200,
      endAngle: -20,
      radius: '85%',
      center: ['50%', '55%'],
      axisLine: {
        lineStyle: {
          width: 15,
          color: [
            [ratio, '#4284f5'],
            [1, '#0c47a7']
          ]
        }
      },
      pointer: {
        width: 3,
        length: '60%',
        itemStyle: {
          color: '#ffeb3b'
        }
      },
      axisTick: {
        show: true,
        distance: -23,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 1,
          opacity: 0.3
        }
      },
      splitLine: {
        show: true,
        distance: -22,
        length: 12,
        lineStyle: {
          color: '#fff',
          width: 2,
          opacity: 0.3
        }
      },
      axisLabel: {
        show: false
      },
      detail: {
        show: false
      },
      title: {
        show: false
      },
      data: [{
        value: data.value,
        name: data.title
      }]
    }]
  };

  return newOpts;
};

// 修改速率格式化函数
const formatSpeedLimit = (speed: number | null): string => {
  if (speed === null || speed === undefined) {
    return '0Kbps';
  }
  if (speed === -1) {
    return t('page.headerbanner.nolimit');
  }
  if (speed >= 1048576) {
    return `${(speed / 1048576).toFixed(1)}Gbps`;
  } else if (speed >= 1024) {
    return `${(speed / 1024).toFixed(1)}Mbps`;
  }
  return `${speed}Kbps`;
};

// 添加速率限制的响应式引用
const speedLimits = ref({
  // upLimit: t('page.headerbanner.nolimit'),
  // downLimit: t('page.headerbanner.nolimit')
  upLimit: '-',
  downLimit: '-'
});

// 添加套餐信息的响应式引用
const packageInfo = ref({
  // packageName: '',
  // price: '0.00'
  packageName: t('page.headerbanner.noPackage'),
  price: '-'
});

// 修改数据更新函数，添加套餐信息的更新
async function mockDataUpdate() {
  try {
    const response = await authStore.getDashboardData();
    if (response && typeof response === 'object' && !response.error) {
      // 更新套餐信息
      packageInfo.value = {
        packageName: response.packageName || t('page.headerbanner.nopackage'),
        price: response.packageName ? formatBalance(response.price) : '-'  // 有套餐时才格式化价格
      };

      // 更新余额和设备数据
      const numBalance = Number(response.balance);
      baseData.value[0] = {
        ...baseData.value[0],
        value: numBalance,
        max: Math.max(numBalance, 100),
        displayValue:formatBalance(response.balance),
        unit: t('page.headerbanner.money'),
        subTitle: t('page.headerbanner.deviceCount') + `: ${
          response.packageName ? (
          !response.clientNumEnable
            ? t('page.headerbanner.nolimit')
            : (response.clientNum || 0) + t('page.headerbanner.device')
          ):'-'
        }`
      };

      // 更新流量数据
      if (!response.packageName) {
        // 无套餐时显示 -
        baseData.value[1] = {
          ...baseData.value[1],
          value: 0,
          max: 1024,
          displayValue: '-',
          description: '-',
          subTitle: '-',
          speedLimits: {
            upLimit: '-',
            downLimit: '-'
          }
        };
      } else {
        // 有套餐时的正常显示逻辑
      const totalTraffic = response.trafficEnable ? (response.traffic || 0) : 0;
      const usedTraffic = response.trafficEnable ? (response.trafficUsed || 0) : 0;
      const remainingTraffic = Math.max(0, totalTraffic - usedTraffic);

      // 格式化流量显示
      const formattedTotal = formatTraffic(totalTraffic);
      const formattedUsed = formatTraffic(usedTraffic);

      const formattedRemaining = formatTraffic(remainingTraffic);

      // 更新流量数据显示
      // baseData.value[1] = {
      //   ...baseData.value[1],
      //   value: remainingTraffic,
      //   max: totalTraffic,
      //   displayValue: !response.trafficEnable ? t('page.headerbanner.nolimit') : `${formattedRemaining.value}${formattedRemaining.unit}`,
      //   unit: '',
      //   description: !response.trafficEnable
      //     ? t('page.headerbanner.nolimit')
      //     : `${formattedTotal.value}${formattedTotal.unit}`,
      //   subTitle: !response.trafficEnable
      //     ? t('page.headerbanner.nolimit')
      //     :  formattedUsed.value+formattedUsed.unit,
      //   speedLimits: {
      //     upLimit: speedLimits.value.upLimit,
      //     downLimit: speedLimits.value.downLimit
      //   }
      // };
      // console.log(baseData.value[1].description)
        baseData.value[1] = {
          ...baseData.value[1],
          value: remainingTraffic,
          max: totalTraffic,
          displayValue: response.trafficEnable ? `${formattedRemaining.value}${formattedRemaining.unit}` : t('page.headerbanner.nolimit'),
          description: response.trafficEnable ? `${formattedTotal.value}${formattedTotal.unit}` : t('page.headerbanner.nolimit'),
          subTitle: response.trafficEnable ? formattedUsed.value+formattedUsed.unit : t('page.headerbanner.nolimit')
        };
      }

      // 更新速率限制显示
      if (!response.packageName) {
        speedLimits.value = {
          upLimit: '-',
          downLimit: '-'
        };
      } else if (response.rateLimitEnable) {
        speedLimits.value = {
          upLimit: !response.upLimitEnable
            ? t('page.headerbanner.nolimit')
            : formatSpeedLimit(response.upLimit),
          downLimit: !response.downLimitEnable
            ? t('page.headerbanner.nolimit')
            : formatSpeedLimit(response.downLimit)
        };
      } else {
        speedLimits.value = {
          upLimit: t('page.headerbanner.nolimit'),
          downLimit: t('page.headerbanner.nolimit')
        };
      }

      // 更新图表
      updateGauge1(opts => updateGaugeData(opts, baseData.value[0]));
      updateGauge2(opts => {
        const newOpts = updateGaugeData(
          opts,
          baseData.value[1],
          response.packageName && response.trafficEnable ? remainingTraffic / totalTraffic : 0
        );
        return {
          ...newOpts,
          animation: true,
          animationDuration: 1000,
          animationEasing: 'cubicInOut'
        };
      });
    }
  } catch (error) {
    // console.error('Failed to update data:', error);
  }
}

// 添加 timer 声明
let timer: ReturnType<typeof setInterval> | null = null;

// 初始化
async function init() {
  // 立即执行一次数据更新
  await mockDataUpdate();
  // 设置定期执行的定时器
  timer = setInterval(mockDataUpdate, 30000);
}

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});

// 监听语言变化
watch(
  () => appStore.locale,
  () => {
    //updateLocale();
  }
);

// 初始化
init();

// 导出更新数据的方法
const updateDashboard = async () => {
  await mockDataUpdate();
};

// 将方法暴露给父组件
defineExpose({
  updateDashboard
});

// 修改流量获取函数
const getTrafficTotal = (description?: string, trafficEnable?: boolean): string => {
  // 如果描述中包含"无限制"，说明是无限制套餐
  if (!description || description.includes(t('page.headerbanner.nolimit'))) {
    return t('page.headerbanner.nolimit');
  }
  const matches = description.match(/\((.*?)\)/);
  return matches ? matches[1] : '0B';
};

// 修改设备数量获取函数
const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string => {
  if (!subTitle) return t('page.headerbanner.nolimit');
  const parts = subTitle.split(': ');
  return parts.length > 1 ? parts[1] : '0';
};
</script>

<template>
  <ACard :bordered="false" class="card-wrapper">
    <div class="dashboard-layout">
      <!-- 左侧：仪表盘和流量信息 -->
      <div class="left-section">
        <div class="gauge-container">
          <div class="gauge-chart" ref="gauge2Ref"></div>
          <div class="gauge-info">
            <div class="gauge-title">{{ baseData[1].title }}</div>
            <div class="gauge-value">{{ baseData[1].displayValue }}</div>
          </div>
        </div>
      </div>

      <!-- 右侧：分组信息显示 -->
      <div class="right-section">
        <!-- 套餐信息 -->
        <div class="info-section">
          <div class="section-title">{{t('page.headerbanner.packageinfo')}}</div>
          <div class="info-group">
            <div class="info-item">
              <span class="info-label">{{ t('page.headerbanner.packagename') }}</span>
              <span class="info-value">{{ packageInfo.packageName || t('page.headerbanner.nopackage') }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">{{ t('page.headerbanner.price') }}</span>
              <span class="info-value">{{ packageInfo.price === '-' ? '-' : '¥' + packageInfo.price }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">{{ t('page.headerbanner.monthflowr') }}</span>
              <span class="info-value">{{ baseData[1].description }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">{{ t('page.headerbanner.Used') }}</span>
              <span class="info-value">{{ baseData[1].subTitle }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">{{ t('page.headerbanner.uplimit') }}</span>
              <span class="info-value">{{ speedLimits.upLimit }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">{{ t('page.headerbanner.downlimit') }}</span>
              <span class="info-value">{{ speedLimits.downLimit }}</span>
            </div>
          </div>
        </div>

        <!-- 账户信息 -->
        <div class="info-section">
          <div class="section-title">{{ t('page.headerbanner.accountinfor') }}</div>
          <div class="info-group">
            <div class="info-item">
              <span class="info-label">{{ t('page.headerbanner.Remainingcredit') }}</span>
              <span class="info-value">{{ baseData[0].displayValue === '-' ? '-' : '¥' + baseData[0].displayValue }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">{{ t('page.headerbanner.client') }}</span>
              <span class="info-value">{{ getDeviceCount(baseData[0].subTitle, baseData[0].speedLimits?.upLimit !== t('page.headerbanner.nolimit')) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ACard>
</template>

<style scoped>
.card-wrapper {
  margin-bottom: 16px;
  background: linear-gradient(180deg, #4284f5 0%, #0c47a7 100%);
  padding: 16px 12px 16px 8px;
  color: #fff;
}

.dashboard-layout {
  display: flex;
  gap: 4px;
}

/* 左侧部分样式 */
.left-section {
  flex: 0 0 auto;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.gauge-container {
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-left: -15px;
}

.gauge-chart {
  width: 160px;
  height: 160px;
}

.gauge-info {
  margin-top: -12px;
}

.gauge-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.gauge-value {
  font-size: 16px;
  font-weight: bold;
  margin-top: 2px;
}

/* 右侧部分样式 */
.right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding-right: 4px;
}

.info-section {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 8px;
  padding-left: 6px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background-color: #fff;
  margin-right: 8px;
  border-radius: 2px;
}

.info-group {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 6px 8px;
  width: 80%;
  margin: 0 auto;
}

.info-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  max-width: 300px;
  margin: 0 auto;
}

.info-item:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}

.info-value {
  font-size: 14px;
  font-weight: 500;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .card-wrapper {
    padding: 16px 8px 16px 6px;
  }

  .dashboard-layout {
    gap: 4px;
  }

  .right-section {
    gap: 4px;
    padding-right: 2px;
  }

  .section-title {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .info-section {
    margin-bottom: 8px;
  }

  .info-group {
    width: 90%;
  }

  .info-item {
    padding: 6px 0;
    max-width: 250px;
  }

  .info-label {
    font-size: 12px;
    margin-bottom: 3px;
  }

  .info-value {
    font-size: 14px;
  }

  .left-section {
    width: 120px;
    min-height: 180px;
  }

  .gauge-container {
    width: 120px;
    margin-left: -10px;
  }

  .gauge-chart {
    width: 120px;
    height: 120px;
  }

  .gauge-info {
    margin-top: -12px;
  }

  .gauge-value {
    font-size: 16px;
    margin-top: 2px;
  }
}

/* 超小屏幕优化 */
@media screen and (max-width: 375px) {
  .card-wrapper {
    padding: 10px 6px 10px 4px;
  }

  .dashboard-layout {
    gap: 4px;
  }

  .left-section {
    width: 100px;
    min-height: 160px;
  }

  .gauge-container {
    width: 100px;
    margin-left: -8px;
  }

  .gauge-chart {
    width: 100px;
    height: 100px;
  }

  .gauge-info {
    margin-top: -12px;
  }

  .gauge-value {
    font-size: 16px;
  }

  .section-title {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .info-group {
    width: 95%;
  }

  .info-item {
    padding: 4px 0;
    max-width: 200px;
  }

  .info-label {
    font-size: 11px;
    margin-bottom: 2px;
  }

  .info-value {
    font-size: 13px;
  }

  .right-section {
    padding-right: 1px;
  }

  .info-section {
    margin-bottom: 6px;
  }
}
</style>
