<template>
  <el-dialog title="Excel导入" :visible.sync="showDialog" width="600px" :close-on-click-modal="false" @open="opened">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="模板文件">
        <p style="margin: 0;    color: #1890ff;"><a
          :href="futuresUrl"
          download="钱包导入模板.xlsx"
        >钱包导入模板.xlsx</a></p>

      </el-form-item>
      <el-form-item label="Excel文件" prop="file">
        <el-upload
          class="upload-demo"
          drag
          :auto-upload="false"
          action=""
          accept=".xls,.xlsx"
          :file-list="fileList"
          :before-upload="beforeUpload"
          :on-change="handleFileChange"
          :on-remove="handleFileRemove"
          :limit="1"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
        </el-upload>
      </el-form-item>

    </el-form>

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

<script>
import { wmWalletInfoExcelImport } from '@/api/admin/wm-wallet-info'
import { baseUrl } from '@/utils/zipdownload'

export default {
  name: 'ExcelImport',
  props: {
    show: Boolean
  },
  data() {
    return {
      form: {
        file: null
      },
      formLoading: false,
      futuresUrl: baseUrl + '/static/excel/钱包导入模板.xlsx',
      fileList: [], // 用于存储选中的文件
      showDialog: false,
      rules: {
        file: [{ required: true, message: '文件不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    show(val) {
      this.showDialog = val
    },
    showDialog(val) {
      this.$emit('update:show', val)
    }
  },
  methods: {
    cancel() {
      this.showDialog = false
    },
    // 在上传文件之前触发
    beforeUpload(file) {
      this.form.file = file
      return false // 阻止自动上传
    },
    // 文件列表改变时触发
    handleFileChange(file, fileList) {
      this.fileList = fileList
      this.form.file = fileList.length > 0 ? fileList[0].raw : null
    },
    // 移除文件时触发
    handleFileRemove() {
      this.fileList = []
      this.form.file = null
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formLoading = true
          const _this = this
          // 创建表单数据
          const formData = new FormData()

          if (this.form.file) {
            formData.append('file', this.form.file)
          }

          wmWalletInfoExcelImport(formData).then(response => {
            _this.formLoading = false
            if (response.code === 200) {
              this.msgSuccess(response.msg)
              this.showDialog = false
              this.$emit('upload-success')
            } else {
              this.msgError(response.msg)
            }
          })
            .finally(() => {
              _this.formLoading = false
            })
        }
      })
    },
    reset() {
      this.fileList = []
      this.form = {
        file: null
      }
    },
    opened() {
      this.reset()
    }
  }
}
</script>
