<template>
  <div class="project-search" v-if="type !== 'xls'">
    <div style="width: 50%" v-if="dataList.length !== 0">
      <div v-for="item in dataList" :key="item.id" class="listClass">
        <img
          :src="item.url"
          alt=""
          style="width: 150px; height: 150px; padding: 10px 10px 10px 0"
        />
        <div v-html="item.content"></div>
      </div>
    </div>
    <div
      v-else
      style="
        width: 50%;
        font-size: 25px;
        margin: 300px auto;
        color: #909399;
        text-align: center;
      "
    >
      暂无解析数据
    </div>
    <!-- <div style="width: 50%">
      <iframe :src="documentUrl" width="100%" height="822px"></iframe>
    </div> -->
    <div style="width: 50%">
      <!-- 文件预览组件 -->
      <file-preview :file-url="documentUrl" :file-type="type" />
    </div>
  </div>
  <div v-else>
    <!-- <div
      id="luckysheet"
      ref="luckysheet"
      style="width: 100%; height: 500px"
    ></div> -->
    <div v-if="excelDataList.length > 0" class="excel-table">
      <div v-for="(sheet, sheetIndex) in excelDataList" :key="sheetIndex">
        <!-- <h3>{{ sheet.title || `Sheet ${sheetIndex + 1}` }}</h3> -->
        <table>
          <thead>
            <tr>
              <th v-for="(header, index) in sheet.data[0]" :key="index">
                {{ header }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, rowIndex) in sheet.data.slice(1)" :key="rowIndex">
              <td v-for="(cell, cellIndex) in row" :key="cellIndex">
                {{ cell }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>
    
    <script>
import { mapGetters } from "vuex";
import { searchTaskInfo } from "@/api/knowledge";
import LuckyExcel from "luckyexcel";
import FilePreview from "@/components/FilePreview/index.vue"; // 新增文件预览组件
export default {
  components: {
    FilePreview, // 注册文件预览组件
  },
  computed: {
    ...mapGetters(["roleInfo", "authList"]),
  },

  data() {
    return {
      queryForm: {
        document_id: "",
      },
      dataList: [],
      conten: "",
      documentUrl: "",
      type: "",
      excelDataList: [],
      isFileViewable: false,
      supportedFileTypes: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'jpg', 'jpeg', 'png', 'gif'],
    };
  },
  mounted() {
    this.queryForm.document_id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.checkFileType();
    this.search();
  },
  methods: {
    checkAuth(path) {
      if (this.roleInfo.is_admin == 1) {
        return true;
      }
      /* let auth=this.authList.filter(o=>o.type==999 && o.path==path);
            if(auth.length>0){
              return true;
            } */
      return true;
    },
    checkFileType() {
      this.isFileViewable = this.supportedFileTypes.includes(this.type);
    },

    search() {
      searchTaskInfo(this.queryForm)
        .then((res) => {
          this.dataList = res.data.tasks;

          if (this.isFileViewable) {
            this.documentUrl = res.data.documentUrl;
          } else {
            console.log("文件类型不支持预览");
            // 可以在这里添加下载按钮的逻辑
          }
        })
        .catch((error) => {
          console.error("获取数据时出错:", error);
        });
    },

    parseExcelData(tasks) {
      return tasks
        .filter((task) => task.content)
        .map((task, index) => {
          let content = task.content;
          if (typeof content !== "string") return null;

          // Remove the title row if it exists
          const titleRowMatch = content.match(/^#.*?\n/);
          if (titleRowMatch) {
            content = content.slice(titleRowMatch[0].length);
          }

          // Split the content into rows and remove empty rows
          const rows = content
            .split("\n")
            .map((row) => row.trim())
            .filter((row) => row !== "")
            .filter((row) => !row.match(/^\|[-:]+\|[-:]+\|$/)) // Remove separator row
            .map((row) =>
              row
                .split("|")
                .map((cell) => cell.trim())
                .filter((cell) => cell !== "")
            );

          // Remove the header row if it contains "Unnamed" columns
          if (
            rows.length > 0 &&
            rows[0].some((cell) => cell.startsWith("Unnamed:"))
          ) {
            rows.shift();
          }

          return {
            title: task.title || `Sheet ${index + 1}`,
            data: rows,
          };
        })
        .filter((sheet) => sheet !== null && sheet.data.length > 0);
    },
  },
};
</script>
    
    <style lang="scss" scoped>
.project-search {
  display: flex;
  padding: 10px;
  font-size: 12px;
}
.listClass {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.excel-table {
  width: 100%;
  overflow-y: auto;
  table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
  }

  th,
  td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    white-space: nowrap;
  }

  th {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
}

.no-data {
  font-size: 18px;
  color: #909399;
  text-align: center;
  margin-top: 50px;
}
</style>
    