<template>
  <base-dialog v-model="visible" title="评卷记录" class="remark-list" :width="useVW(800)">
    <base-table
      v-if="viewType === 'list'"
      size="small"
      :columns="tableColumns"
      :data="markHistoryList"
      highlight-current-row
      :max-height="useVW(620)"
      @current-change="onCurrentChange"
    ></base-table>
    <div v-else class="flex flex-wrap preview-list">
      <div
        v-for="markHistory in markHistoryList"
        :key="markHistory.taskId"
        class="m-l-mini preview-item"
        :class="{ current: task?.taskId === markHistory.taskId }"
        @click="onCurrentChange(markHistory)"
      >
        <img :src="markHistory.url" alt="" />
        <div class="text-center">{{ markHistory.markScore }}分</div>
      </div>
    </div>
    <div class="flex items-center justify-around m-t-base">
      <el-radio-group v-model="viewType">
        <el-radio label="list">列表</el-radio>
        <el-radio label="preview">缩略图</el-radio>
      </el-radio-group>
      <confirm-button class="m-l-base" @confirm="onConfirm" @cancel="onCancel"></confirm-button>
    </div>
  </base-dialog>
</template>

<script setup lang="ts" name="RemarkListModal">
/** 回评列表 */
import { reactive, ref, watch } from 'vue'
import { ElRadioGroup, ElRadio } from 'element-plus'
import useFetch from '@/hooks/useFetch'
import useVModel from '@/hooks/useVModel'
import useVW from '@/hooks/useVW'
import BaseDialog from '@/components/element/BaseDialog.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import ConfirmButton from '../common/ConfirmButton.vue'

import type { EpTableColumn } from 'global-type'
import type { ExtractApiResponse } from '@/api/api'

type HistoryTask = ExtractArrayValue<ExtractApiResponse<'getMarkHistory'>>

const { fetch: getMarkHistory, result: markHistoryList } = useFetch('getMarkHistory')

const props = defineProps<{ modelValue: boolean }>()

const emits = defineEmits<{
  (e: 'task-change', data: HistoryTask): void
  (e: 'update:modeValue', visible: boolean): void
}>()

const visible = useVModel(props)

const tableColumns: EpTableColumn<HistoryTask>[] = [
  { label: '密号', prop: 'secretNumber' },
  { label: '分数', prop: 'markScore' },
  { label: '时间', prop: 'markTime' },
  { label: '试卷类型', prop: 'taskType' },
]

const viewType = ref<'list' | 'preview'>('list')

watch(visible, () => {
  if (visible.value) {
    getMarkHistory()
  }
})

const task = ref<HistoryTask>()

const onCurrentChange = (row: HistoryTask) => {
  task.value = row
}

const onConfirm = () => {
  if (task.value) {
    emits('task-change', task.value)
    visible.value = false
  }
}

const onCancel = () => {
  visible.value = false
}
</script>

<style scoped lang="scss">
.preview-list {
  max-height: 620px;
  padding: 8px;
  overflow: auto;
  .preview-item {
    width: 230px;
    border: 1px solid;
    border-color: transparent;
    margin-bottom: 8px;
    text-align: center;
    border-radius: 6px;
    padding: 6px;
    &.current {
      // border-color: $color--primary;
      box-shadow: 0 0 4px $color--primary;
    }
    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }
}
</style>
