<script setup lang="ts">
import { ref, computed, watch, onMounted } from "vue";
import { consultationTrend } from "@/api";
import { ElMessage } from "element-plus";

// 初始值
const value = ref(21452);

// 格式化数字，每三位添加一个逗号
const formatNumber = (num: number): string => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

// 格式化后的数字字符串
const formattedValue = computed(() => formatNumber(value.value));

console.log(formattedValue, "SevenSegmentDisplay");

// 其他统计数据
const studentCount = ref(61263);
const consultCount = ref(21452);
const formattedStudentCount = computed(() => formatNumber(studentCount.value));
const formattedConsultCount = computed(() => formatNumber(consultCount.value));

// 筛选选项
const consultTypeOptions = [
  { value: "all", label: "全部类型" },
  { value: "academic", label: "学业咨询" },
  { value: "career", label: "就业咨询" },
  { value: "personal", label: "个人发展" },
  { value: "other", label: "其他咨询" },
];
const selectedConsultType = ref(consultTypeOptions[0].value);

const timeRangeOptions = [
  { value: "1week", label: "近一周" },
  { value: "1month", label: "近一月" },
  { value: "3months", label: "近三月" },
  { value: "halfyear", label: "近半年" },
  { value: "1year", label: "近一年" },
];
const selectedTimeRange = ref(timeRangeOptions[0].value);

// 设置默认日期范围为最近一周
const getDefaultDateRange = () => {
  const end = new Date();
  const start = new Date();
  start.setDate(start.getDate() - 7); // 一周前
  return [start, end];
};
const dateRange = ref<[Date, Date]>(getDefaultDateRange() as [Date, Date]);

// 咨询人数趋势图
const option = ref({});
const getData = () => {
  // 可以添加筛选参数
  const params = {
    consultType: selectedConsultType.value,
    timeRange: selectedTimeRange.value,
    dateRange: dateRange.value,
  };

  consultationTrend().then((res) => {
    if (res.success) {
      setOptions(res.data);
    } else {
      ElMessage({
        message: res.msg,
        type: "warning",
      });
    }
  });
};

// 监听筛选条件变化
const handleFilterChange = () => {
  getData();
};

// 监听筛选条件变化
watch(selectedConsultType, handleFilterChange);
watch(selectedTimeRange, handleFilterChange);
watch(dateRange, handleFilterChange);

const setOptions = async (newData: any) => {
  option.value = {
    grid: {
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    backgroundColor: "#ffffff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: "#4B96FF",
          width: 1,
        },
      },
      backgroundColor: "rgba(255, 255, 255, 0.9)",
      borderColor: "#F1F1F1",
      borderWidth: 1,
      padding: [8, 10],
      textStyle: {
        color: "#666",
      },
      formatter: function (params: any) {
        const data = params[0];
        return `${data.name}<br/><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#4B96FF;margin-right:5px;"></span>${data.value}`;
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: newData.dateList,
      axisLine: {
        lineStyle: {
          color: "#E0E0E0",
        },
      },
      axisLabel: {
        color: "#999999",
        formatter: function (value: string) {
          return value.replace("2023-", "");
        },
      },
    },
    yAxis: {
      type: "value",
      max: 900,
      min: 0,
      interval: 300,
      splitNumber: 3,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "#E0E0E0",
        },
      },
      axisLabel: {
        color: "#999999",
        formatter: "{value}",
      },
    },
    series: [
      {
        type: "line",
        data: newData.valueList,
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        showSymbol: function (idx: number) {
          // 只在特定位置显示圆点，例如第三个点
          return idx === 2;
        },
        itemStyle: {
          color: "#fff",
          borderColor: "#4B96FF",
          borderWidth: 2,
        },
        lineStyle: {
          color: "#4B96FF",
          width: 3,
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(75, 150, 255, 0.3)",
              },
              {
                offset: 1,
                color: "rgba(75, 150, 255, 0.1)",
              },
            ],
          },
        },
      },
    ],
  };
};

// 组件挂载时获取数据
onMounted(() => {
  getData();
});
</script>

