<script setup lang="ts">
import type { ReportItem } from '../types'
import { Refresh, Upload } from '@element-plus/icons-vue'
import AppList from '@/components/base/AppList.vue'
import { getCheckList, getReportList, getCheckView } from '../api'
import { useFilterList } from '../composables/useFilterList'

const SyncExamDialog = defineAsyncComponent(() => import('../components/SyncExamDialog.vue'))
const ImportExamDialog = defineAsyncComponent(() => import('../components/ImportExamDialog.vue'))
const ImportScoreDialog = defineAsyncComponent(() => import('../components/ImportScoreDialog.vue'))
const ScoreViewPicturesDialog = defineAsyncComponent(() => import('../components/ScoreViewPicturesDialog.vue'))
const ReportDialog = defineAsyncComponent(() => import('../components/ReportDialog.vue'))
const ScoreDialog = defineAsyncComponent(() => import('../components/ScoreDialog.vue'))
const ViewLiveDialog = defineAsyncComponent(() => import('../components/ViewLiveDialog.vue'))

const route = useRoute()

const { competitions, schools, status } = useFilterList()

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

// 列表配置
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getCheckList,
      params: {
        competition_id: route.query.competition_id || '',
        check_status: '',
        organ_id: '',
        login_id: '',
        student_name: ''
      }
    },
    filters: [
      {
        type: 'select',
        prop: 'competition_id',
        label: '赛项',
        placeholder: '请选择赛项',
        options: competitions.value,
        labelKey: 'name',
        valueKey: 'id'
      },
      {
        type: 'select',
        prop: 'check_status',
        label: '状态',
        placeholder: '请选择是否评分',
        options: status.value,
        labelKey: 'name',
        valueKey: 'id'
      },
      {
        type: 'select',
        prop: 'organ_id',
        label: '学校',
        placeholder: '请选择学校',
        options: schools.value,
        labelKey: 'name',
        valueKey: 'id'
      },
      { type: 'input', prop: 'student_name', label: '考生姓名', placeholder: '请输入考生姓名' },
      { type: 'input', prop: 'login_id', label: '考生ID', placeholder: '请输入考生ID' }
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '赛项名称', prop: 'competition_id_name' },
      { label: '选手姓名', prop: 'student_name' },
      { label: '参赛ID', prop: 'login_id' },
      { label: '性别', prop: 'gender' },
      { label: '所在学校', prop: 'organ_id_name' },
      { label: '所在专业', prop: 'specialty_id_name' },
      { label: '所在班级', prop: 'class_id_name' },
      { label: '训练次数', prop: 'train_count' },
      { label: '评分规则', prop: 'competition_is_more_status' },
      { label: '已评分人数', prop: 'checked_count', slots: 'table-count' },
      { label: '已评分', prop: 'checked_flag_name' },
      { label: '得分', prop: 'score_name', slots: 'table-score' },
      { label: '更新时间', prop: 'updated_time' },
      // {
      //   label: '模块一',
      //   prop: 'module_1',
      //   computed({ row }: { row: any }) {
      //     return getModuleStatus(row, 0)
      //   }
      // },
      // {
      //   label: '模块二',
      //   prop: 'module_2',
      //   computed({ row }: { row: any }) {
      //     return getModuleStatus(row, 1)
      //   }
      // },
      // {
      //   label: '模块三',
      //   prop: 'module_3',
      //   computed({ row }: { row: any }) {
      //     return getModuleStatus(row, 2)
      //   }
      // },
      // {
      //   label: '模块四',
      //   prop: 'module_4',
      //   computed({ row }: { row: any }) {
      //     return getModuleStatus(row, 3)
      //   }
      // },
      // {
      //   label: '模块五',
      //   prop: 'module_5',
      //   computed({ row }: { row: any }) {
      //     return getModuleStatus(row, 4)
      //   }
      // },
      // {
      //   label: '模块六',
      //   prop: 'module_6',
      //   computed({ row }: { row: any }) {
      //     return getModuleStatus(row, 5)
      //   }
      // },
      { label: '操作', slots: 'table-x', width: 140 }
    ]
  }
})

const syncDialogVisible = $ref(false)
const importExamVisible = $ref(false)
const importScoreVisible = $ref(false)

function onUpdateSuccess() {
  appList?.refetch()
}

// 查看截图
const viewPictureVisible = ref(false)
const rowData = ref()
function handleViewPicture(row: any) {
  rowData.value = row
  viewPictureVisible.value = true
}

// 查看报告
const viewReportVisible = ref(false)
function handleViewReport(row: any) {
  rowData.value = row
  viewReportVisible.value = true
}

