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

const form = reactive({ name: '', type: 1, notice_message: '', 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 })
})
</script>

<template>
  <div class="report-design-item">
    <el-form :model="form" label-suffix="：">
      <el-row :gutter="40">
        <el-col :span="6">
          <el-form-item label="试卷组件名称" prop="name" label-width="130px">
            <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" />
          </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" v-model="form.min_score" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="试卷组卷说明" prop="notice_message" label-width="130px">
        <el-input
          type="textarea"
          v-model="form.notice_message"
          :autosize="{ minRows: 4 }"
          show-word-limit
          maxlength="200" />
      </el-form-item>
    </el-form>
  </div>
</template>
