<template>
  <div class="eventStat">
    <div class="eventStat-header">
      <el-card>
        <template #header>
          <div class="event-category">
            <span>交通违法数据来源分析</span>
            <el-radio-group v-model="eventDateType" @change="getPieData" size="small">
              <el-radio-button label="今天" value="1" />
              <el-radio-button label="近7天" value="7" />
              <el-radio-button label="近30天" value="30" />
            </el-radio-group>
          </div>
        </template>
        <BaseChart width="100%" height="250px" :option="pieOptions" />
      </el-card>
      <el-card>
        <template #header>
          <div class="event-category">
            <span>交通违法分布式时间</span>
            <el-radio-group v-model="regionDateType" @change="getLineData" size="small">
              <el-radio-button label="今天" value="1" />
              <el-radio-button label="近7天" value="7" />
              <el-radio-button label="近30天" value="30" />
            </el-radio-group>
          </div>
        </template>
        <BaseChart width="100%" height="250px" :option="lineOptions" />
      </el-card>

    </div>
    <el-card style="margin-top: 10px;">
      <template #header>
        <div class="event-category">
          <span>交通违法处置分析</span>
          <el-radio-group v-model="dealDateType" @change="getDealData" size="small">
            <el-radio-button label="今天" value="1" />
            <el-radio-button label="近7天" value="7" />
            <el-radio-button label="近30天" value="30" />
          </el-radio-group>
        </div>
      </template>
      <BaseChart width="100%" height="250px" :option="dealOptions" />
    </el-card>

  </div>
</template>
<script setup lang="ts">
import BaseChart from '@/components/BaseChart/index.vue'
import { eventsDatasourceStat, eventsHourStat, eventsDealRateStat } from '@/api/sense/events/index'
const pieData = ref([])
const barData = ref([])
const dealData = ref([])
const lineData = ref([])
const eventDateType = ref('1')
const regionDateType = ref('1')
const dealDateType = ref('1')
const pieOptions = computed(() => {
  let options = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      top: '30%',
      right: 0,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10
    },
    grid: {
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: pieData.value.map(item => ({
          name: item.datasource,
          value: item.count,
        })),
        center: ['40%', '50%'],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  return options
})
const barOptions = computed(() => {
  const colors = [
    "#FF5733",
    "#7B3F00",
    "#FFC300",
    "#DAF7A6",
    "#FF5733",
    "#008080",
    "#E8EAF6",
    "#FFEEC1",
    "#B39DDB",
    "#4CAF50"
  ];
  const barObj = {}
  barData.value.forEach(item => {
    barObj[item.area_name] = item.event_count
  })
  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: 15  // 表示倾斜的角度
      }
    },
    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 dealOptions = computed(() => {
  const xData = dealData.value.map(item => item.eventType)
  const yData1 = dealData.value.map(item => item.totalEvents)
  const yData2 = dealData.value.map(item => item.dealRate*100)
  const options = {
    tooltip: {
      trigger: 'axis',
      appendToBody: true
    },
    grid: {
      left: '4%',
      right: '3%',
      bottom: 0,
      top: '12%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        show: true,
        interval: 0,
        rotate:15
      },
      data: xData
    },
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLine: {
          show: true,
        },
      },
      {
        type: 'value',
        name: '',
        axisLine: {
          show: true,
        },
      },
    ],
    series: [
      {
        name: '监测事件数量',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        yIndex:0,
        data: yData1
      },
      {
        name: '处理率',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        yIndex:1,
        data: yData2
      },
    ]
};
return options
})
const lineOptions = computed(() => {
  const xData = lineData.value.map(item => item.hour)
  const yData = lineData.value.map(item => item.events)
  const options = {
    tooltip: {
      trigger: 'axis',
      appendToBody: true
    },
    grid: {
      left: '1%',
      right: '3%',
      bottom: 0,
      top: '12%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        show: true,
      },
      data: xData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        // symbolSize: 0,
        areaStyle: {
          color: 'rgb(24, 45, 122,0.3)'
        },
        data: yData
      }
    ]
  };
  return options
})
onMounted(() => {
  getPieData()
  getDealData()
  getLineData()
})
const getPieData = () => {
  eventsDatasourceStat({ dateType: eventDateType.value }).then(({ code, data }) => {
    if (code === 200) {
      pieData.value = data || []
    }
  })
}
const getDealData = () => {
  eventsDealRateStat({ dateType: dealDateType.value }).then(({ code, data }) => {
    if (code === 200) {
      dealData.value = data || []
    }
  })
}
const getLineData = () => {
  eventsHourStat({ dateType: regionDateType.value }).then(({ code, data }) => {
    if (code === 200) {
      lineData.value = data || {}
    }
  })
}

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

.event-category {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-select {
    width: 250px;
  }
}

.eventStat-header {
  display: flex;

  .el-card {
    flex: 1;

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