// function getModuleStatus(row: any, index: number) {
//   const [first] = row.student_module_status_list
//   try {
//     const data: any = JSON.parse(first.data)
//     const status: number = data[index].status
//     if (status == 0) return '未开始'
//     if (status == 1) return '<span class="is-inProgress">进行中</span>'
//     if (status == 2) return '<span class="is-completed">已完成</span>'
//   } catch (error) {
//     // console.log(error)
//   }
//   return '未开始'
// }

// 评分
let dialogVisible = $ref(false)

const reportList = ref<ReportItem[]>([])

// 左侧
let detail = $ref<any>()
provide('detail', $$(detail))
const handleScore = function (row: any) {
  getCheckView({ id: row.id }).then((res: any) => {
    detail = res.data
    getReportList({ competition_id: res.data.competition_id, student_id: res.data.student_id }).then((r: any) => {
      reportList.value = r.data.items
      dialogVisible = true
    })
  })
}

// 直播录像
let liveDialogVisible = $ref(false)
let liveParams: any = $ref()
const handleViewLive = function (row: any) {
  liveParams = {
    sid: row.student_id,
    eid: row.experiment_id
  }
  liveDialogVisible = true
}
</script>

<template>
  <AppCard title="大赛评分">
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <el-button
          type="primary"
          round
          :icon="Refresh"
          @click="syncDialogVisible = true"
          v-permission="'v1-expert-check-sync-exam'"
          >系统同步考试成绩</el-button
        >
        <el-button
          type="primary"
          round
          :icon="Upload"
          @click="importExamVisible = true"
          v-permission="'v1-expert-check-import-exam'"
          >批量导入考试成绩</el-button
        >
        <el-button
          type="primary"
          round
          :icon="Upload"
          @click="importScoreVisible = true"
          v-permission="'v1-expert-check-import-score'"
          >批量导入完整评分</el-button
        >
      </template>
      <template #table-count="{ row }"> {{ row.checked_count }}/{{ row.need_check_count }} </template>
      <template #table-score="{ row }">
        <span :class="{ 'is-info': row.score_name !== '--' }">{{ row.score_name }}</span>
      </template>
      <template #table-x="{ row }">
        <!-- 评分从详情里移出 -->
        <!-- <el-button text type="primary" v-if="row.publish_status === '0'" v-permission="'v1-expert-check-set-score'">
          <router-link :to="`/admin/contest/check/${row.id}`" target="_blank">评分</router-link>
        </el-button> -->
        <el-button text type="primary" @click="handleScore(row)" v-permission="'v1-expert-check-set-score'"
          >评分</el-button
        >
        <br />
        <template v-if="row.competition_report_count !== '0'">
          <el-button text type="primary" @click="handleViewReport(row)" v-if="row.competition_report_count !== '0'"
            >查看报告</el-button
          ><br />
        </template>
        <template v-if="row.competition_competitor_pictures && row.competition_competitor_pictures?.pictures">
          <el-button
            text
            type="primary"
            @click="handleViewPicture(row)"
            v-if="row.competition_competitor_pictures && row.competition_competitor_pictures?.pictures"
            >查看截图</el-button
          >
          <br />
        </template>
        <el-button
          text
          type="primary"
          @click="handleViewLive(row)"
          v-if="row.experiment_id !== '0' && row.experiment_id"
          >查看直播录像</el-button
        >
      </template>
    </AppList>
  </AppCard>
  <!-- 系统同步考试成绩 -->
  <SyncExamDialog v-model="syncDialogVisible" @update="onUpdateSuccess" v-if="syncDialogVisible"></SyncExamDialog>
  <!-- 批量导入考试成绩 -->
  <ImportExamDialog v-model="importExamVisible" @update="onUpdateSuccess" v-if="importExamVisible"></ImportExamDialog>
  <!-- 批量导入完整评分 -->
  <ImportScoreDialog
    v-model="importScoreVisible"
    @update="onUpdateSuccess"
    v-if="importScoreVisible"
  ></ImportScoreDialog>
  <!-- 查看截图 -->
  <ScoreViewPicturesDialog v-model="viewPictureVisible" :data="rowData" v-if="rowData"></ScoreViewPicturesDialog>
  <!-- 查看报告 -->
  <ReportDialog v-model="viewReportVisible" :data="rowData" v-if="rowData && viewReportVisible"></ReportDialog>
  <!-- 评分弹窗 -->
  <ScoreDialog v-model="dialogVisible" :reportList="reportList"></ScoreDialog>
  <!-- 查看直播视频录像 -->
  <ViewLiveDialog v-model="liveDialogVisible" v-if="liveDialogVisible" :data="liveParams"></ViewLiveDialog>
</template>

<style lang="scss">
.is-info {
  color: #b18862;
}
.is-completed {
  color: #b8b8b8;
}
.is-inProgress {
  color: var(--main-color);
}
</style>
