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

const props = defineProps({ experiment_id: String })
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.experiment_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="是否允许查看成绩明细" align="right">{{ canViewText }}</el-form-item>
      <el-form-item label="实验成绩规则" align="right">
        <el-form label-suffix="：">
          <el-form-item :label="item.name" v-for="(item, index) in detail.rule_list" :key="index">
            {{ item.percent }}%
          </el-form-item>
        </el-form>
      </el-form-item>
    </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>
