<script setup lang="ts">
import type { ExperimentItem } from '../types'
import AppList from '@/components/base/AppList.vue'
import { getCurrentExperimentList } from '../api'
import { useAppConfig } from '@/composables/useAppConfig'
const appConfig = useAppConfig()

const appList = ref<InstanceType<typeof AppList> | null>(null)

const list = ref<ExperimentItem[]>([])
async function fetchInfo() {
  const res = await getCurrentExperimentList()
  list.value = res.data.items
}
let timer: null | number = null
onMounted(() => {
  fetchInfo()
  timer = setInterval(() => {
    fetchInfo()
  }, 10000)
})
onUnmounted(() => {
  timer && clearInterval(timer)
})

const dmlURL = computed(() => {
  return appConfig.dmlURL || import.meta.env.VITE_DML_URL
})
// 实验列表
const listOptions = computed(() => {
  return {
    data: list.value,
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '所属机构', prop: 'org.department_name' },
      { label: '实验课程名称', prop: 'course_name' },
      { label: '实验名称', prop: 'name' },
      {
        label: '指导老师',
        prop: 'teachers',
        computed({ row }: { row: ExperimentItem }) {
          return row.teachers.map(item => item.name).join(',')
        }
      },
      {
        label: '班级名称',
        prop: 'student.specialty_name',
        computed({ row }: { row: ExperimentItem }) {
          return row.classes.map(item => item.name).join(',')
        }
      },
      {
        label: '班级人数',
        prop: 'student.class_name',
        computed({ row }: { row: ExperimentItem }) {
          return row.classes.map(item => item.student_total).join(',')
        }
      },
      { label: '正在使用人数', prop: 'current_use_user_count' },
      { label: '用户数据量', prop: 'current_member_count' },
      { label: '标签数据量', prop: 'current_tag_count' },
      { label: '群组数据量', prop: 'current_group_count' },
      { label: '实验使用时间', prop: 'time' },
      { label: '操作', slots: 'table-x' }
    ]
  }
})
</script>

<template>
  <AppCard>
    <ul class="statistics">
      <template v-for="(item, index) in list" :key="item.id">
        <el-popover :width="340" trigger="hover" v-if="index < 5">
          <el-form label-suffix="：" class="statistics-form">
            <el-form-item label="实验名称">{{ item.name }}</el-form-item>
            <el-form-item label="班级人数">{{ item.classes.map(item => item.student_total).join(',') }}人</el-form-item>
            <el-form-item label="正在使用人数">{{ item.current_use_user_count }}人</el-form-item>
          </el-form>
          <template #reference>
            <li>
              <h6>
                <span>Top{{ index + 1 }}</span>
              </h6>
              <p>{{ item.name }}</p>
            </li>
          </template>
        </el-popover>
      </template>
    </ul>
    <h2 class="h2-title">实验列表</h2>
    <AppList border v-bind="listOptions" ref="appList">
      <template #table-x="{ row }">
        <el-button type="primary"><a :href="`${dmlURL}?experiment_id=${row.id}`" target="_blank">查看</a></el-button>
      </template>
    </AppList>
  </AppCard>
</template>

<style lang="scss" scoped>
.statistics {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 90px 0;
  &:empty {
    display: none;
  }
  li {
    width: 212px;
    height: 212px;
    background-color: rgba(247, 247, 247, 1);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h6 {
      color: rgba(178, 15, 60, 1);
      span {
        font-size: 18px;
      }
    }
    p {
      margin-top: 20px;
      font-size: 18px;
      color: rgba(96, 96, 96, 1);
      text-align: center;
    }
  }
}
.statistics-form {
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
  :deep(.el-form-item__content) {
    font-size: 18px;
    color: var(--main-color);
  }
}
.h2-title {
  padding-left: 5px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  margin: 20px 0;
  border-left: 3px solid #aa1941;
}
</style>
