<template>
  <el-dialog class="dialogWerapper" width="40%" v-model="modelValue" :title="title" @close="handleClose">
    <form-message ref="FormRef" :disabled="disabled" v-model="formData" :rules="rules" :formList="formList" />

    <template #footer>
      <el-button type="primary" v-if="!disabled" :loading="loading" @click="handleSubmit">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref, reactive } from 'vue';
import FormMessage from '@/components/aboutTable/FormMessage.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
})

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

const visible = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  }
})

const title = ref('上传成绩')
const loading = ref(false)
const disabled = ref(false)
const FormRef = ref(null)
const formData = ref({})

const formList = reactive([
  [
    { label: "成绩", prop: "cj", type: "input" },
  ],
  [
    { label: "卷面", prop: "jm", type: "upload", limit: 1 },
  ],
])

const rules = {
  cj: [{ required: true, message: "请输入考试成绩", trigger: "change" }],
  jm: [{ required: true, message: "请输上传卷面", trigger: "change" }],
}

const open = (row = {}, type = 'updata') => {
  FormRef.value?.reset()
  visible.value = true
  disabled.value = false
  formData.value = { ...row }
  if (type === 'updata') {
    title.value = '上传成绩'
  } else {
    disabled.value = true
    title.value = '查看成绩'
  }
}

const handleClose = () => {
  visible.value = false
}

const handleSubmit = () => {
  try {
    loading.value = true
    FormRef.value.submit(res => {
      console.log(res)
      visible.value = false
    })
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

defineExpose({ open })
</script>
