<!-- 查看组件设置 -->
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'

interface Props {
  node: any
}
const props = defineProps<Props>()

const emit = defineEmits(['update:modelValue'])

const role = inject('role') as string
const templateType = inject('templateType') as string

const formRef = ref<FormInstance>()
const form = reactive({
  score: undefined
})
watchEffect(() => {
  Object.assign(form, props.node.data?.student)
})

const rules = ref<FormRules>({
  score: [{ required: true, message: '请输入组件分值' }]
})

// 保存
function submit() {
  formRef.value?.validate().then(updateNode)
  emit('update:modelValue', false)
  ElMessage({ message: '保存成功', type: 'success' })
}

function updateNode() {
  if (props.node && role) Object.assign(props.node.data, { student: { ...form } })
}
</script>

<template>
  <el-dialog title="组件配置" append-to-body width="800px">
    <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：">
      <el-row justify="space-between">
        <el-form-item label="组件类型">{{ node.data.type_name }}</el-form-item>
        <el-form-item label="组件名称">{{ node.data.name }}</el-form-item>
        <el-form-item label="分值">{{ node.data.teacher?.score }} </el-form-item>
      </el-row>
      <slot></slot>
      <el-form-item label="答案解析" v-if="node.data.teacher?.answer_analysis">
        {{ node.data.teacher?.answer_analysis }}
      </el-form-item>
      <!-- 老师评分 -->
      <template v-if="role === 'teacher' && templateType === '2'">
        <el-row justify="center">
          <el-form-item label="得分">
            <el-input-number v-model="form.score" :controls="false" />
          </el-form-item>
        </el-row>
      </template>
      <!-- 学生查看评分 -->
      <template v-if="role === 'student' && templateType === '2'">
        <el-row justify="center">
          <el-form-item label="得分">{{ node.data.student?.score }}</el-form-item>
        </el-row>
      </template>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
        <el-button type="primary" auto-insert-space @click="submit" v-if="role === 'teacher' && templateType === '2'">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
