<template>
  <div class="txtView" v-loading="loading">
    <el-table :data="tableData" border style="width: 100%;"
      :header-cell-style="{ background: '#f1f1f1', fontSize: '16px' }" :fit="true">
      <el-table-column :fixed="[].includes(index)" :label="item.label" :prop="item.prop"
        v-for="(item, index) in columnList" :key="item.label + '_' + index">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row[item.prop]" placement="top">
            <!-- 为每个单元格内容添加自定义的多行文本样式 -->
            <div class="multi-line-text">{{ scope.row[item.prop] }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="tv_content" v-text="content"></div> -->
  </div>
</template>

<script>
import "../../../../common/aws-sdk-2.235.1.min.js";

const getFile = url => {
  return new Promise((resolve, reject) => {
    var credentials = {
      accessKeyId: "AKIATLPEDU37QV5CHLMH",
      secretAccessKey: "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"
    }; //秘钥形式的登录上传
    window.AWS.config.update(credentials);
    window.AWS.config.region = "cn-northwest-1"; //设置区域
    let url2 = url;
    let _url2 = "";
    if (
      url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
    ) {
      _url2 = url2.split(
        "https://view.officeapps.live.com/op/view.aspx?src="
      )[1];
    } else {
      _url2 = url2;
    }
    var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
    let name = decodeURIComponent(
      _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
    );
    var params = {
      Bucket: "ccrb",
      Key: name
    };
    s3.getObject(params, function (err, data) {
      if (err) {
        console.log(err, err.stack);
        resolve({ data: 1 });
      } else {
        const fileContent = data.Body.toString("utf-8");
        resolve({ data: fileContent });
      } // sxuccessful response
    });
    // axios({
  });
};
export default {
  props: {
    url: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      content: "",
      loading: true,
      tableData: [],
      columnList: []
    };
  },
  methods: {
    getTxtContent() {
      if (!this.url) return;
      this.loading = true;
      getFile(this.url).then(res => {
        this.loading = false;
        let tableDataObj = this.formatCSVToTable(res.data);
        console.log(tableDataObj)
        this.tableData = tableDataObj.result;
        let column = [];
        tableDataObj.header.forEach((item, index) => {
          column.push({
            label: item,
            prop: `header_${index}`
          })
        })
        this.columnList = column;
        this.content = res.data;
      });
    },
    formatCSVToTable(str) {
      const result = [];
      const jsonObj = str.split("\n");
      let arrHeader = [];
      for (const i in jsonObj) {
        if (typeof jsonObj[i] === "string" && jsonObj[i].length > 0) {
          const row = `${jsonObj[i]}`;
          if (row.trim().length > 0) {
            const kv = jsonObj[i].split(",");
            if (i == 0) {
              // 获取column表头
              arrHeader = kv;
            } else {
              const obj = {};
              for (let index = 0; index < arrHeader.length; index++) {
                // 组装表格数据
                const name = `header_${index}`
                if (!arrHeader[index]) continue;
                if (!obj[name]) {
                  try {
                    if (kv[index]) {
                      obj[name] = String(kv[index]);
                    } else {
                      obj[name] = "";
                    }
                  } catch (err) {
                    obj[name] = "";
                  }
                }
              }
              result.push(obj);
            }
          }
        }
      }
      return { result: result, header: arrHeader };
    },
  },
  watch: {
    url(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getTxtContent();
      }
    }
  },
  mounted() {
    this.getTxtContent();
  }
};
</script>

<style scoped>
.txtView {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #ececec;
  padding: 0px 0px;
}

.tv_content {
  width: 100%;
  /* height: 100%; */
  box-sizing: border-box;
  background-color: #fff;
  overflow: auto;
  word-wrap: break-word;
  border-radius: 3px;
  white-space: pre;
  box-sizing: border-box;
  padding: 10px;
}

.multi-line-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 3em;
}

</style>