<template>
  <el-dialog
    v-model="show" draggable append-to-body  title="上传缴费凭证"
    width="600px"
  >
    <el-form ref="uploadRef" :model="form" :rules="rules" label-width="100" label-suffix="：">
      <el-form-item label="缴费日期" prop="payTime">
        <el-date-picker
          v-model="form.payTime"
          style="width: 100%"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择缴费日期"
        />
      </el-form-item>
      <el-form-item label="缴费凭证" prop="payCert">
        <file-upload v-model="uploadData" :limit="1" :file-type="['png','jpg','jpeg','doc','docx','pdf','zip']" accept=".png,.jpg,.jpeg,.doc,docx,.pdf,.zip" />
        <!-- <file-upload v-model="uploadData" :limit="1" :file-type="['png','jpg','jpeg','pdf','zip']" /> -->
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remarks" type="textarea" style="width: 100%" rows="5" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="uploadSure()">确 定</el-button>
        <el-button @click="show=false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

import { ref, toRefs } from 'vue'
import _ from 'lodash'
import { submitPayment } from '@/api/exam/payment'
import { getCurrentInstance, reactive } from '@vue/runtime-core'


const { proxy } = getCurrentInstance()
const emit = defineEmits(['complete'])

const show = ref(false)
const data = reactive({
  form: {},
  rules: {
    payTime: [
      { required: true, message: '缴费日期不能为空', trigger: 'blur' }
    ],
    payCert: [
      { validator: (rule, value, callback) => {
        if (uploadData.value && uploadData.value.length > 0) {
          callback()
        } else {
          callback('请上传缴费凭证')
        }
      }, required: true, trigger: ['blur', 'change']
      }
    ]
  }
})
const { form, rules } = toRefs(data)
const uploadData = ref(null)

function uploadSure() {
  proxy.$refs['uploadRef'].validate(valid => {
    if (valid) {
      const payCert = JSON.stringify(_.map(uploadData.value, (t) => {
        return {
          name: t.name,
          url: t.url
        }
      }))

      form.value.payCert = payCert
      submitPayment(form.value).then(() => {
        proxy.$modal.msgSuccess('上传成功')
        emit('complete')
        show.value = false
      })
    }
  })
}


function open(param) {
  const { payId, payTime, payCert, remarks } = param

  form.value = {
    payId,
    payTime,
    payCert,
    remarks
  }

  if (payCert) {
    uploadData.value = JSON.parse(payCert)
  } else {
    uploadData.value = null
  }
  show.value = true
}
defineExpose({
  open
})

</script>

<style scoped>

</style>