<script setup lang="ts">
interface Props {
  index: number
  data: any
}
const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'change', data: any): void
}>()

const form = reactive({ name: '', type: 1, question_stem: '', rule_mode: 1, score: 10, min_score: 0 })

watchEffect(() => {
  const score = props.data.score ? parseFloat(props.data.score) : 0
  const minScore = props.data.min_score ? parseFloat(props.data.min_score) : 0
  Object.assign(form, props.data, { score, min_score: minScore })
})

watch(form, value => emit('change', value), { deep: true })

function handleScoreChange(value?: number) {
  form.min_score = value ? Math.min(value, form.min_score) : form.min_score
}
</script>

<template>
  <div class="report-design-item">
    <el-row :gutter="40">
      <el-col :span="6">
        <el-form-item
          label="思考题组件名称"
          label-width="130px"
          :prop="'detail_list.' + index + '.name'"
          :rules="[{ required: true, message: '请输入' }]">
          <el-input v-model="form.name" placeholder="例：实验扩展思考" maxlength="20" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="分值" prop="score">
          <el-input-number :min="0" v-model="form.score" @change="handleScoreChange" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="评分规则" prop="rule_mode">
          <el-radio-group v-model="form.rule_mode">
            <el-radio :label="1">人工评分</el-radio>
            <!-- <el-radio :label="2">自动评分</el-radio> -->
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="最低分" prop="min_score">
          <el-input-number :min="0" :max="form.score" v-model="form.min_score" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="思考题题干内容" label-width="130px" :prop="'detail_list.' + index + '.question_stem'">
      <el-input
        type="textarea"
        v-model="form.question_stem"
        :autosize="{ minRows: 4 }"
        show-word-limit
        maxlength="200" />
    </el-form-item>
  </div>
</template>
