<template>
  <div class="min-h-screen bg-gray-50 p-4">
    <div class="mx-auto max-w-8xl">
      <!-- 查询区域 -->
      <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
        <div class="flex items-center gap-4">
          <div class="flex items-center gap-2">
            <span class="text-gray-600">时间范围</span>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="dateShortcuts"
              value-format="YYYY-MM-DD"
              class="!w-[400px]"
            />
          </div>
          <el-button
            type="primary"
            :loading="loading"
            class="!rounded-button whitespace-nowrap"
            @click="handleSearch"
          >
            <el-icon class="mr-1"><search /></el-icon>查询
          </el-button>
          <el-button
            class="!rounded-button whitespace-nowrap"
            @click="handleReset"
          >
            <el-icon class="mr-1"><Refresh /></el-icon>重置
          </el-button>
          <el-button
            class="!rounded-button whitespace-nowrap"
            @click="handleDownload"
          >
            <el-icon class="mr-1"><Download /></el-icon>导出
          </el-button>
        </div>
      </div>
      <!-- 数据展示区域 -->
      <div class="grid grid-cols-1 gap-4">
        <!-- 基础话务数据 -->
        <div class="bg-white rounded-lg shadow-sm p-4">
          <h3
            class="text-lg font-semibold mb-4 text-gray-900 border-l-4 border-blue-500 pl-3"
          >
            话务数据
          </h3>
          <div class="flex">
            <dl class="grid grid-cols-4 gap-4 flex-1">
              <div class="stat-item">
                <dt class="text-gray-600">话务总量</dt>
                <dd class="text-xl font-semibold text-gray-900">
                  {{ stats.totalCalls }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">平均话务量</dt>
                <dd class="text-2xl font-semibold text-gray-900">
                  {{ stats.averageCalls }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">平均接通率</dt>
                <dd class="text-2xl font-semibold text-blue-600">
                  {{ stats.averageConnectedRate }}
                </dd>
              </div>
            </dl>
            <div ref="basicChart" class="w-[350px] h-[160px]"></div>
          </div>
        </div>
        <!-- 呼入数据 -->
        <div class="bg-white rounded-lg shadow-sm p-4">
          <h3
            class="text-lg font-semibold mb-4 text-gray-900 border-l-4 border-blue-500 pl-3"
          >
            呼入数据
          </h3>
          <div class="flex">
            <dl class="grid grid-cols-4 gap-4 flex-1">
              <div class="stat-item">
                <dt class="text-gray-600">呼入总量</dt>
                <dd class="text-2xl font-semibold text-gray-900">
                  {{ stats.inboundTotal }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">呼入接通量</dt>
                <dd class="text-2xl font-semibold text-green-600">
                  {{ stats.inboundConnected }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">呼入未接通量</dt>
                <dd class="text-2xl font-semibold text-red-600">
                  {{ stats.inboundNotConnected }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">呼入接通率</dt>
                <dd class="text-2xl font-semibold text-green-600">
                  {{ stats.inboundConnectedRate }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">呼入未接通率</dt>
                <dd class="text-2xl font-semibold text-red-600">
                  {{ stats.inboundNotConnectedRate }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">呼入总时长</dt>
                <dd class="text-2xl font-semibold text-gray-900">
                  {{ stats.callDurations }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">呼入平均时长</dt>
                <dd class="text-2xl font-semibold text-gray-900">
                  {{ stats.averageCallDuration }}
                </dd>
              </div>
            </dl>
            <div ref="inboundChart" class="w-[350px] h-[160px]"></div>
          </div>
        </div>
        <!-- 呼出数据 -->
        <div class="bg-white rounded-lg shadow-sm p-4">
          <h3
            class="text-lg font-semibold mb-4 text-gray-900 border-l-4 border-blue-500 pl-3"
          >
            呼出数据
          </h3>
          <div class="flex">
            <dl class="grid grid-cols-4 gap-4 flex-1">
              <div class="stat-item">
                <dt class="text-gray-600">呼出总量</dt>
                <dd class="text-2xl font-semibold text-gray-900">
                  {{ stats.outboundTotal }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">呼出接通量</dt>
                <dd class="text-2xl font-semibold text-green-600">
                  {{ stats.outboundConnected }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">呼出未接通量</dt>
                <dd class="text-2xl font-semibold text-red-600">
                  {{ stats.outboundNotConnected }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">呼出接通率</dt>
                <dd class="text-2xl font-semibold text-green-600">
                  {{ stats.outboundConnectedRate }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">呼出未接通率</dt>
                <dd class="text-2xl font-semibold text-red-600">
                  {{ stats.outboundNotConnectedRate }}
                </dd>
              </div>
              <!-- <div class="stat-item">
                <dt class="text-gray-600">呼出总时长</dt>
                <dd class="text-2xl font-semibold text-gray-900">1,890小时</dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">呼出平均时长</dt>
                <dd class="text-2xl font-semibold text-gray-900">12分钟</dd>
              </div> -->
            </dl>
            <div ref="outboundChart" class="w-[350px] h-[160px]"></div>
          </div>
        </div>
        <!-- 满意度数据 -->
        <div class="bg-white rounded-lg shadow-sm p-4">
          <h3
            class="text-lg font-semibold mb-4 text-gray-900 border-l-4 border-blue-500 pl-3"
          >
            满意度评价
          </h3>
          <div class="flex">
            <dl class="grid grid-cols-4 gap-4 flex-1">
              <div class="stat-item">
                <dt class="text-gray-600">评价总量</dt>
                <dd class="text-2xl font-semibold text-gray-900">
                  {{ stats.mydTotal }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">
                  满意量
                </dt>
                <dd class="text-2xl font-semibold text-green-600">
                  {{ stats.satisfied }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">
                  基本满意量
                </dt>
                <dd class="text-2xl font-semibold text-blue-600">
                  {{ stats.basically }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">
                  不满意量
                </dt>
                <dd class="text-2xl font-semibold text-red-600">
                  {{ stats.dissatisfied }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">评价占比</dt>
                <dd class="text-2xl font-semibold text-gray-900">
                  {{ stats.mydRate }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">
                  满意率
                </dt>
                <dd class="text-2xl font-semibold text-green-600">
                  {{ stats.satisfiedRate }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">
                  基本满意率
                </dt>
                <dd class="text-2xl font-semibold text-blue-600">
                  {{ stats.basicallyRate }}
                </dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">
                  不满意率
                </dt>
                <dd class="text-2xl font-semibold text-red-600">
                  {{ stats.dissatisfiedRate }}
                </dd>
              </div>
              <!-- <div class="stat-item">
                <dt class="text-gray-600">评价参与率</dt>
                <dd class="text-2xl font-semibold text-gray-900">85.6%</dd>
              </div>
              <div class="stat-item">
                <dt class="text-gray-600">平均评分</dt>
                <dd class="text-2xl font-semibold text-blue-600">4.5分</dd>
              </div> -->
            </dl>
            <div ref="satisfactionChart" class="w-[350px] h-[160px]"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Search, Refresh, Download } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import moment from "moment";
import { getPageListData } from '@/api/main/system/system';
const loading = ref(false);
const dateRange = ref<[string, string]>(['', '']);
const dateShortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "最近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
const stats = ref({
  mydRate: '',
  averageConnectedRate: "0.00%",
  "totalCalls": 0,
  "averageCalls": 0,
  "inboundTotal": 0,
  "inboundConnected": 0,
  "inboundNotConnected": 0,
  "inboundConnectedRate": "0.00%",
  "inboundNotConnectedRate": "0.00%",
  "outboundTotal": 0,
  "outboundConnected": 0,
  "outboundNotConnected": 0,
  "outboundConnectedRate": "0.00%",
  "outboundNotConnectedRate": "0.00%",
  "callDuration": 0,
  "callDurations": "0分钟",
  "averageCallDuration": "0分钟",
  "mydTotal": 0,
  "basically": 0,
  "satisfied": 0,
  "dissatisfied": 0,
  "basicallyRate": "0.00%",
  "satisfiedRate": "0.00%",
  "dissatisfiedRate": "0.00%"
});
const handleSearch = () => {
  loading.value = true;
  getBulletingData();
};
const handleReset = () => {
  const startTime = moment().subtract(7, "days").format("YYYY-MM-DD");
  const endTime = moment().format("YYYY-MM-DD");
  dateRange.value = [startTime, endTime];
  getBulletingData();
};
const basicChart: any = ref<HTMLElement | null>(null);
const inboundChart: any = ref<HTMLElement | null>(null);
const outboundChart: any = ref<HTMLElement | null>(null);
const satisfactionChart: any = ref<HTMLElement | null>(null);
const { proxy } = getCurrentInstance()

const handleDownload = () => {
  proxy.download(
        '/WorkReport/exportExcelTelephoneBriefing',
        {
    startTime: dateRange.value[0],
    endTime: dateRange.value[1],
  },
        `话务简报.xlsx`
      )
}

const getBulletingData = () => {
  loading.value = true;
  
  let params = {
   
  };
  if (dateRange.value && dateRange.value.length === 2) {
    params = {
      startTime: dateRange.value[0],
      endTime: dateRange.value[1],
    }
  }
  getPageListData('/WorkReport/selectTelephoneBriefing', params).then(res => {
    console.log(res);
    loading.value = false;
    const data = res.data || {};
    const averageConnectedRate = data.totalCalls === 0 ? '0.00%' : `${((data.inboundConnected + data.outboundConnected) / data.totalCalls * 100).toFixed(2)}%`;
    const mydRate = data.mydTotal === 0 ? '0.00%' : `${((data.satisfied || 0 + data.basically || 0) / data.mydTotal * 100).toFixed(2)}%`;
    stats.value = { 
      mydRate,
      averageConnectedRate,
      ...data,
    }
    initCharts();
  }).catch(err => {
    loading.value = false;
  })
}

const initCharts = () => {
  // 基础话务数据图表
  const basicChartInstance = echarts.init(basicChart.value!);
  basicChartInstance.setOption({
    animation: false,
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: 30,
      top: "center",
    },
    series: [
      {
        name: "话务分布",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        data: [
          { value: stats.value.inboundTotal || 0, name: "呼入" },
          { value: stats.value.outboundTotal || 0, name: "呼出" },
        ],
      },
    ],
  });
  // 呼入数据图表
  const inboundChartInstance = echarts.init(inboundChart.value!);
  inboundChartInstance.setOption({
    animation: false,
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: 30,
      top: "center",
    },
    series: [
      {
        name: "呼入情况",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        data: [
          { value: stats.value.inboundConnected || 0, name: "接通", itemStyle: { color: "#10B981" } },
          { value: stats.value.inboundNotConnected || 0, name: "未接通", itemStyle: { color: "#EF4444" } },
        ],
      },
    ],
  });
  // 呼出数据图表
  const outboundChartInstance = echarts.init(outboundChart.value!);
  outboundChartInstance.setOption({
    animation: false,
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: 30,
      top: "center",
    },
    series: [
      {
        name: "呼出情况",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        data: [
          { value: stats.value.outboundConnected || 0, name: "接通", itemStyle: { color: "#10B981" } },
          { value: stats.value.outboundNotConnected || 0, name: "未接通", itemStyle: { color: "#EF4444" } },
        ],
      },
    ],
  });
  // 满意度数据图表
  const satisfactionChartInstance = echarts.init(satisfactionChart.value!);
  satisfactionChartInstance.setOption({
    animation: false,
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: 30,
      top: "center",
    },
    series: [
      {
        name: "满意度评价",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        data: [
          { value: stats.value.satisfied || 0, name: "满意", itemStyle: { color: "#10B981" } },
          { value: stats.value.basically || 0, name: "基本满意", itemStyle: { color: "#3B82F6" } },
          { value: stats.value.dissatisfied || 0, name: "不满意", itemStyle: { color: "#EF4444" } },
        ],
      },
    ],
  });
};
onMounted(() => {
  handleReset();
  // getBulletingData();
  // initCharts();
});
</script>

<style scoped>
.stat-item {
  @apply p-3 rounded-lg bg-gray-50;
}
.stat-item dt {
  @apply mb-2;
}
</style>
