<template>
    <div class="maintenance">
      <!-- 导入按钮 -->
      <el-button type="primary" icon="plus" @click="handleOpenUploadDialog">导入 Excel</el-button>
  
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column
          v-for="(header, index) in tableHeaders"
          :key="index"
          :prop="header"
          :label="header"
        ></el-table-column>
      </el-table>
  
      <!-- 上传文件的弹窗 -->
      <el-dialog title="上传 Excel 文件" :visible.sync="uploadDialogVisible" width="30%">
        <el-upload
          action="#"
          accept=".xlsx,.xls"
          :before-upload="beforeUpload"
          :on-change="handleFileChange"
          :auto-upload="false"
          :show-file-list="false"
        >
          <el-button type="primary" icon="upload">选择文件</el-button>
          <el-button type="primary" icon="download" @click="downloadTemplate">下载模板</el-button>
        </el-upload>
        <div v-if="fileName">
          已选择文件: {{ fileName }}
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="uploadDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUploadFile">上传</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import * as XLSX from 'xlsx';
  
  export default {
    data() {
      return {
        title: 'Excel 文件处理',
        uploadDialogVisible: false, // 控制上传弹窗的显示
        tableHeaders: [], // 表头
        tableData: [], // 表格数据
        selectedFile: null, // 用户选择的文件
        fileName: '', // 文件名
      };
    },
    methods: {
      // 打开上传弹窗
      handleOpenUploadDialog() {
        this.uploadDialogVisible = true;
      },
  
      // 文件上传前的校验
      beforeUpload(file) {
        const isExcel =
          file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          file.type === 'application/vnd.ms-excel';
        if (!isExcel) {
          this.$message.error('只能上传 Excel 文件!');
          return false;
        }
  
        const requiredHeaders = ['企业名称', '统一信用代码', '所属行业', '租金价格（元/每平方米*月）'];
        const reader = new FileReader();
        reader.onload = (e) => {
          const data = e.target.result;
          const workbook = XLSX.read(data, { type: 'binary' });
  
          // 读取第一个工作表
          const sheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[sheetName];
  
          // 将工作表转换为 JSON 数据
          const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
  
          // 提取表头
          if (jsonData.length > 0) {
            const headers = jsonData[0];
            const hasRequiredHeaders = requiredHeaders.every(header => headers.includes(header));
            if (!hasRequiredHeaders) {
              this.$message.error('上传的文件格式不正确，请使用模板文件!');
              return false;
            }
          }
  
          // 如果验证通过，手动触发 handleFileChange
          this.handleFileChange({ raw: file, name: file.name });
          return true;
        };
  
        reader.readAsBinaryString(file);
        return false; // 阻止默认的上传行为
      },
  
      // 文件选择后的回调
      handleFileChange(file) {
        if (file) {
          this.selectedFile = file.raw; // 保存用户选择的文件
          this.fileName = file.name; // 保存文件名
        }
      },
  
      // 处理文件上传
      handleUploadFile() {
        if (!this.selectedFile) {
          this.$message.warning('请先选择文件！');
          return;
        }
  
        const reader = new FileReader();
        reader.onload = (e) => {
          const data = e.target.result;
          const workbook = XLSX.read(data, { type: 'binary' });
  
          // 读取第一个工作表
          const sheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[sheetName];
  
          // 将工作表转换为 JSON 数据
          const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
  
          // 提取表头和数据
          if (jsonData.length > 0) {
            this.tableHeaders = jsonData[0]; // 第一行为表头
            this.tableData = jsonData.slice(1).map((row) => {
              const rowData = {};
              this.tableHeaders.forEach((header, index) => {
                rowData[header] = row[index];
              });
              return rowData;
            });
          }
  
          this.$message.success('文件上传并解析成功！');
          this.uploadDialogVisible = false; // 关闭弹窗
        };
  
        reader.readAsBinaryString(this.selectedFile);
      },
  
      // 下载模板文件
      downloadTemplate() {
        const link = document.createElement('a');
        link.href = '/template.xlsx'; // 模板文件路径
        link.download = 'template.xlsx';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },
    },
  };
  </script>
  
  <style scoped>
  .maintenance {
    padding: 20px;
  }
  </style>