<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { ModelItem } from '@/types'
import type { GenerationControlOptions } from './types'
import GenerationOptionsPanel from './GenerationOptionsPanel.vue'

const props = defineProps<{
  options: GenerationControlOptions
  models: ModelItem[]
}>()

const emit = defineEmits<{
  'update:options': [value: GenerationControlOptions]
}>()

const validationAttempted = ref(false)
const modelValidationMessage = computed(() => (
  props.options.generationModelId === '' ? '请选择数据生成模型' : ''
))

function validate() {
  validationAttempted.value = true
  if (!modelValidationMessage.value) return true
  ElMessage.error(modelValidationMessage.value)
  return false
}

defineExpose({ validate })
</script>

<template>
  <section class="model-selection-step" aria-labelledby="model-selection-title">
    <div class="form-section">
      <div class="section-title-row">
        <div>
          <h3 id="model-selection-title">大模型选择</h3>
          <p>选择本次数据生成使用的模型，并设置统一的输出要求</p>
        </div>
      </div>

      <div class="model-form-content">
        <GenerationOptionsPanel
          :options="options"
          :models="models"
          section="model"
          :validation-message="validationAttempted ? modelValidationMessage : ''"
          @update:options="emit('update:options', $event)"
        />
      </div>
    </div>
  </section>
</template>

<style scoped lang="scss">
.model-selection-step {
  width: 100%;
}

.form-section {
  padding: 0 0 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid #edf0f5;
}

.section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  h3 {
    margin: 0 0 5px;
    color: #2f3747;
    font-size: 15px;
    font-weight: 650;
  }

  p {
    margin: 0;
    color: #8a93a3;
    font-size: 12px;
    line-height: 1.6;
  }
}

.model-form-content {
  margin-top: 16px;
}
</style>
