<script setup>
import { getExperimentGradeRule } from '../api'

const props = defineProps({ data: Object })
const detail = reactive({ is_show: undefined, rule_list: [] })
const canViewText = $computed(() => {
  const map = { 1: '是', 0: '否' }
  return map[detail.is_show]
})

function fetchInfo() {
  getExperimentGradeRule({ experiment_id: props.data.id }).then(res => {
    const data = res.data.detail
    let ruleList = []
    try {
      ruleList = JSON.parse(data.rule_list).map(item => {
        return { ...item, percent: parseFloat(item.percent) }
      })
    } catch (error) {
      console.log(error)
    }
    Object.assign(detail, data, { rule_list: ruleList })
  })
}
onMounted(() => {
  fetchInfo()
})
</script>

<template>
  <el-dialog title="实验成绩规则" width="500px">
    <el-form :column="1" label-width="170px" label-position="right" label-suffix="：" v-if="detail">
      <el-form-item label="是否允许查看成绩明细">{{ canViewText }}</el-form-item>
      <el-form-item label="实验成绩规则" style="margin: 0"> </el-form-item>
      <el-form label-suffix="：" style="width: 100%" label-width="240px">
        <el-form-item :label="item.name" v-for="(item, index) in detail.rule_list" :key="index" style="margin: 0">
          <div style="width: 100%; display: flex; text-align: left">
            <span style="flex: 1">{{ item.percent }}%</span>
            <span style="min-width: 90px">满分：{{ data.score }}</span>
          </div>
        </el-form-item>
      </el-form>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
