<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,
  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 })

function handleScoreChange(value: number) {
  form.min_score = Math.min(value, form.min_score)
  form.has_score = Math.min(value, form.has_score)
  form.no_score = Math.min(value, form.no_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" 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" :max="form.score" v-model="form.has_score" />
            </el-form-item>
            <el-form-item label="无附件" label-width="auto" style="margin-bottom: 10px">
              <el-input-number :min="0" :max="form.score" v-model="form.no_score" />
            </el-form-item>
          </template>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item
      label="附件类型"
      label-width="130px"
      :prop="'detail_list.' + index + '.categories'"
      :rules="[{ required: true, message: '请选择' }]">
      <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>
  </div>
</template>
