<template>
  <el-dialog
    :title="title"
    :model-value="visible"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleCancel"
    @update:model-value="val => emit('update:visible', val)"
  >
    <div style="padding: 10px 0;">
      <el-upload
        drag
        action=""
        :auto-upload="false"
        :file-list="fileList"
        :on-change="handleFileChange"
        :show-file-list="true"
        :limit="1"
      >
        <i class="el-icon-upload" style="font-size:48px;color:#409EFF;"></i>
        <div class="el-upload__text" style="font-size:16px;color:#909399;">点击或拖拽文件到此处进行上传</div>
      </el-upload>
    </div>
    <div style="text-align:center;margin-top:20px;">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';
const props = defineProps({
  visible: Boolean,
  title: {
    type: String,
    default: '上传'
  },
  loading: Boolean,
  fileList: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(['update:visible', 'file-change', 'confirm', 'cancel']);

const handleFileChange = (file, fileList) => {
  emit('file-change', file, fileList);
};
const handleConfirm = () => {
  emit('confirm');
};
const handleCancel = () => {
  emit('cancel');
  emit('update:visible', false);
};

watch(() => props.visible, (val) => {
  if (!val) emit('cancel');
});
</script>

<style scoped>
</style>
