<template>
  <div class="flex direction-column full">
    <mark-header :include-operations="['back']" :paper-path="currentStandardPaper?.filePath" @click="onOperationClick">
      <el-button class="m-l-base m-r-auto" size="small" type="primary" @click="onTransformToSample">转为样卷</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">
        <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" />
        </div>
      </div>
      <div class="flex direction-column p-base radius-base fill-blank scroll-auto m-l-base table-view">
        <base-form size="small" :model="formModel" :items="formItems" :label-width="useVW(52)">
          <template #form-item-search>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </template>
        </base-form>
        <div>
          <el-button custom-1 size="small" class="detail-info-label">
            <span class="">标准卷: 共</span>
            <span class="m-l-extra-small detail-info-label-num">{{ tableData.length }}</span>
          </el-button>
        </div>
        <div class="flex-1 scroll-auto"></div>
        <base-table
          ref="tableRef"
          size="small"
          height="100%"
          :data="tableData"
          :columns="columns"
          highlight-current-row
          @current-change="onCurrentChange"
        ></base-table>
      </div>
    </div>
  </div>
  <image-preview v-model="previewModalVisible" :url="currentStandardPaper?.filePath"></image-preview>
</template>

<script setup lang="ts" name="ExpertStandard">
/** 专家卷浏览-标准卷 */
import { reactive, ref, computed, watch } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { useSetImgBg } from '@/hooks/useSetImgBg'
import useFetch from '@/hooks/useFetch'
import useVW from '@/hooks/useVW'
import useForm from '@/hooks/useForm'
import useOptions from '@/hooks/useOptions'
import useMarkHeader from '@/hooks/useMarkHeader'
import useTableCheck from '@/hooks/useTableCheck'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import RightButton from '@/components/shared/RightButton.vue'
import SvgIcon from '@/components/common/SvgIcon.vue'
import MarkHeader from '@/components/shared/MarkHeader.vue'
import ImagePreview from '@/components/shared/ImagePreview.vue'

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

type RowType = ExtractMultipleApiResponse<'getStandardList'> & { index: number }

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

const { onBack } = useMarkHeader()

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

type OperationClick = MarkHeaderInstance['onClick']

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

const operationHandles: Partial<Record<OperationType, (...args: any) => void>> = {
  back: onBack,
}

const onOperationClick: OperationClick = ({ type, value }) => {
  operationHandles[type]?.(value)
}

const { mainQuestionList, dataModel, changeModelValue, onOptionInit } = useOptions(['question'])

const formModel = reactive<ExtractApiParams<'getStandardList'>>({
  mainNumber: dataModel.question,
  dispensed: '',
  scoreStart: '',
  scoreEnd: '',
  pageNumber: 1,
  pageSize: 9999999,
})

watch(dataModel, () => {
  formModel.mainNumber = dataModel.question
})

const { defineColumn, _ } = useForm()

const span10 = defineColumn(_, '', { span: 10 })
const span5 = defineColumn(_, '', { span: 5 })

const formItems = computed<EpFormItem[]>(() => [
  span10({
    rowKey: 'row-1',
    label: '大题',
    prop: 'mainNumber',
    slotType: 'select',
    slot: { options: mainQuestionList.value, onChange: changeModelValue('question'), disabled: true },
  }),
  span10({
    rowKey: 'row-1',
    label: '分发',
    prop: 'dispensed',
    slotType: 'select',
    slot: {
      options: [
        { label: '全部', value: '' },
        { label: '已发过', value: true },
        { label: '未发过', value: false },
      ],
    },
  }),
  { rowKey: 'row-1', slotName: 'search', labelWidth: '10px', colProp: { span: 4 } },
  span5({
    rowKey: 'row-2',
    label: '分数',
    prop: 'scoreStart',
    slotType: 'input',
  }),
  span5({
    rowKey: 'row-2',
    label: '至',
    prop: 'scoreEnd',
    slotType: 'input',
  }),
])

/** 标准卷列表 */
const columns: EpTableColumn<RowType>[] = [
  { label: '密号', prop: 'secretNumber' },
  { label: '分数', prop: 'score' },
  { label: '提交人', prop: 'createName' },
  { label: '提交时间', prop: 'createTime' },
]

const { fetch: getStandardList, result: standardList } = useFetch('getStandardList')

const {
  tableRef,
  tableData,
  current: currentStandardPaper,
  next: checkNext,
  onCurrentChange,
} = useTableCheck(standardList)

const onSearch = async () => {
  getStandardList(formModel)
}

/** 转为样卷 */
const { fetch: transformStandardToSample } = useFetch('transformStandardToSample')

const onTransformToSample = async () => {
  if (currentStandardPaper.value) {
    await transformStandardToSample({ id: currentStandardPaper.value.id })
    ElMessage.success('操作成功')
  }
}

onOptionInit(onSearch)

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

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

<style scoped lang="scss">
.mark-container {
  .mark-content {
    position: relative;
    .preview {
      position: absolute;
      cursor: pointer;
      top: 10px;
      right: 20px;
      font-size: 24px;
    }
    .next-button {
      position: absolute;
      right: -20px;
      top: 300px;
    }
    .mark-content-paper {
      img {
        max-width: 100%;
      }
    }
  }
  .table-view {
    width: 580px;
    .detail-info-label {
      .detail-info-label-num {
        min-width: 32px;
        height: 24px;
        line-height: 24px;
        background: #00987b;
        border-radius: 4px;
      }
    }
  }
}
</style>
