<template>
  <el-table
      v-loading="isLoading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;margin-top: 10px"
      :stripe="true" :border="true"
  >
    <el-table-column label="序号" type="index" width="55" align="center"></el-table-column>
    <el-table-column
        v-for="(column,index) in metaData"
        :key="column.id"
        :column-key="index.toString()"
        :prop="column.columnProp"
        :label="column.columnLabel"
        :width="column.columnWidth"
        :min-width="column.minWidth"
        :formatter="dataFormatter"
        align="center"
    ></el-table-column>
    <el-table-column v-if="labelName!==undefined&&labelName!==null&&labelName!==''" :label="labelName" width="150"
                     align="center">
      <template slot-scope="scope">
        <slot v-bind:index="scope.$index" name="status">
        </slot>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="250" align="center">
      <template slot-scope="scope" name="opt">
        <slot v-bind:index="scope.$index">
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import Vue from "vue";
import {Table, TableColumn, Loading} from "element-ui";

Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Loading);
export default {
  name: "myTable",
  props: ['metaData', 'tableData', 'labelName', 'isLoading'],
  methods: {
    handleSelectionChange(val) {
      this.$emit("selection-change", val)
    },
    dataFormatter(row, column, cellValue) {
      let columnIndex = column.columnKey;
      if (this.metaData[columnIndex].columnType === "string") {
        if (cellValue !== undefined && cellValue.length > 40) {
          return cellValue.substring(0, 40) + "..."
        }
        return cellValue;
      } else if (this.metaData[columnIndex].columnType === "date") {
        return this.getFormatDate(cellValue);
      } else if (this.metaData[columnIndex].columnType === "dict") {
        let dictList = this.metaData[columnIndex].dicts;
        for (const dict of dictList) {
          if (cellValue !== undefined && (dict.dictCode === cellValue || dict.dictCode === cellValue.toString() || (dict.dictCode === '1') === cellValue)) {
            return dict.dictValue;
          }
        }
      } else if (this.metaData[columnIndex].columnType === "time_ago") {
        return this.getTimeAgo(cellValue);
      } else if (this.metaData[columnIndex].columnType === "byte") {
        return this.getSizeInHumanRead(cellValue);
      } else if (this.metaData[columnIndex].columnType === "star") {
        const star_number = parseInt(cellValue);
        let returnStr = ""
        for (let i = 0; i < star_number; ++i) {
          returnStr += "★"
        }
        return returnStr;
      }
      if (cellValue === undefined || cellValue === "") {
        return "--";
      }
      return cellValue;
    },
    getSizeInHumanRead(byteStr) {
      const byteNumber = parseInt(byteStr);
      const KBNumber = byteNumber >> 10;
      return this.addCommasToNumber(KBNumber) + " KB";
    },
    addCommasToNumber(number) {
      return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    getFormatDate(millSeconds) {
      if (millSeconds === undefined || millSeconds.length === 0 || millSeconds === "0" || millSeconds === 0) {
        return "--";
      }
      let ct = new Date(parseInt(millSeconds));
      let month = ct.getMonth() + 1;
      month = month > 9 ? month : '0' + month;
      let day = ct.getDate() > 9 ? ct.getDate() : '0' + ct.getDate();
      let hours = ct.getHours() > 9 ? ct.getHours() : '0' + ct.getHours();
      let minutes = ct.getMinutes() > 9 ? ct.getMinutes() : '0' + ct.getMinutes();
      let seconds = ct.getSeconds() > 9 ? ct.getSeconds() : '0' + ct.getSeconds();
      return ct.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
    getTimeAgo(millSeconds) {
      if (millSeconds === undefined || millSeconds.length === 0 || millSeconds === "0" || millSeconds === 0) {
        return "未采集 *";
      }
      let latest_time = parseInt(millSeconds);
      let delta = (new Date().getTime() - latest_time) / 1000 / 60;
      if (delta < 60) {
        return parseInt(delta) + "分钟前"
      } else {
        delta /= 60;
        if (delta < 60) {
          return parseInt(delta) + "小时前"
        } else {
          delta /= 24;
          if (delta > 2) {
            return parseInt(delta) + "天前 *"
          }
          return parseInt(delta) + "天前"
        }
      }
    },
  }
}
</script>

<style>
.el-table td, .el-table th {
  text-align: center !important;
}
</style>