<script setup lang="ts">
import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
import { useUserAttr } from '../../../composables/useAllData'
import { stringOperatorList, numberOperatorList, dateOperatorList } from '@/utils/dictionary'

const role = inject('role') as string

defineProps<{ node: any }>()

const { userAttrList } = useUserAttr()

const getAttrListLabel = function (id: string) {
  return userAttrList.value.find(item => item.id === id)?.name || ''
}

const operatorList = function (attrId: any, operateId: any) {
  const found = userAttrList.value.find(item => item.id === attrId)
  return found ? getOperatorList(found.type).find(item => item.value === operateId)?.label || '' : ''
}

// 获取运算符列表
function getOperatorList(type: string) {
  if (type === '1') return stringOperatorList
  if (type === '2' || type === '3') return numberOperatorList
  if (type === '4' || type === '5') return dateOperatorList
  return stringOperatorList
}
</script>

<template>
  <ConfigViewTemplate :node="node">
    <el-form-item :label="role === 'student' ? '我的答案' : '学生答案'">
      {{ getAttrListLabel(node.data.student?.attr_id) }}
      {{ operatorList(node.data.student?.attr_id, node.data.student?.operate) }}
      {{ node.data.student?.value }}
    </el-form-item>
    <el-form-item label="正确答案">
      {{ getAttrListLabel(node.data.teacher?.attr_id) }}
      {{ operatorList(node.data.teacher?.attr_id, node.data.teacher?.operate) }}
      {{ node.data.teacher?.value }}
    </el-form-item>
  </ConfigViewTemplate>
</template>
