<template>
  <div class="eventStat">
    <div class="eventStat-header">
      <el-card>
        <template #header>
          <span>事件占比TOP10（%）</span>
        </template>
        <BaseChart width="100%" height="250px" :option="pieOptions" />
      </el-card>
      <el-card>
        <template #header>
          <span>近30日事件统计</span>
        </template>
        <BaseChart width="100%" height="250px" :option="barOptions" />
      </el-card>
    </div>
    <el-card style="margin-top: 10px;">
      <template #header>
        <span>每日事件统计</span>
      </template>
      <BaseChart width="100%" height="250px" style="z-index: 10;" :option="lineOptions" />
    </el-card>
  </div>
</template>
<script setup lang="ts">
import BaseChart from '@/components/BaseChart/index.vue'
import { eventPercentTop10, eventMonthCount, eventDayCount } from '@/api/sense/events/index'
const pieData = ref([])
const barData = ref([])
const lineData = ref([])
const pieOptions = computed(() => {
  let options = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      top: '8%',
      right: 0,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10
    },
    grid: {
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: pieData.value,
        center: ['40%', '50%'],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  return options
})
const barOptions = computed(() => {
  const colors = [
    "#3e9a7f",
    "#bfa84d",
    "#412a8f",
    "#a24f7c",
    "#587e85",
    "#603502",
    "#d1c886",
    "#9c5a09",
    "#5996b5",
    "#b63b7d",
    "#08a54b",
    "#a88d24",
    "#f69868",
    "#372a18",
    "#0c767e",
    "#504b0b",
    "#b85557",
    "#6b701d",
    "#9e2c4f",
    "#4b4f7a"
  ]
  const barObj = {}
  barData.value.forEach(item => {
    barObj[item.name] = item.value
  })

  let options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '5%',
      right: '3%',
      bottom: 0,
      top: '6%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: Object.keys(barObj),
      axisLabel: {
        interval: 0,
        rotate: 45  // 表示倾斜的角度
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: Object.values(barObj),
        type: 'bar',
        barWidth: 20,
        itemStyle: {
          color: (params) => {
            return colors[params.dataIndex]
          },
        },
        label: {
          show: true, // 显示数值
          position: 'top' // 在顶部显示
        }

      }
    ]
  };
  return options
})
const lineOptions = computed(() => {
  const dates = [];
  const eventNames = {};
  lineData.value.forEach((item) => {
    dates.push(item.date);
    if (!eventNames[item.name]) {
      eventNames[item.name] = [];
    }
    eventNames[item.name].push(item.value);
  });
  const options = {
    tooltip: {
      trigger: 'axis',
      appendToBody: true
    },
    legend: {
      data: Object.keys(eventNames)
    },
    grid: {
      left: '1%',
      right: '3%',
      bottom: 0,
      top: '22%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        show: true,
      },
      data: [...new Set(dates)]
    },
    yAxis: {
      type: 'value'
    },
    series: Object.keys(eventNames).map(function (eventName) {
      return {
        name: eventName,
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        data: eventNames[eventName]
      };
    })
  };
  return options
})
onMounted(() => {
  eventPercentTop10().then(({ code, data }) => {
    if (code === 200) {
      pieData.value = data || []
    }
  })
  eventMonthCount().then(({ code, data }) => {
    if (code === 200) {
      barData.value = data || []
    }
  })
  eventDayCount().then(({ code, data }) => {
    if (code === 200) {
      lineData.value = data || {}
    }
  })
})


</script>
<style lang="scss" scoped>
.eventStat {
  padding: 10px;
  height: 100%;
  background-color: #F0F2F5;
  position: relative;
}

.eventStat-header {
  display: flex;

  .el-card {
    flex: 1;

    &:not(:first-child) {
      margin-left: 10px;
    }
  }
}
</style>
