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

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

const form = reactive({
  name: '',
  type: 1,
  categories: [],
  rule_mode: 1,
  score: 10,
  min_score: 0,
  has_score: 0,
  no_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
  const hasScore = props.data.has_score ? parseFloat(props.data.has_score) : 0
  const noScore = props.data.no_score ? parseFloat(props.data.no_score) : 0
  Object.assign(form, props.data, { score, min_score: minScore, has_score: hasScore, no_score: noScore })
})

watch(form, value => emit('change', value), { deep: true })
</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" v-if="form.rule_mode === 1" />
            <template v-else>
              <el-form-item label="有附件" label-width="auto" style="margin-right: 10px; margin-bottom: 10px">
                <el-input-number :min="0" v-model="form.has_score" />
              </el-form-item>
              <el-form-item label="无附件" label-width="auto" style="margin-bottom: 10px">
                <el-input-number :min="0" v-model="form.no_score" />
              </el-form-item>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="附件类型" prop="categories" label-width="130px">
        <el-checkbox-group v-model="form.categories">
          <el-checkbox :label="1">实验截图</el-checkbox>
          <el-checkbox :label="2">本地文件</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </div>
</template>
