<script setup>
import { ElMessage } from 'element-plus'
import ChartCard from '@/components/ChartCard.vue'
import { DataLine } from '@element-plus/icons-vue'
import { useUser } from '@/composables/useAllData'
import { useEvent } from '../composables/useEvent'

import * as api from '../api'

const { userValue, userList } = useUser()
const { eventValues, eventList } = useEvent()
const date = ref([])

const info = ref()
async function fetchInfo() {
  const res = await api.getExperiment()
  info.value = res.data.detail
}
onMounted(fetchInfo)

async function handleStart() {
  if (!date.value.length) {
    ElMessage.error('请选择时间区间')
    return
  }
  if (!eventValues.value.length) {
    ElMessage.error('请选择事件')
    return
  }
  fetchEventAction()
  fetchEventActionTrend()
  fetchEventMember()
  fetchEventTime()
}
const loading = computed(() => {
  return loading1.value || loading2.value || loading3.value || loading4.value
})

const params = computed(() => {
  const [startDate, endDate] = date.value || []
  return { sso_id: userValue.value, event_ids: eventValues.value, start_date: startDate, end_date: endDate }
})

// 事件行为分布
const loading1 = ref(false)
const eventAction = ref([])
async function fetchEventAction() {
  if (!userValue.value) return
  loading1.value = true
  try {
    const res = await api.getEventActionList(params.value)
    eventAction.value = res.data.items
  } finally {
    loading1.value = false
  }
}
const eventActionOption = computed(() => {
  if (!eventAction.value.length) return
  const value = eventAction.value.map(item => item.total)
  const max = Math.max(...value)
  return {
    grid: { left: '5%', top: '5%', right: '5%', bottom: '5%', containLabel: true },
    tooltip: { trigger: 'axis' },
    radar: { indicator: eventAction.value.map(item => ({ name: item.group_name, max })) },
    series: [
      {
        name: '事件',
        type: 'radar',
        tooltip: { trigger: 'item' },
        label: { show: true, position: 'top' },
        data: [{ value }]
      }
    ]
  }
})

// 事件行为数量走势
const loading2 = ref(false)
const eventActionTrend = ref([])
async function fetchEventActionTrend() {
  if (!userValue.value) return
  loading2.value = true
  try {
    const res = await api.getEventActionTrendList(params.value)
    eventActionTrend.value = res.data.items
  } finally {
    loading2.value = false
  }
}
const eventActionTrendOption = computed(() => {
  if (!eventActionTrend.value.length) return
  const series = eventActionTrend.value.map(group => {
    return {
      name: group.event_name,
      type: 'line',
      smooth: true,
      label: { show: true, position: 'top' },
      data: group.items.map(item => item.total)
    }
  })
  const [first = {}] = eventActionTrend.value || []
  return {
    grid: { left: '5%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
    tooltip: { trigger: 'axis' },
    legend: {
      bottom: '10',
      data: eventActionTrend.value.map(item => item.event_name)
    },
    xAxis: {
      type: 'category',
      boundaryGap: ['20%', '20%'],
      data: first.items.map(item => item.group_name)
    },
    yAxis: { type: 'value' },
    series
  }
})

// 事件用户分布
const loading3 = ref(false)
const eventMember = ref([])
async function fetchEventMember() {
  if (!userValue.value) return
  loading3.value = true
  try {
    const res = await api.getEventMemberList(params.value)
    eventMember.value = res.data.items
  } finally {
    loading3.value = false
  }
}
const eventMemberOption = computed(() => {
  if (!eventMember.value.length) return
  return {
    grid: { left: '5%', top: '10%', right: '5%', bottom: '5%', containLabel: true },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      // axisLabel: { interval: 0, rotate: 30 },
      data: eventMember.value.map(item => item.group_name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '用户',
        type: 'bar',
        label: { show: true, position: 'top' },
        itemStyle: { borderRadius: 2 },
        data: eventMember.value.map(item => item.total)
      }
    ]
  }
})

// 事件发生时间分析
const loading4 = ref(false)
const eventTime = ref([])
async function fetchEventTime() {
  if (!userValue.value) return
  loading4.value = true
  try {
    const res = await api.getEventTimeList(params.value)
    eventTime.value = res.data.items
  } finally {
    loading4.value = false
  }
}
const eventTimeOption = computed(() => {
  if (!eventTime.value.length) return
  const series = eventTime.value.map(group => {
    return {
      name: group.event_name,
      type: 'line',
      // label: { show: true, position: 'top' },
      data: group.items.map(item => item.total)
    }
  })
  const [first = {}] = eventTime.value || []
  return {
    grid: { left: '5%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
    tooltip: { trigger: 'axis' },
    legend: {
      bottom: '10',
      data: eventTime.value.map(item => item.event_name)
    },
    xAxis: {
      type: 'category',
      boundaryGap: ['20%', '20%'],
      data: first.items.map(item => item.group_name)
    },
    yAxis: { type: 'value' },
    series
  }
})
</script>

<template>
  <AppCard title="事件分析">
    <el-form inline label-suffix="：" v-if="info">
      <el-form-item label="实验名称">{{ info.name }}</el-form-item>
      <el-form-item label="请选择学生/老师">
        <el-select v-model="userValue" filterable>
          <el-option v-for="item in userList" :label="item.name" :value="item.sso_id" :key="item.sso_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间区间">
        <el-date-picker type="monthrange" v-model="date" value-format="YYYY-MM"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="DataLine" :loading="loading" @click="handleStart">分析</el-button>
      </el-form-item>
      <el-form-item>
        <el-checkbox-group v-model="eventValues">
          <el-checkbox v-for="item in eventList" :key="item.id" :value="item.id">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <el-divider />
    <div class="row">
      <ChartCard title="事件行为分布" :options="eventActionOption" :loading="loading1"></ChartCard>
      <ChartCard title="事件行为数量走势" :options="eventActionTrendOption" :loading="loading2" style="flex: 2.5"></ChartCard>
    </div>
    <div class="row">
      <ChartCard title="事件用户分布" :options="eventMemberOption" :loading="loading3"></ChartCard>
      <ChartCard title="事件发生时间分析" :options="eventTimeOption" :loading="loading4" style="flex: 2.5"></ChartCard>
    </div>
  </AppCard>
</template>

<style lang="scss" scoped>
.total {
  font-size: 16px;
  font-weight: bold;
  color: var(--main-color);
}
.row {
  display: flex;
  gap: 20px;
  & + .row {
    margin-top: 20px;
  }
}
</style>
