<template>
  <div class="flex direction-column full">
    <mark-header
      :exclude-operations="['remark', 'problem', 'example', 'delete', 'bookmark']"
      :paper-path="current?.filePath"
      @click="onOperationClick"
    >
      <el-button class="m-l-base" size="small" type="primary" plain @click="onEditScore">修改给分</el-button>
      <el-button class="m-l-base m-r-auto" size="small" type="primary" @click="onSendBack">打回</el-button>
    </mark-header>
    <div class="flex flex-1 overflow-hidden p-base mark-container">
      <div
        class="flex flex-1 direction-column radius-base fill-blank mark-content"
        :class="{ 'text-center': center }"
        :style="{ 'background-color': backgroundColor }"
      >
        <span class="preview" @click="onPreview">
          <svg-icon name="preview"></svg-icon>
        </span>
        <right-button class="next-button" @click="checkNext" />
        <div class="flex-1 p-base scroll-auto mark-content-paper">
          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
        </div>
      </div>
      <div class="flex direction-column p-base radius-base fill-blank m-l-base table-view">
        <div class="flex items-center justify-between detail-info-table-header">
          <el-button custom-1 size="small" class="detail-info-label">
            <span class="">自查卷共:</span>
            <span class="m-l-extra-small detail-info-label-num">{{ selfCheckDataDetail?.length }}</span>
          </el-button>
        </div>
        <div class="flex-1 scroll-auto">
          <base-table
            ref="tableRef"
            size="small"
            height="100%"
            :data="tableData"
            :columns="columns"
            highlight-current-row
            @current-change="onCurrentChange"
            @row-dblclick="onDbClick"
          ></base-table>
        </div>
      </div>
    </div>
  </div>
  <scoring-panel-with-confirm
    :id="current?.taskId"
    v-model:visible="editScoreVisible"
    v-model:score="modelScore"
    :main-number="current?.mainNumber"
    modal
    :toggle-modal="false"
    @submit="onSubmit"
  ></scoring-panel-with-confirm>
  <image-preview v-model="previewModalVisible" :url="current?.filePath"></image-preview>
  <mark-history-list :id="currentViewHistory?.taskId" v-model="visibleHistory"></mark-history-list>
  <send-back-mark :id="current?.taskId" v-model="sendBackVisible" @rejected="onRejected"></send-back-mark>
</template>

<script setup lang="ts" name="SelfCheckDetail">
/** 自查数据详情 */
import { reactive, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { ElButton } from 'element-plus'
import { useSetImgBg } from '@/hooks/useSetImgBg'
import useFetch from '@/hooks/useFetch'
import useMarkHeader from '@/hooks/useMarkHeader'
import useTableCheck from '@/hooks/useTableCheck'
import MarkHeader from '@/components/shared/MarkHeader.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import ImagePreview from '@/components/shared/ImagePreview.vue'
import RightButton from '@/components/shared/RightButton.vue'
import SvgIcon from '@/components/common/SvgIcon.vue'
import ScoringPanelWithConfirm from '@/components/shared/ScoringPanelWithConfirm.vue'
import MarkHistoryList from '@/components/shared/MarkHistoryList.vue'
import SendBackMark from '@/components/shared/SendBackMark.vue'

import type { SetImgBgOption } from '@/hooks/useSetImgBg'
import type { ExtractApiParams, ExtractApiResponse } from '@/api/api'
import type { MarkHeaderInstance, EpTableColumn } from 'global-type'

type RowType = ExtractApiResponse<'getSelfCheckDataDetail'> & { index: number }

const { query } = useRoute()

/** 给分板 */
const editScoreVisible = ref<boolean>(false)

/** 图片预览 */
const previewModalVisible = ref<boolean>(false)

/** 打回弹窗 */
const sendBackVisible = ref<boolean>(false)

/** 分数 */
const modelScore = ref<number[]>([])

const {
  rotate,
  scale,
  center,
  frontColor,
  backgroundColor,
  onBack,
  onScaleChange,
  onCenter,
  onRotate,
  setBackgroundColor,
  setFrontColor,
  onViewStandard,
} = useMarkHeader()

/** 刷新 */
const onRefresh = () => {
  getSelfCheckDataDetail(query as unknown as ExtractApiParams<'getSelfCheckDataDetail'>)
}

/** 预览试卷 */
const onPreview = () => {
  previewModalVisible.value = true
}

/** 修改给分 */
const onEditScore = () => {
  editScoreVisible.value = true
}

/** 打回 */
const onSendBack = () => {
  sendBackVisible.value = true
}

/** 打回成功 */
const onRejected = () => {
  checkNext()
}
type OperationClick = MarkHeaderInstance['onClick']

type OperationType = Parameters<Exclude<OperationClick, undefined>>[0]['type']

const operationHandles: Partial<Record<OperationType, (...args: any) => void>> = {
  back: onBack,
  'scale-change': onScaleChange,
  center: onCenter,
  rotate: onRotate,
  'front-color': setFrontColor,
  'background-color': setBackgroundColor,
  refresh: onRefresh,
  standard: onViewStandard,
}
const onOperationClick: OperationClick = ({ type, value }) => {
  operationHandles[type]?.(value)
}

const columns: EpTableColumn<RowType>[] = [
  { label: '密号', prop: 'secretNumber' },
  { label: '标准分', prop: 'score' },
  { label: '评卷给分', prop: 'scoreLevel' },
  { label: '分组', prop: 'createName' },
  { label: '评卷员', prop: 'createTime' },
  { label: '评卷时间', prop: 'createTime' },
]

const { fetch: getSelfCheckDataDetail, result: selfCheckDataDetail } = useFetch('getSelfCheckDataDetail')

const {
  tableRef,
  tableData,
  current,
  currentView: currentViewHistory,
  next: checkNext,
  visibleHistory,
  onDbClick,
  onCurrentChange,
} = useTableCheck(selfCheckDataDetail)

/** 修改给分 */
const { fetch: markSelfCheckData } = useFetch('markSelfCheckData')

const onSubmit = async () => {
  if (current.value) {
    await markSelfCheckData({ taskId: current.value.taskId, scores: modelScore.value })
    onRefresh()
  }
}

onRefresh()

const imgOption = computed<SetImgBgOption>(() => {
  return {
    image: current?.value?.filePath,
    immediate: true,
    rotate: rotate.value,
    scale: scale.value,
  }
})

const { drawing, dataUrl } = useSetImgBg(imgOption)
</script>

<style scoped lang="scss">
.table-view {
  width: 480px;
  .detail-info-label {
    .detail-info-label-num {
      min-width: 32px;
      height: 24px;
      line-height: 24px;
      background: #00987b;
      border-radius: 4px;
    }
  }
}
</style>
