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

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

watch(userValue, () => {
  handleStart()
})

async function handleStart() {
  fetchLabelHot()
  fetchLabelTop()
  fetchLabelMemberTop()
  fetchGroupHot()
  fetchGroupTop()
  fetchGroupMemberTop()
}
const loading = computed(() => {
  return loading1.value || loading2.value || loading3.value || loading4.value || loading5.value || loading6.value
})

// 热门标签
const loading1 = ref(false)
const labelHot = ref([])
async function fetchLabelHot() {
  if (!userValue.value) return
  loading1.value = true
  try {
    const res = await api.getHotTags({ sso_id: userValue.value })
    labelHot.value = res.data.items
  } finally {
    loading1.value = false
  }
}
const labelHotOption = computed(() => {
  if (!labelHot.value.length) return
  return {
    grid: { left: '10%', top: '10%', right: '10%', bottom: '10%', containLabel: true },
    tooltip: {},
    series: [
      {
        type: 'wordCloud',
        gridSize: 15,
        sizeRange: [12, 50],
        rotationRange: [0, 0],
        shape: 'circle',
        width: '100%',
        height: '100%',
        drawOutOfBound: false,
        textStyle: {
          color: function () {
            return 'rgb(' + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',') + ')'
          }
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            textShadowBlur: 10,
            textShadowColor: '#333'
          }
        },
        data: labelHot.value.map(item => {
          return { name: item.group_name, value: item.total }
        })
      }
    ]
  }
})

// 标签用户分布Top5
const loading2 = ref(false)
const labelTop = ref([])
async function fetchLabelTop() {
  if (!userValue.value) return
  loading2.value = true
  try {
    const res = await api.getTagTop({ sso_id: userValue.value })
    labelTop.value = res.data.items
  } finally {
    loading2.value = false
  }
}
const labelTopOption = computed(() => {
  if (!labelTop.value.length) return
  return {
    grid: { left: '5%', top: '10%', right: '5%', bottom: '5%', containLabel: true },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      axisLabel: { interval: 0 },
      data: labelTop.value.map(item => item.group_name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '用户',
        type: 'bar',
        label: { show: true, position: 'top' },
        data: labelTop.value.map(item => item.total)
      }
    ]
  }
})

// 用户标签Top10
const loading3 = ref(false)
const labelMemberTop = ref([])
async function fetchLabelMemberTop() {
  if (!userValue.value) return
  loading3.value = true
  try {
    const res = await api.getMemberTagTop({ sso_id: userValue.value })
    labelMemberTop.value = res.data.items
  } finally {
    loading3.value = false
  }
}
const labelMemberTopOption = computed(() => {
  if (!labelMemberTop.value.length) return
  return {
    grid: { left: '5%', top: '10%', right: '5%', bottom: '5%', containLabel: true },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: { type: 'value' },
    yAxis: {
      type: 'category',
      inverse: true,
      data: labelMemberTop.value.map(item => item.group_name)
    },
    series: [
      {
        name: '标签',
        type: 'bar',
        label: { show: true, position: 'right' },
        data: labelMemberTop.value.map(item => item.total)
      }
    ]
  }
})

// 热门群组
const loading4 = ref(false)
const groupHot = ref([])
async function fetchGroupHot() {
  if (!userValue.value) return
  loading4.value = true
  try {
    const res = await api.getHotGroups({ sso_id: userValue.value })
    groupHot.value = res.data.items
  } finally {
    loading4.value = false
  }
}
const groupHotOption = computed(() => {
  if (!groupHot.value.length) return
  return {
    grid: { left: '10%', top: '10%', right: '10%', bottom: '10%', containLabel: true },
    tooltip: {},
    series: [
      {
        type: 'wordCloud',
        gridSize: 15,
        sizeRange: [12, 50],
        rotationRange: [0, 0],
        shape: 'circle',
        width: '100%',
        height: '100%',
        drawOutOfBound: false,
        textStyle: {
          color: function () {
            return 'rgb(' + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',') + ')'
          }
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            textShadowBlur: 10,
            textShadowColor: '#333'
          }
        },
        data: groupHot.value.map(item => {
          return { name: item.group_name, value: item.total }
        })
      }
    ]
  }
})

// 群组用户分布Top5
const loading5 = ref(false)
const groupTop = ref([])
async function fetchGroupTop() {
  if (!userValue.value) return
  loading5.value = true
  const res = await api.getGroupTop({ sso_id: userValue.value })
  groupTop.value = res.data.items
  loading5.value = false
}
const groupTopOption = computed(() => {
  if (!groupTop.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: groupTop.value.map(item => item.group_name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '用户',
        type: 'bar',
        label: { show: true, position: 'top' },
        itemStyle: { borderRadius: 2 },
        data: groupTop.value.map(item => item.total)
      }
    ]
  }
})

// 用户群组Top10
const loading6 = ref(false)
const groupMemberTop = ref([])
async function fetchGroupMemberTop() {
  if (!userValue.value) return
  loading6.value = true
  try {
    const res = await api.getMemberGroupTop({ sso_id: userValue.value })
    groupMemberTop.value = res.data.items
  } finally {
    loading6.value = false
  }
}
const groupMemberTopOption = computed(() => {
  if (!groupMemberTop.value.length) return
  return {
    grid: { left: '5%', top: '10%', right: '5%', bottom: '5%', containLabel: true },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: { type: 'value' },
    yAxis: {
      type: 'category',
      inverse: true,
      data: groupMemberTop.value.map(item => item.group_name)
    },
    series: [
      {
        name: '群组',
        type: 'bar',
        label: { show: true, position: 'right' },
        data: groupMemberTop.value.map(item => item.total)
      }
    ]
  }
})
</script>

<template>
  <AppCard title="标签群组分析">
    <el-form inline label-suffix="：">
      <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>
        <el-button type="primary" :icon="DataLine" :loading="loading" @click="handleStart">分析</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <div class="row">
      <ChartCard title="热门标签" :options="labelHotOption" :loading="loading1"></ChartCard>
      <ChartCard title="标签用户分布Top5" :options="labelTopOption" :loading="loading2"></ChartCard>
      <ChartCard title="用户标签Top10" :options="labelMemberTopOption" :loading="loading3"></ChartCard>
    </div>
    <div class="row">
      <ChartCard title="热门群组" :options="groupHotOption" :loading="loading4"></ChartCard>
      <ChartCard title="群组用户分布Top5" :options="groupTopOption" :loading="loading5"></ChartCard>
      <ChartCard title="用户群组Top10" :options="groupMemberTopOption" :loading="loading6"></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>
