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

    <template #footer>
      <el-button type="primary" :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({
  title: {
    type: String,
    default: '上传成绩'
  },
  modelValue: {
    type: Boolean,
    default: false
  },
})

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

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

const loading = ref(false)
const FormRef = ref(null)
const formData = ref({})

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

const rules = {
  cj: [{ required: true, message: "请输入考试成绩", trigger: "change" }],
  sfzh: [{ required: true, message: "请输入证件号码", trigger: "change" }],
}

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
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .dialogWerapper {
    .el-dialog__header {
      background: none !important;
    }
  }
}
</style>
