<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50 p-6">
    <div class="mx-auto max-w-7xl">
      <!-- 顶部搜索区域 -->
      <div class="mb-6 flex items-center justify-between bg-white p-4 shadow-sm">
        <div class="flex gap-4">
          <button
            v-for="(btn, index) in quickButtons"
            :key="index"
            :class="{
              'bg-blue-500 text-white': selectedQuickBtn === btn.value,
              'bg-gray-100 text-gray-600': selectedQuickBtn !== btn.value
            }"
            class="!rounded-button whitespace-nowrap px-4 py-2 transition-all hover:bg-blue-600 hover:text-white"
            @click="handleQuickSelect(btn.value)"
          >
            {{ btn.label }}
          </button>
        </div>
        <div class="flex items-center gap-4">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :size="'default'"
            @change="handleDateChange"
          />
          <button class="!rounded-button whitespace-nowrap bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
            <el-icon class="mr-1"><Search /></el-icon>
            查询
          </button>
        </div>
      </div>

      <!-- 通话接通量统计 -->
      <div class="mb-6 bg-white p-6 shadow-sm">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-xl font-bold">通话接通量统计</h2>
          <button class="!rounded-button whitespace-nowrap bg-green-500 px-4 py-2 text-white hover:bg-green-600">
            <el-icon class="mr-1"><Download /></el-icon>
            导出数据
          </button>
        </div>
        <div class="h-[400px]">
          <div ref="callVolumeChart" class="h-full w-full"></div>
        </div>
      </div>

      <!-- 日流量统计 -->
      <div class="mb-6 bg-white p-6 shadow-sm">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-xl font-bold">日流量统计</h2>
          <div class="text-sm text-gray-500">最近24小时数据</div>
        </div>
        <div class="h-[300px]">
          <div ref="dailyFlowChart" class="h-full w-full"></div>
        </div>
      </div>

      <!-- 月流量统计 -->
      <div class="bg-white p-6 shadow-sm">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-xl font-bold">月流量统计</h2>
          <div class="text-sm text-gray-500">{{ new Date().getFullYear() }}年度数据</div>
        </div>
        <div class="h-[300px]">
          <div ref="monthlyFlowChart" class="h-full w-full"></div>
        </div>
        <div class="mt-4 text-right text-sm text-gray-600">
          年度总流量：{{ totalYearlyFlow.toLocaleString() }} 次
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Search, Download } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';

const dateRange = ref([]);
const selectedQuickBtn = ref('30days');

const quickButtons = [
  { label: '今天', value: 'today' },
  { label: '昨天', value: 'yesterday' },
  { label: '近7天', value: '7days' },
  { label: '近30天', value: '30days' },
];

const callVolumeChart = ref<HTMLElement | null>(null);
const dailyFlowChart = ref<HTMLElement | null>(null);
const monthlyFlowChart = ref<HTMLElement | null>(null);

const totalYearlyFlow = ref(2456789);

const handleQuickSelect = (value: string) => {
  selectedQuickBtn.value = value;
  // 处理快速选择逻辑
};

const handleDateChange = () => {
  // 处理日期变化逻辑
};

onMounted(() => {
  // 通话接通量统计图表
  const callVolume = echarts.init(callVolumeChart.value!);
  const callVolumeOption: EChartsOption = {
    animation: false,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: Array.from({length: 30}, (_, i) => {
        const date = new Date();
        date.setDate(date.getDate() - (29 - i));
        return `${date.getMonth() + 1}/${date.getDate()}`;
      }),
      axisLabel: {
        interval: 2
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '接通量',
      type: 'bar',
      data: Array.from({length: 30}, () => Math.floor(Math.random() * 1000 + 500)),
      label: {
        show: true,
        position: 'top'
      },
      itemStyle: {
        color: '#60A5FA'
      }
    }]
  };
  callVolume.setOption(callVolumeOption);

  // 日流量统计图表
  const dailyFlow = echarts.init(dailyFlowChart.value!);
  const dailyFlowOption: EChartsOption = {
    animation: false,
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: Array.from({length: 24}, (_, i) => `${i}:00`)
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '流量',
      type: 'line',
      smooth: true,
      data: Array.from({length: 24}, () => Math.floor(Math.random() * 200 + 100)),
      itemStyle: {
        color: '#10B981'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(16, 185, 129, 0.2)'
          }, {
            offset: 1,
            color: 'rgba(16, 185, 129, 0)'
          }]
        }
      }
    }]
  };
  dailyFlow.setOption(dailyFlowOption);

  // 月流量统计图表
  const monthlyFlow = echarts.init(monthlyFlowChart.value!);
  const monthlyFlowOption: EChartsOption = {
    animation: false,
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '月流量',
      type: 'bar',
      data: Array.from({length: 12}, () => Math.floor(Math.random() * 20000 + 15000)),
      itemStyle: {
        color: '#8B5CF6'
      }
    }]
  };
  monthlyFlow.setOption(monthlyFlowOption);

  // 响应式处理
  window.addEventListener('resize', () => {
    callVolume.resize();
    dailyFlow.resize();
    monthlyFlow.resize();
  });
});
</script>

<style scoped>
.el-date-editor {
  --el-date-editor-width: 320px;
}
</style>

