<script setup lang="ts">
import type { Trip } from '../types'
import TripFlow from '@/components/flow/Index.vue'
import { getStudentTrip } from '../api'

const detail = ref<Trip>()
const elements = ref([])

// 获取旅程信息
async function fetchInfo() {
  const res = await getStudentTrip()
  detail.value = res.data
  try {
    elements.value = res.data.graph ? JSON.parse(res.data.graph) : []
  } catch (error) {
    console.log(error)
  }
}
onMounted(() => {
  fetchInfo()
})
const commentVisible = ref(false)
</script>

<template>
  <AppCard>
    <el-descriptions :column="4" v-if="detail">
      <el-descriptions-item label="课程名称:">{{ detail.course_name }}</el-descriptions-item>
      <el-descriptions-item label="实验名称:">{{ detail.experiment_name }}</el-descriptions-item>
      <el-descriptions-item label="用户旅程名称:">{{ detail.experiment_itinerary_name }}</el-descriptions-item>
      <el-descriptions-item label="旅程类型:">{{ detail.experiment_itinerary_type_name }}</el-descriptions-item>
      <el-descriptions-item label="客户旅程总分:">{{ detail.score }}</el-descriptions-item>
      <el-descriptions-item label="客户旅程得分:">{{ detail.score }}</el-descriptions-item>
      <el-descriptions-item>
        <el-button type="primary" @click="commentVisible = true">教师评语</el-button>
      </el-descriptions-item>
    </el-descriptions>
    <TripFlow
      v-model="elements"
      action="view"
      role="student"
      :nodes-draggable="false"
      :nodes-connectable="false"></TripFlow>
  </AppCard>

  <el-dialog title="评语" width="500px" append-to-body v-model="commentVisible">
    {{ detail?.comment }}
    <template #footer>
      <el-row justify="center">
        <el-button auto-insert-space plain @click="commentVisible = false">关闭</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
