<template>
  <div v-if="show">
    <el-dialog
      v-model="show" title="信息完善" :close-on-click-modal="true" width="600"
      align-center style="padding-right: 60px" @close="close"
    >
      <el-form ref="infoRef" label-width="120px" :model="form" :rules="rules">
        <!--        <el-form-item label="变更原因" prop="reason">-->
        <!--          <el-select v-model="form.reason" placeholder="请选择" style="width: 100%;">-->
        <!--            <el-option label="报错级位" value="1" />-->
        <!--            <el-option label="以前有级位无法报下一级" value="2" />-->
        <!--            <el-option label="其它" value="3" />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item v-if="type=='fileUrl'" label="附件" prop="fileUrl">
          <!--          <ImageUpload2 v-model="form.fileUrl" :limit="1" />-->
          <FileUpload
            v-model="form.fileUrl" :file-type="['pdf','png','jpg','jpeg','gif']" :limit="1" :file-size="10"
          />
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" :loading="buttonLoading" @click="submitForm">保存</el-button>
        <el-button @click="close">取消</el-button>
      </div>

    </el-dialog>
  </div>

</template>

<script setup>
import { ref, toRefs, reactive } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
import { addLevelModToRange } from '@/api/member/dataAlteration/level.js'
const buttonLoading = ref(false)
const { proxy } = getCurrentInstance()
const type = ref()
const show = ref(false)
const emit = defineEmits('lastStep')
const data = reactive({
  rules: {
    reason: { required: true, message: '请选择原因', trigger: 'blur' },
    fileUrl: { required: true, message: '请上传附件', trigger: 'blur' }
  },
  form: {}
})
const { rules, form } = toRefs(data)

function open(row, val) {
  form.value = JSON.parse(JSON.stringify(row))
  type.value = val
  show.value = true
}

function close() {
  show.value = false
  form.value = {}
  emit('lastStep')
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs['infoRef'].validate(async valid => {
    if (valid) {
      buttonLoading.value = false
      console.log(form.value.fileUrl)
      const res = await addLevelModToRange({
        reason: form.value.reason,
        fileUrl: JSON.stringify(form.value.fileUrl),
        modId: form.value.id
      })
      if (res.code == 200) {
        proxy.$modal.msgSuccess('操作成功！')
        close()
      }
      buttonLoading.value = false
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}

defineExpose({
  open
})
</script>

<style scoped lang="scss">
.box{
  padding: 50px;
}
.tdFlex {
  display: flex;
}


</style>