<script setup lang="ts">
import { getExperimentPrepare } from '../api'

interface Props {
  experiment_id: string
  student_id: string
}
const props = defineProps<Props>()

let detail = $ref<any>()
function fetchInfo() {
  getExperimentPrepare({ experiment_id: props.experiment_id, student_id: props.student_id }).then(res => {
    detail = res.data.detail
  })
}
onMounted(() => {
  fetchInfo()
})
</script>

<template>
  <el-dialog title="查看实验准备" width="800px">
    <div class="dialog-html" v-html="detail.detail" v-if="detail"></div>
    <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>

<style lang="scss" scoped>
.dialog-html {
  :deep(*) {
    max-width: 100%;
  }
}
</style>
