<script setup lang="ts">
import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
import { useConnection } from '../../../composables/useAllData'

const role = inject('role') as string

defineProps<{ node: any }>()

const operateList = [
  { label: '关注公众号', value: '0' },
  { label: '留言文本', value: '1' },
  { label: '留言图片', value: '2' },
  { label: '留言语音', value: '3' },
  { label: '留言视频', value: '4' },
  { label: '点击菜单', value: '5' },
  { label: '点击菜单会话项', value: '6' },
  { label: '扫描二维码', value: '7' },
  { label: '取消关注', value: '8' },
  { label: '其他', value: '9' }
]

const { connectionList } = useConnection()

const getConnectionLabel = function (id: string) {
  return connectionList.value.find(item => item.id === id)?.name || ''
}
</script>

<template>
  <ConfigViewTemplate :node="node">
    <el-form-item :label="role === 'student' ? '我的答案' : '学生答案'">
      {{ operateList.find(item => item.value === node.data.student?.operate)?.label || '' }}
      {{ getConnectionLabel(node.data.student?.connection_id) }}
      {{ node.data.student?.message }}
    </el-form-item>
    <el-form-item label="正确答案">
      {{ operateList.find(item => item.value === node.data.teacher?.operate)?.label || '' }}
      {{ getConnectionLabel(node.data.teacher?.connection_id) }}
      {{ node.data.teacher?.message }}
    </el-form-item>
  </ConfigViewTemplate>
</template>
