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

<template>
  <div class="min-h-screen-nav-height bg-gray-50">

    <!-- 主体内容 -->
    <main class="pt-7 pb-8">
      <div class="mx-auto px-4">
        <!-- 数据概览 -->
        <div class="grid grid-cols-4 gap-4 mb-6">
          <div v-for="(card, index) in dataCards" :key="index" 
               class="bg-white rounded-lg p-6 flex justify-between items-center">
            <div>
              <h3 class="text-gray-500 mb-2">{{ card.title }}</h3>
              <p class="text-2xl font-semibold">{{ card.value }}</p>
              <div :class="['mt-2 text-sm', card.trend > 0 ? 'text-green-500' : 'text-red-500']">
                {{ card.trend > 0 ? '+' : '' }}{{ card.trend }}% 较昨日
              </div>
            </div>
            <div ref="chartRefs" :id="`mini-chart-${index}`" class="w-24 h-16"></div>
          </div>
        </div>

        <!-- 工单分析 -->
        <div class="grid grid-cols-5 gap-4 mb-6">
          <div class="col-span-3 bg-white rounded-lg p-6">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-lg font-medium">工单类型分布</h3>
              <!-- <el-select v-model="timeRange" class="w-12" style="width: 100px;">
                <el-option label="本周" value="week" />
                <el-option label="本月" value="month" />
                <el-option label="本季度" value="quarter" />
              </el-select> -->
            </div>
            <div ref="typeChartRef" class="h-[300px]"></div>
          </div>
          <div class="col-span-2 bg-white rounded-lg p-6">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-lg font-medium">工单处理趋势</h3>
              <el-radio-group v-model="day" size="small" @change="deal">
                <el-radio-button label="7天" value="7" />
                <el-radio-button label="30天" value="30" />
              </el-radio-group>
            </div>
            <div ref="trendChartRef" class="h-[300px]"></div>
          </div>
        </div>

        <!-- 通话数据 -->
        <div class="grid grid-cols-3 gap-4">
          <div class="col-span-2 bg-white rounded-lg p-6">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-lg font-medium">话务量统计</h3>
              <!-- <div class="flex items-center space-x-4">
                <el-date-picker v-model="dateRange" type="daterange" range-separator="至" 
                               start-placeholder="开始日期" end-placeholder="结束日期" />
                <el-button type="primary" class="!rounded-button">查询数据</el-button>
              </div> -->
            </div>
            <div ref="callVolumeChartRef" class="h-[400px]"></div>
          </div>
          <div class="bg-white rounded-lg p-6">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-lg font-medium">满意度分布</h3>
              <el-icon class="text-gray-400 cursor-pointer"><Refresh /></el-icon>
            </div>
            <div ref="satisfactionChartRef" class="h-[400px]"></div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { Bell, Refresh } from '@element-plus/icons-vue';
import { createPageData,getPageListData } from '@/api/main/system/system';

// const logoUrl = 'https://ai-public.mastergo.com/ai/img_res/fb39976b14b65c29953136e4a3edb69a.jpg';
// const avatarUrl = 'https://ai-public.mastergo.com/ai/img_res/e0432311328225fb48b1833cd5c61983.jpg';

const timeRange = ref('month');
const dateRange = ref([]);

const dataCards = ref([
  { title: '今日呼叫量', value: '2,847', trend: 12.5 },
  { title: '已接通电话数', value: '2,365', trend: 8.3 },
  { title: '平均等待时间', value: '42秒', trend: -5.2 },
  { title: '平均通话时长', value: '4.5分钟', trend: 3.7 }
]);

const chartRefs = ref([]);
const typeChartRef = ref();
const trendChartRef = ref();
const callVolumeChartRef = ref();
const satisfactionChartRef = ref();

