<template>
  <el-dialog :title="title" v-model="visible" width="500px" append-to-body @close="handleClose">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入名称" />
      </el-form-item>

      <el-form-item label="上传文件" prop="file">
        <div class="upload-container">
          <el-upload
            class="upload-demo"
            action="#"
            :on-change="handleFileChange"
            :file-list="fileList"
            :auto-upload="false"
            :limit="1"
            accept=".xlsx,.xls"
          >
            <template #trigger>
              <el-button type="primary">点击上传</el-button>
            </template>

            <template #tip>
              <div class="el-upload__tip">
                <el-link type="primary" @click="downloadTemplate">
                  <el-icon name="download" /> 模板下载
                </el-link>
                |
                <el-button link @click="openPreview">
                  <el-icon name="document" /> 预 览
                </el-button>
              </div>
            </template>
          </el-upload>
        </div>
      </el-form-item>

      <el-form-item label="备注" prop="description">
        <el-input v-model="formData.description" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: Boolean,
  title: String,
  formData: Object,
  rules: Object,
  fileList: Array
});

const emit = defineEmits(['update:modelValue', 'submit', 'cancel', 'file-change', 'download-template', 'open-preview']);

const visible = ref(false);
const formRef = ref(null);

const buttonLoading = ref(false);

const handleClose = () => {
  emit('update:modelValue', false);
};

const handleFileChange = (file) => {
  emit('file-change', file);
};

const downloadTemplate = () => {
  emit('download-template');
};

const openPreview = () => {
  emit('open-preview');
};

const submitForm = () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      buttonLoading.value = true;
      try {
        const formData = new FormData();

        if (props.fileList.length > 0 && props.fileList[0].raw) {
          formData.append('file', props.fileList[0].raw);
        } else {
          buttonLoading.value = false;
          return;
        }

        formData.append('name', props.formData.name || '');
        formData.append('description', props.formData.description || '');

        await emit('submit', formData);
        buttonLoading.value = false;
      } catch (error) {
        buttonLoading.value = false;
      }
    }
  });
};

const cancel = () => {
  emit('cancel');
};
</script>
