<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()

// 获取运算符列表
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">
    <div>
      <el-form-item :label="role === 'student' ? '我的答案' : '学生答案'" style="margin-bottom: 0"></el-form-item>
      <el-form-item
        v-for="(item, index) in node.data.student?.rules"
        :key="index"
        style="margin-left: 30px; margin-bottom: 0px">
        {{ userAttrList.find(c => c.id === item?.attr_id)?.name }}
        {{ getOperatorList(item.attr_type).find(c => c.value === item.operate)?.label }}
        {{ item.value }}
      </el-form-item>
    </div>
    <div>
      <el-form-item label="正确答案" style="margin-bottom: 0"></el-form-item>
      <el-form-item
        v-for="(item, index) in node.data.teacher?.rules"
        :key="index"
        style="margin-left: 30px; margin-bottom: 0px">
        {{ userAttrList.find(c => c.id === item?.attr_id)?.name }}
        {{ getOperatorList(item.attr_type).find(c => c.value === item.operate)?.label }}
        {{ item.value }}
      </el-form-item>
    </div>
  </ConfigViewTemplate>
</template>
