<!-- 代码已包含 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="dailyFlowChart" class="h-full w-full"></div>
          </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 { getPageListData } from '@/api/main/system/system';
  import moment from 'moment';

  import type { EChartsOption } from 'echarts';
  
  const dateRange = ref([]);
  const selectedQuickBtn = ref('today');
  
  const quickButtons = [
    { label: '今天', value: 'today' },
    { label: '昨天', value: 'yesterday' },
    { label: '近7天', value: '7days' },
    { label: '近30天', value: '30days' },
  ];
  
  const dailyFlowChart: any = ref<HTMLElement | null>(null);
  
  const handleQuickSelect = (value: string) => {
    selectedQuickBtn.value = value;
    // 处理快速选择逻辑
    if (value === 'today') {
      startTime.value = moment().format('YYYY-MM-DD');
      endTime.value = moment().format('YYYY-MM-DD');
    } else if (value === 'yesterday') {
      startTime.value = moment().subtract(1, 'days').startOf('day').format('YYYY-MM-DD');
      endTime.value = moment().subtract(1, 'days').endOf('day').format('YYYY-MM-DD');
    } else if (value === '7days') {
      startTime.value = moment().subtract(7, 'days').startOf('day').format('YYYY-MM-DD');
      endTime.value = moment().endOf('day').format('YYYY-MM-DD');
    } else if (value === '30days') {
      startTime.value = moment().subtract(30, 'days').startOf('day').format('YYYY-MM-DD');
      endTime.value = moment().endOf('day').format('YYYY-MM-DD');
    }

    getDailyFlow();
  };
  
  const handleDateChange = (val) => {
    // 处理日期变化逻辑
    console.log(val);
    selectedQuickBtn.value = '';
    startTime.value = moment(val[0]).format('YYYY-MM-DD');
    endTime.value = moment(val[1]).format('YYYY-MM-DD');
    getDailyFlow();

  };
  const startTime = ref();
  const endTime = ref();
  
  onMounted(() => {
    selectedQuickBtn.value = 'today';
    startTime.value = moment().startOf('day').format('YYYY-MM-DD');
    endTime.value = moment().format('YYYY-MM-DD');
    getDailyFlow()  // 日流量统计图表
  
  });

  
  
  // 日流量统计图表
  function getDailyFlow(){
    const params = {
      startTime: startTime.value,
      endTime: endTime.value,
    };
    getPageListData('/WorkReport/selectConnection', params).then(res => {
        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: res.data?.map(item => item.date),
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '接通量',
                type: 'line',
                smooth: true,
                data: res.data?.map(item => item.number),
                itemStyle: {
                  color: '#10B981'
                },
                label: {
                  show: true,
                  position: 'top'
                },
                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);
        window.addEventListener('resize', () => {
            dailyFlow.resize();
        });
    });
  }

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