<template>
  <base-form :label-width="useVW(88)" :groups="groups" :rules="rules" :items="items" :model="model">
    <template #form-item-address>
      <span class="flex items-center">
        {{ filePath }}
      </span>
    </template>
  </base-form>
</template>

<script setup lang="ts" name="ImportStandard">
/** 导入评分标准 */
import { reactive, watch, computed, ref } from 'vue'
import BaseForm from '@/components/element/BaseForm.vue'
import useFetch from '@/hooks/useFetch'
import useForm from '@/hooks/useForm'
import useOptions from '@/hooks/useOptions'
import useVW from '@/hooks/useVW'

import type { FormGroup, EpFormItem, EpFormRules } from 'global-type'

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

const { fetch: getImportFilePath, result: filePath } = useFetch('getImportFilePath')

const model = reactive<{ subjectCode: string; mainNumber?: number }>({
  subjectCode: dataModel.subject || '',
  mainNumber: dataModel.question,
})

watch([() => model.subjectCode, () => model.mainNumber], () => {
  /** 获取导入文件路径 */
  model.subjectCode &&
    model.mainNumber &&
    getImportFilePath({
      filePathType: 'MARK_STANDARD',
      subjectCode: model.subjectCode,
      mainNumber: model.mainNumber,
    })
})

watch(dataModel, () => {
  model.subjectCode = dataModel.subject || ''
  model.mainNumber = dataModel.question
})

const { defineColumn, _ } = useForm()

const rules: EpFormRules = {
  subjectCode: [{ required: true, message: '请选择科目' }],
  mainNumber: [{ required: true, message: '请选择大题' }],
}

const groups: FormGroup[] = [
  { groupTitle: '选择大题', rowKeys: ['row-1'] },
  { groupTitle: '试卷设置', rowKeys: ['row-2'] },
]

const span6 = defineColumn(_, '', { span: 6 })

const items = computed<EpFormItem[]>(() => {
  return [
    span6({
      rowKey: 'row-1',
      label: '科目',
      prop: 'subjectCode',
      slotType: 'select',
      slot: { placeholder: '选择科目', options: subjectList.value, onChange: changeModelValue('subject') },
    }),
    span6({
      rowKey: 'row-1',
      label: '大题',
      labelWidth: useVW(100),
      prop: 'mainNumber',
      slotType: 'select',
      slot: { placeholder: '选择大题', options: mainQuestionList.value, onChange: changeModelValue('question') },
    }),
    span6({
      rowKey: 'row-2',
      label: '图片路径',
      slotName: 'address',
      itemDescription: { description: '试卷图片请按路径存放' },
    }),
  ]
})
</script>

<style scoped lang="scss"></style>