<template>
  <div class="contetn_header">
    <!-- 今日咨询人数 -->
    <div class="header-item today-count">
      <div class="item-title">今日咨询人数</div>

      <div class="seven-segment-display">{{ formattedValue }}</div>

      <div class="count-details">
        <div class="detail-item">
          <div class="icon-wrap student-icon">
            <img src="@/assets/img/zheke/zixun1.png" alt="学生人数" />
          </div>
          <div class="detail-content">
            <div class="detail-number">{{ formattedStudentCount }}</div>
            <div class="detail-label">学生用户总人数</div>
          </div>
        </div>
        <div class="detail-item">
          <div class="icon-wrap visitor-icon">
            <img src="@/assets/img/zheke/zixun2.png" alt="咨询人数" />
          </div>
          <div class="detail-content">
            <div class="detail-number">{{ formattedConsultCount }}</div>
            <div class="detail-label">咨询人数</div>
          </div>
        </div>
      </div>
    </div>

    <!-- AI咨询数据统计 -->
    <div class="header-item ai-stats">
      <div class="item-title">AI咨询数据统计</div>
      <div class="stats-cards">
        <div class="stat-card blue-card">
          <div class="card-icon">
            <img src="@/assets/img/zheke/ai-stats1.png" alt="咨询次数" />
          </div>
          <div class="card-label">咨询次数</div>
          <div class="card-value">12,452<span class="unit">次</span></div>
        </div>
        <div class="stat-card orange-card">
          <div class="card-icon">
            <img src="@/assets/img/zheke/ai-stats2.png" alt=" 平均对话次数" />
          </div>
          <div class="card-content">
            <div class="card-label">平均对话次数</div>
            <div class="card-value">12,452<span class="unit">次</span></div>
          </div>
        </div>
        <div class="stat-card green-card">
          <div class="card-icon">
            <img src="@/assets/img/zheke/ai-stats3.png" alt="智能回复率" />
          </div>
          <div class="card-content">
            <div class="card-label">智能回复率</div>
            <div class="card-value">23.11<span class="unit">%</span></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 咨询人数趋势图 -->
    <div class="header-item trend-chart">
      <div class="chart-header">
        <div class="item-title">咨询人数趋势图</div>
        <div class="chart-filters">
          <div class="filter-item">
            <el-select
              v-model="selectedConsultType"
              placeholder="咨询类型"
              size="small"
            >
              <el-option
                v-for="item in consultTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="filter-item">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
            />
          </div>
          <div class="filter-item">
            <el-select
              v-model="selectedTimeRange"
              placeholder="时间范围"
              size="small"
            >
              <el-option
                v-for="item in timeRangeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </div>
      <div class="chart-container">
        <v-chart
          class="chart"
          :option="option"
          v-if="JSON.stringify(option) != '{}'"
        ></v-chart>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.contetn_header {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 240px;
  width: 100%;
  background-color: #fff;
  border-radius: 20px;
  .header-item {
    height: 100%;
    padding: 20px 0 0 38px;
    .item-title {
      font-family: DouyinSans;
      font-weight: bold;
      font-size: 20px;
      color: #393d44;
    }
  }

  // 今日咨询人数
  .today-count {
    width: 25%;
   
    box-sizing: border-box;
    .seven-segment-display {
      font-size: 100px;
      font-family: DS-Digital;
      font-weight: bold;
      color: #4d50dd;
      height: 74px;
      line-height: 74px;
      margin-top: 22px;
      letter-spacing: 10px;
    }

    .count-details {
      display: flex;
      margin-top: 22px;
      .detail-item {
        flex: 1;
        display: flex;
        align-items: center;

        .icon-wrap {
          width: 50px;
          height: 50px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 14px;
          box-shadow: 0px 2px 6px 0px rgba(11, 13, 95, 0.24);
          border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .detail-content {
          .detail-number {
            font-weight: bold;
            font-size: 24px;
            color: #333333;
          }

          .detail-label {
            font-weight: 400;
            font-size: 14px;
            color: #333333;
          }
        }
      }
    }
  }

  // AI咨询数据统计
  .ai-stats {
    width: 29%;
    .stats-cards {
      margin-top: 24px;
      display: flex;
      gap: 20px;

      .stat-card {
        flex: 1;
        height: 100%;
        border-radius: 20px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        color: #fff;

        &.blue-card {
          background-image: url("@/assets/img/zheke/蓝色.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
        }

        &.orange-card {
          background-image: url("@/assets/img/zheke/橙色.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
        }

        &.green-card {
          background-image: url("@/assets/img/zheke/绿色.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
        }

        .card-icon {
          width: 40px;
          height: 40px;
          margin-bottom: 14px;
        }

        .card-label {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: auto;
        }

        .card-value {
          font-size: 30px;
          font-weight: bold;

          .unit {
            font-size: 14px;
            margin-left: 2px;
          }
        }
      }
    }
  }

  // 咨询人数趋势图
  .trend-chart {
    flex: 1;
    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .chart-filters {
        display: flex;
        gap: 15px;

        .filter-item {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #666;
          min-width: 120px;

          :deep(.el-input__wrapper) {
            background-color: #f5f7fa;
            box-shadow: none;
          }

          :deep(.el-select .el-input) {
            width: 120px;
          }

          :deep(.el-date-editor--daterange) {
            width: 240px;
          }
        }
      }
    }

    .chart-container {
      height: calc(100% - 30px);
      background-color: #ffffff;
      border-radius: 4px;
    }
  }
}
</style>

