<script setup>
import { getMemberEventAnalysis } from '../api'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'

use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

const props = defineProps(['eventId'])

const detail = ref({
  event_total: '0',
  member_total: '0',
  member_avg_total: '0',
  start_time: '',
  end_time: '',
  items: []
})
async function fetchInfo() {
  const res = await getMemberEventAnalysis({ event_id: props.eventId })
  detail.value = res.data
}
watch(() => props.eventId, fetchInfo)

const options = computed(() => {
  return {
    grid: { left: '5%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      boundaryGap: ['20%', '20%'],
      data: detail.value.items.map(item => item.group_name)
    },
    yAxis: { type: 'value' },
    series: [
      {
        data: detail.value.items.map(item => item.total),
        type: 'line',
        smooth: true
      }
    ]
  }
})
</script>

<template>
  <div>
    <el-form-item label="事件数据总量">
      {{ detail.event_total }}
      <el-form-item label="事件人数">{{ detail.member_total }}</el-form-item>
      <el-form-item label="人均事件数量">{{ detail.member_avg_total }}</el-form-item>
    </el-form-item>
    <el-form-item label="事件发生开始时间">
      {{ detail.start_time }}
      <el-form-item label="事件发生结束时间">{{ detail.end_time }} </el-form-item>
    </el-form-item>
    <el-form-item label="事件走势图">
      <v-chart class="chart" :option="options" autoresize ref="chart" style="height: 200px" v-if="detail.items.length" />
      <el-empty description="暂无数据" v-else />
    </el-form-item>
  </div>
</template>
