<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import DimensionFormFields, { type DimensionFormDraft } from './DimensionFormFields.vue'
import type { DimensionType, ModelItem } from '@/types'

export type EvalRuleSetupDraft = DimensionFormDraft

defineProps<{
  evalModels: ModelItem[]
  disabled?: boolean
}>()

const form = defineModel<EvalRuleSetupDraft>({ required: true })
const newFormRef = ref<FormInstance>()
const LLM_METRIC_TYPES: DimensionType[] = ['classification', 'metric']

const dimensionRules: FormRules<DimensionFormDraft> = {
  type: [{ required: true, message: '请选择大模型评测指标类型', trigger: 'change' }],
  eval_model: [{ required: true, message: '请选择评测大模型', trigger: 'change' }],
  eval_method: [{ required: true, message: '请选择评估方式', trigger: 'change' }],
  eval_prompt: [{ required: true, message: '请填写评估 Prompt', trigger: 'blur' }],
}

async function validate() {
  if (!newFormRef.value) return false
  try {
    return !!(await newFormRef.value.validate())
  } catch {
    return false
  }
}

defineExpose({ validate })
</script>

<template>
  <div class="rule-step">
    <el-form
      ref="newFormRef"
      :model="form"
      :rules="dimensionRules"
      label-width="130px"
      class="step-form step-form-wide"
      :disabled="disabled"
      scroll-to-error
    >
      <DimensionFormFields
        v-model="form"
        :eval-models="evalModels"
        :show-description="false"
        :show-status-settings="false"
        :allowed-types="LLM_METRIC_TYPES"
      />
    </el-form>
  </div>
</template>

<style scoped>
.step-form {
  max-width: 760px;
}

.step-form-wide {
  max-width: 920px;
}
</style>
