<!-- 批改用户旅程 -->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import TripFlow from '@/components/flow/Index.vue'
import { getStudentTripRecord, submitStudentTripRecordComment, checkStudentTripRecord } from '../api'
import { getNameByValue, tripTemplateTypeList } from '@/utils/dictionary'

const detail = ref()
const elements = ref([])

// 是否批阅
const isReviewed = computed(() => {
  return detail.value?.record.comment_status === '1'
})

function fetchRecord() {
  getStudentTripRecord().then(res => {
    const record = res.data.detail.record
    detail.value = res.data.detail
    Object.assign(form, { score: record.score ? parseFloat(record.score) : 0, comment: record.comment })
    try {
      elements.value = record.graph ? JSON.parse(record.graph) : []
    } catch (error) {
      console.log(error)
    }
  })
}
onMounted(() => fetchRecord())

const commentVisible = ref(false)
const form = reactive({ comment: '', score: 0 })

// 保存评语
function handleSubmitComment() {
  const params = { ...form, itinerary_id: detail.value?.itinerary.id }
  submitStudentTripRecordComment(params).then(() => {
    ElMessage({ message: '保存成功', type: 'success' })
    commentVisible.value = false
  })
}

// 保存
function handleSubmit() {
  // 固定旅程
  if (detail.value.itinerary.type === '2') {
    form.score = elements.value.reduce((total: number, item: any) => total + (item.data.student?.score || 0), 0)
  }
  const params = {
    ...form,
    itinerary_id: detail.value?.itinerary.id,
    graph: JSON.stringify(elements.value)
  }
  checkStudentTripRecord(params).then(() => {
    ElMessage({ message: '保存成功', type: 'success' })
    fetchRecord()
  })
}
</script>
<template>
  <AppCard v-if="detail">
    <el-descriptions :column="4">
      <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.itinerary.name }}</el-descriptions-item>
      <el-descriptions-item label="旅程类型:">
        {{ getNameByValue(detail.itinerary.type, tripTemplateTypeList) }}
      </el-descriptions-item>
      <el-descriptions-item label="客户旅程总分:">{{ detail.itinerary.score }}</el-descriptions-item>
      <el-descriptions-item label="客户旅程得分:">
        <template v-if="detail.itinerary.type === '1'">
          <el-input-number v-model="form.score" :controls="false" />
        </template>
        <template v-else>
          {{ detail.record.score }}
        </template>
      </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="teacher"
      :template-type="detail.itinerary.type"
      :nodes-draggable="false"
      :nodes-connectable="false">
      <template #footer>
        <el-row justify="center">
          <el-button type="primary" auto-insert-space @click="handleSubmit" :disabled="isReviewed">保存</el-button>
        </el-row>
      </template>
    </TripFlow>
  </AppCard>

  <el-dialog title="评语" width="500px" append-to-body v-model="commentVisible">
    <el-form :model="form">
      <el-form-item prop="comment">
        <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请填写实验整体评语" v-model="form.comment" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button auto-insert-space plain @click="commentVisible = false">取消</el-button>
        <el-button auto-insert-space plain type="primary" @click="handleSubmitComment">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
