<script setup lang="ts">
import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
import { useMaterial, useConnection } from '../../../composables/useAllData'
import { useMapStore } from '@/stores/map'

const role = inject('role') as string

defineProps<{ node: any }>()

const materialTypeList = useMapStore().getMapValuesByKey('experiment_marketing_material_type')

const { materialList } = useMaterial()

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' ? '我的答案' : '学生答案'">
      发送{{ materialTypeList.find(item => item.value === node.data.student?.material_type)?.label }}
      {{ materialList.find(item => item.id === node.data.student?.material_id)?.name }}
      {{ getConnectionLabel(node.data.student?.connection_id) }}
    </el-form-item>
    <el-form-item label="正确答案">
      发送{{ materialTypeList.find(item => item.value === node.data.teacher?.material_type)?.label }}
      {{ materialList.find(item => item.id === node.data.teacher?.material_id)?.name }}
      {{ getConnectionLabel(node.data.teacher?.connection_id) }}
    </el-form-item>
  </ConfigViewTemplate>
</template>