onMounted(() => {
  callStatics();
  orderType();
  selectTrafficMeasurement();
  deal();
  satisfaction();
  // 迷你趋势图
  dataCards.value.forEach((_, index) => {
    const chart = echarts.init(chartRefs.value[index]);
    chart.setOption({
      animation: false,
      grid: { top: 0, right: 0, bottom: 0, left: 0 },
      xAxis: { show: false, type: 'category', data: new Array(7).fill(0) },
      yAxis: { show: false },
      series: [{
        type: 'line',
        data: Array.from({ length: 7 }, () => Math.random() * 100),
        smooth: true,
        symbol: 'none',
        lineStyle: { color: '#1890ff' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(24,144,255,0.3)' },
              { offset: 1, color: 'rgba(24,144,255,0)' }
            ]
          }
        }
      }]
    });
  });

  

  

  

  
});

// 话务量统计
const callStatics = () => {
  getPageListData('/WorkReport/selectTraffic').then(res => {
    console.log(res);
    const time: any = [];
    const incomings: any = [];
    const answer: any = [];
    const noAnswer: any = [];
    res.data.forEach(item => {
      time.push(item.date + ':00');
      incomings.push(item.incoming);
      noAnswer.push(item.noAnswer);
      answer.push(item.answer);
    });
    // 话务量统计图
  const callVolumeChart = echarts.init(callVolumeChartRef.value);
  callVolumeChart.setOption({
    animation: false,
    tooltip: { trigger: 'axis' },
    legend: { data: ['呼入量', '接通量', '未接量'] },
    xAxis: {
      type: 'category',
      data: time
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '呼入量',
        type: 'line',
        data: incomings,
      },
      {
        name: '接通量',
        type: 'line',
        data: answer
      },
      {
        name: '未接量',
        type: 'line',
        data: noAnswer
      }
    ]
  });
  })
}

const orderType = () => {
  getPageListData('/WorkReport/selectBusinessType').then(res => {
    // console.log(res);
    // 工单类型分布图
    const data = res.data.map(item => ({
      name: item.name,
      value: item.number
    }))
  const typeChart = echarts.init(typeChartRef.value);
  typeChart.setOption({
    animation: false,
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', right: 10, top: 'center' },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['40%', '50%'],
      data: data,
    }]
  });
  });
}

const day = ref('7');

const selectTrafficMeasurement = () => {
  getPageListData('/WorkReport/selectTrafficMeasurement').then(res => {
    console.log(res, 'selectTrafficMeasurement');
    dataCards.value[0].value = res.data.incoming || 0;
    dataCards.value[0].trend = +res.data.incomingRate?.replace('%', '') || 0;
    dataCards.value[1].value = res.data.answer || 0;
    dataCards.value[1].trend = +res.data.answerRate?.replace('%', '') || 0;
    dataCards.value[2].value = res.data.avgWait || 0;
    dataCards.value[2].trend = +res.data.avgWaitRate.replace('%', '') || 0;
    dataCards.value[3].value = res.data.avgAnswer || 0;
    dataCards.value[3].trend = +res.data.avgAnswerRate.replace('%', '') || 0;
  })
}

const deal = () => {
  console.log(day.value, 'deal');
  getPageListData(`/WorkReport/selectDealingWithTrends/${day.value}`).then(res => {
    console.log(res, 'selectDeal');
    const time: any = [];
    const numbers: any = [];
    res.data.forEach((item: any) => {
      time.push(item.date);
      numbers.push(item.number);
    });

    // 工单处理趋势图
  const trendChart = echarts.init(trendChartRef.value);
  trendChart.setOption({
    animation: false,
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: time
    },
    yAxis: { type: 'value' },
    series: [{
      data:numbers,
      type: 'line',
      smooth: true
    }]
  });
  })
}

const satisfaction = () => {
  getPageListData(`/WorkReport/selectSatisfaction`).then(res => {
    console.log(res, 'satisfaction');
    // 满意度分布图
  const satisfactionChart = echarts.init(satisfactionChartRef.value);
  satisfactionChart.setOption({
    animation: false,
    tooltip: { trigger: 'item' },
    legend: { bottom: '5%', left: 'center' },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '45%'],
      data: [
        { value: res.data.satisfied, name: '非常满意' },
        { value: res.data.basically, name: '基本满意' },
        { value: res.data.dissatisfied, name: '不满意' }
      ]
    }]
  });
  })
}
</script>

<style scoped>
:deep(.el-input__wrapper) {
  background-color: white !important;
}
</style>

