<!-- 组件设置 -->
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { useVueFlow } from '@vue-flow/core'

interface Props {
  model: any
  node: any
  stepNum?: number
  paramsParse?: (form: any) => any
}
const props = defineProps<Props>()

const role = inject('role') as string
const score = inject('score') as number

const { nodes } = useVueFlow()

const formRef = ref<FormInstance>()
const form = reactive({
  score: undefined,
  answer_analysis: ''
})
watchEffect(() => {
  Object.assign(form, props.model)
})

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

const step = ref(0)

// 已设置组件分值
const scoreTotal = computed(() => {
  return nodes.value.reduce((total, node) => {
    const nodeScore = node.data.teacher?.score || 0
    return total + parseFloat(nodeScore)
  }, 0)
})
// 最大可设置的分值
const maxScore = computed(() => {
  const nodeScore = props.node.data.teacher?.score || 0
  return score - (scoreTotal.value - nodeScore)
})

// 保存
async function submit() {
  await formRef.value?.validate().then(updateNode)
}

function updateNode() {
  // const params = props.paramsParse ? props.paramsParse(form) : {}
  if (props.node && role) Object.assign(props.node.data, { [role]: { ...form } })
}
</script>

<template>
  <el-dialog title="设置组件" append-to-body width="800px">
    <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：">
      <!-- 学生设置组件 -->
      <template v-if="role === 'student'">
        <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 :step="step" :model="form"></slot>
      </template>
      <!-- 老师设置组件 -->
      <template v-if="role === 'teacher'">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="组件类型">{{ node.data.type_name }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件名称">{{ node.data.name }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="组件分值" prop="score">
              <el-input-number v-model="form.score" :controls="false" :max="maxScore" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已设置组件分值">{{ scoreTotal }}</el-form-item>
          </el-col>
        </el-row>
        <el-card header="标准答案" shadow="never">
          <slot :step="step" :model="form"></slot>
        </el-card>
        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
          <el-form-item prop="answer_analysis">
            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
          </el-form-item>
        </el-card>
      </template>
    </el-form>
    <template #footer>
      <el-row justify="center" v-if="stepNum">
        <!-- <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button> -->
        <el-button @click="step--" plain auto-insert-space v-if="step >= 1">上一步</el-button>
        <el-button @click="step++" plain auto-insert-space v-if="step < stepNum">下一步</el-button>
        <el-button type="primary" auto-insert-space @click="submit().then(() => $emit('update:modelValue', false))" v-if="step === stepNum">保存</el-button>
      </el-row>
      <el-row justify="center" v-else>
        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
        <el-button type="primary" auto-insert-space @click="submit().then(() => $emit('update:modelValue', false))">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-card {
  .el-form-item:last-child {
    margin-bottom: 0;
  }
}
</style>
