<template>
  <el-dialog
    title="导入考勤数据"
    :visible.sync="visible"
    width="500px"
    :close-on-click-modal="false"
    @close="close"
  >
    <div>
      <el-form  label-width="100px" label-position="right">
        <el-form-item label="选择文件">
          <el-upload
            ref="upload"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :data="uploadData"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-success="onUploadSuccess"
            :on-error="onUploadError"
            :on-change="handleFileChange"
            :auto-upload="false"
            :limit="1"
            :on-exceed="handleExceed"
            accept=".xlsx,.xls"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传一个xlsx/xls文件，且不超过10MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
      
      <div v-if="uploadResult" class="upload-result">
        <el-alert
          :title="uploadResult.title"
          :type="uploadResult.type"
          :description="uploadResult.description"
          show-icon
          :closable="false"
        />
      </div>
    </div>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submitUpload" :loading="uploading" >
        确定导入
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'ImportDialog',
  data() {
    return {
      visible: false,
      uploading: false,
      fileList: [],
      uploadUrl: '',
      uploadHeaders: {},
      uploadData: {},
      uploadResult: null
    }
  },
  methods: {
    init() {
      this.visible = true
      this.resetForm()
    },
    resetForm() {
      this.fileList = []
      this.uploadResult = null
      this.uploading = false
    },
    beforeUpload(file) {
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
                     file.type === 'application/vnd.ms-excel'
      const isLt10M = file.size / 1024 / 1024 < 10

      if (!isExcel) {
        this.$message.error('只能上传Excel文件!')
        return false
      }
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 10MB!')
        return false
      }
      return true
    },
    submitUpload() {
      console.log('fileList:', this.fileList)
      console.log('fileList.length:', this.fileList.length)
      
      if (!this.fileList.length || !this.fileList[0]) {
        this.$message.warning('请选择要上传的文件')
        return
      }
      
      const file = this.fileList[0]
      console.log('selected file:', file)
      
      if (!file.raw) {
        this.$message.warning('文件信息异常，请重新选择文件')
        return
      }
      
      this.uploading = true
      this.uploadResult = null
      
      const formData = new FormData()
      formData.append('file', file.raw)
      
      request({
        url: '/api/Extend/lqattendancesummary/ImportAttendanceDataFromExcel',
        method: 'POST',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        this.uploading = false
        if (res.code === 200) {
          this.uploadResult = {
            type: 'success',
            title: '导入成功',
            description: res.msg || '数据导入完成'
          }
          this.$message.success('导入成功')
          setTimeout(() => {
            this.close()
            this.$emit('refresh', true)
          }, 2000)
        } else {
          this.uploadResult = {
            type: 'error',
            title: '导入失败',
            description: res.msg || '数据导入失败，请检查文件格式'
          }
        }
      }).catch(err => {
        this.uploading = false
        this.uploadResult = {
          type: 'error',
          title: '导入失败',
          description: err.message || '网络错误，请重试'
        }
        this.$message.error('导入失败')
      })
    },
    onUploadSuccess(response, file, fileList) {
      // 这里不需要处理，因为我们使用手动上传
    },
    onUploadError(err, file, fileList) {
      this.uploading = false
      this.uploadResult = {
        type: 'error',
        title: '上传失败',
        description: '文件上传失败，请重试'
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning('只能上传一个文件，请先删除已选择的文件')
    },
    handleFileChange(file, fileList) {
      console.log('文件变化:', file, fileList)
      this.fileList = fileList
    },
    close() {
      this.visible = false
      this.resetForm()
    }
  }
}
</script>

<style scoped>
.upload-result {
  margin-top: 20px;
}

.el-upload-dragger {
  width: 100%;
}
</style>
