<template>
  <div class="root_container">
    <div class="content_container">
      <div v-if="fileContent !== null" :style="{ height: tableHeight }" class="content_div">{{ fileContent }}</div>
      <div v-else class="content_div">日志加载中...</div>
    </div>
  </div>
</template>
<script>
import { formatTimeToStr } from "./../../utils/date";
import { getLogDetails } from "./../../api/log/log";
import { Message } from "element-ui";
import JSZip from 'jszip';
import axios from 'axios';
export default {
  data() {
    return {
      logList: [],

      id: '0',

      tableHeight: "0px",

      fileContent: null,

      //分页数据
      totalCount: 0,
      currentPage: 1,
      pageSize: 50,
    };
  },
  mounted: function () {
    this.tableHeight = this.$store.state.screenHeight - 120 + "px";

    if (this.$route.query.id) {
      this.id = this.$route.query.id;
    }

    // 在组件挂载后，加载文本文件
    this.loadTextFile();
  },
  watch: {
    "$store.state.screenHeight": function (val) {
      this.tableHeight = val - 150 + 18 + "px";
    },
  },
  methods: {
    async downloadAndExtract(url) {
      try {
        // 下载 ZIP 文件
        const response = await axios.get(url, { responseType: 'arraybuffer' });
        // 解压缩 ZIP 文件
        const zip = await JSZip.loadAsync(response.data);
        // 读取文件内容
        this.fileContent = "";
        await Promise.all(
          Object.keys(zip.files).map(async (filename) => {
            const file = zip.files[filename];
            const content = await file.async('text');
            this.fileContent = content;
          })
        );
      } catch (error) {
        console.error('Error:', error);
      }
    },

    loadTextFile() {
      getLogDetails(this.id).then(res => {
        console.log(res);
        const fileUrl = res.data.data.url; // 替换成你的文本文件地址

        this.downloadAndExtract(fileUrl)
        
        // axios.get(fileUrl)
        //   .then(response => {
        //     // 更新文件内容数据
        //     this.fileContent = response.data;
        //   })
        //   .catch(error => {
        //     console.error('Error loading text file:', error);
        //   });
      }).catch(e => {
        console.log(e);
      })
    },
    //页面发生变化
    pageChange(page) {
      this.currentPage = page;

      this.onObtainList();
    },
  },
};
</script>
<style lang="scss" scoped>
.root_container {
  position: relative;
}

.content_container {
  border-top: 1px solid #eee;
  color: #333;
  font-size: 14px;
  
}

.content_div {
  white-space: pre-line;
  border: 1px solid #eee;
  overflow: auto;
  margin: 16px;
  padding: 16px;
  line-height: 26px;
}

.content_container ul,
.content_container li,
.content_container p {
  padding: 0;
  margin: 0;
  list-style: none;
}

.item_time {
  margin-top: 4px;
  margin-left: 18px;
  padding-right: 5px;
  font-weight: 700;
  display: inline-block;
  color: #333;
  font-size: 12px;
  white-space: nowrap;
}

.header {
  padding-top: 18px;
  padding-left: 18px;
}

.item_index {
  display: inline-block;
  color: #333;
  height: 17px;
  font-size: 12px;
  margin-right: 5px;
  background-color: rgba(0, 86, 144, 0.1);
  border-radius: 2px;
  padding: 1px 3px !important;
  margin: 2px 0;
}

.log_list {
  overflow: auto;
}

.log_list .log_item {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.log_container {
  color: #666666;
  font-size: 12px;
  line-height: 16px;
  display: flex;
  font-weight: 700;
}

.item_content {
  flex: 1;
}

.item_content .item_content_item {
  display: flex;
  width: 100%;
}

.item_msg {
  margin: 2px 0;
  padding: 1px 3px !important;
  display: inline-block;
  margin-left: 5px;
  flex: 1;
  margin-right: 10px;
  width: 1px;
  word-wrap: break-word;
}

.time_container {
  display: flex;
  padding-top: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.time_container .time_select {
  display: inline-block;
  flex: 25%;
  width: 100%;
  padding: 8px 0;
  cursor: pointer;
  color: #373d41;
  font-size: 12px;
  text-align: center;
}

.time_container .time_select:hover {
  background-color: #e5f2fb;
  color: #0070cc;
}

.item_select_hover {
  background-color: #e5f2fb;
  color: #0070cc;
}

.pager {
  position: absolute;
  top: 26px;
  right: 18px;
  display: flex;
}
</style>