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

const props = defineProps({ experiment_id: String })
const detail = reactive({ way: undefined, detail_list: [] })
const reportSubmitMethodText = $computed(() => {
  const map = { 1: '上传文件', 2: '在线填写' }
  return map[detail.way]
})

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

<template>
  <el-dialog title="实验报告规则" width="500px">
    <el-form :column="1" label-suffix="：" v-if="detail">
      <el-form-item label="实验报告提交方式" align="right">
        <el-row justify="space-between" style="width: 100%">
          {{ reportSubmitMethodText }}
          <el-button type="primary" v-if="detail.way === 2">
            <router-link :to="`/admin/lab/experiment/report/${experiment_id}`" target="_blank"
              >查看详细规则</router-link
            >
          </el-button>
        </el-row>
      </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>
