<template>
  <scoring-panel
    v-bind="attrs"
    v-model:score="modelScore"
    v-model:visible="modalVisible"
    :main-number="props.mainNumber"
    @submit="onSubmit"
  ></scoring-panel>
  <base-dialog v-model="submitModalVisible" unless :width="useVW(260)" center>
    <div class="text-center question-name">{{ questionInfo?.mainNumber }} {{ questionInfo?.mainTitle }}</div>
    <div class="fill-lighter p-t-base text-center">
      <div class="total-score-title">— 总分 —</div>
      <div class="m-t-extra-small">
        <span class="score-value">{{ totalScore }}</span>
        <span class="score-unit">分</span>
      </div>
    </div>
    <div class="text-center m-t-base confirm-text">确认提交?</div>
    <template #footer>
      <div class="flex items-center justify-between">
        <el-button ref="confirmButtonRef" class="confirm-button" type="primary" @click="onConfirmSubmit">
          是(Y)
        </el-button>
        <el-button class="confirm-button" plain @click="onCancelSubmit">否(N)</el-button>
      </div>
    </template>
  </base-dialog>
</template>

<script setup lang="ts" name="ScoringPanelWithConfirm">
import { computed, ref, useAttrs, watch, nextTick } from 'vue'
import { add } from '@/utils/common'
import { ElButton } from 'element-plus'
import ScoringPanel from '@/components/shared/ScoringPanel.vue'
import BaseDialog from '@/components/element/BaseDialog.vue'
import useVModel from '@/hooks/useVModel'
import useVW from '@/hooks/useVW'

import type { ExtractApiResponse } from '@/api/api'

const props = defineProps<{
  /** 显示隐藏 */
  visible?: boolean
  /** 分值 */
  score: number[]
  /** 大题号 */
  mainNumber?: number
}>()

const attrs = useAttrs()

const emit = defineEmits<{
  (e: 'submit', data: { question: ExtractApiResponse<'getQuestionStruct'>; scores: number[]; totalScore: number }): void
  (e: 'update:visible', visible: boolean): void
  (e: 'update:score', scores: number[]): void
}>()

/** 给分面板显示隐藏 */
const modalVisible = useVModel(props, 'visible')

/** 给分列表 */
const modelScore = useVModel(props, 'score')

/** 确认给分 */
const submitModalVisible = ref<boolean>(false)

/** 确认给分按钮 */
const confirmButtonRef = ref<typeof ElButton>()

watch(submitModalVisible, () => {
  if (submitModalVisible.value) {
    nextTick(() => {
      ;(confirmButtonRef.value?.ref as unknown as HTMLButtonElement).focus()
    })
  }
})

/** 总分 */
const totalScore = computed(() => {
  let value = modelScore.value[0] as any
  return value === '' || value === undefined ? add(0) : add(...modelScore.value)
})

const questionInfo = ref<ExtractApiResponse<'getQuestionStruct'>>()

/** 提交 */
const onSubmit = (data: ExtractApiResponse<'getQuestionStruct'>) => {
  questionInfo.value = data
  modalVisible.value = false
  submitModalVisible.value = true
}

/** 取消提交 */
const onCancelSubmit = () => {
  modalVisible.value = true
  submitModalVisible.value = false
}

/** 确认提交 */
const onConfirmSubmit = () => {
  if (!questionInfo.value) return
  submitModalVisible.value = false
  emit('submit', { question: questionInfo.value, scores: modelScore.value, totalScore: totalScore.value })
}
</script>

<style scoped lang="scss">
.question-name {
  font-size: $BaseFont;
  color: $NormalColor;
  margin-bottom: 10px;
}
.total-score-title {
  font-size: $MediumFont;
  font-weight: bold;
  color: $NormalColor;
}
.confirm-text {
  font-size: $BaseFont;
  color: $NormalColor;
}
.score-value {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 4px;
  color: $NormalColor;
}
.score-unit {
  font-size: $BaseFont;
  color: $NormalColor;
}
.confirm-button {
  width: 90px;
}
</style>
