<script setup lang="ts">
import type { TripTemplate } from '../types'
import { useMapStore } from '@/stores/map'
import { getNameByValue, tripTemplateTypeList } from '@/utils/dictionary'

defineProps<{ data: TripTemplate }>()

const statusList = useMapStore().getMapValuesByKey('system_status')
</script>

<template>
  <el-dialog title="查看旅程模板" width="600px">
    <el-form ref="formRef" label-suffix="：">
      <el-row justify="space-between">
        <el-form-item label="模板名称" prop="name"> {{ data.name }} </el-form-item>
        <el-form-item label="旅程类型" prop="type">
          {{ getNameByValue(data.type, tripTemplateTypeList) }}
        </el-form-item>
        <el-form-item label="旅程分值" prop="score"> {{ data.score }} </el-form-item>
      </el-row>
      <el-row justify="space-between">
        <el-form-item label="是否允许学生查看解析" prop="is_view_answer">
          <span :style="`color:${data.is_view_answer === '1' ? 'var(--main-success-color)' : 'var(--main-color)'}`">
            {{ data.is_view_answer === '1' ? '允许' : '不允许' }}
          </span>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <span :style="`color:${data.status === '1' ? 'var(--main-success-color)' : 'var(--main-color)'}`">
            {{ getNameByValue(data.status, statusList) }}
          </span>
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
