<template>
  <div class="common-table">
    <el-table :data="lastData" stripe>
      <el-table-column
        show-overflow-tooltip
        v-for="item in tableLabel"
        :key="item.prop"
        :label="item.label"
        :min-width="item.width ? item.width : null"
        :formatter="formatter"
        :prop="item.prop"
        :fixed="item.position"
      >
        <!-- <template slot-scope="scope">
          <span  style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="操作" :min-width="tableButton.width" fixed="right">
        <template slot-scope="scope">
          <span v-for="item in tableButton.data" :key="item.name" style="margin: 5px">
            <el-button
              :size="item.size"
              :type="item.type"
              @click="handle(scope.row, item.name)"
              >{{ item.name }}</el-button
            >
          </span>
          <!-- <el-button size="mini" type="primary" @click="handle(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { Table } from "element-ui";
/* eslint-disable */
export default {
  name: "CommonTable",

  props: {
    tableData: Array,
    tableLabel: Array,
    tableButton: Object,
  },
  data() {
    return {
      doc: {
        status_dict: {
          1: "正常",
          2: "禁用",
          3: "黑名单",
        },
      },
      lastData:[]
    };
  },
  methods: {
    blockLoading(originData, that) {
      let total = originData.length;
      // 一次插入 50 条
      let once = 50;
      //每条记录的索引
      let index = 0;
      //循环加载数据
      function loop(curTotal, curIndex, data) {
        if (curTotal <= 0) {
          return false;
        }
        //每页多少条 少于once 我们就取值
        let pageCount = Math.min(curTotal, once);
        window.requestAnimationFrame(function () {
          for (let i = curIndex; i < curIndex + pageCount; i++) {
            that.$set(that.lastData, i, data[i]);
          }
          loop(curTotal - pageCount, curIndex + pageCount, data);
        });
      }
      loop(total, index, originData);
    },

    handle(row, method) {
      this.$emit("edit", row, method);
    },

    handleDelete(row) {
      this.$emit("del", row);
    },
    formatter(row, column) {
      if (column.label == "状态") {
        return this.doc.status_dict[row.status];
      }
      //object的处理
      if (column.label == "设备分类") {
        return row.equipment_type.equipment_type_name;
      }

      if (column.label == "设备品牌") {
        return row.model_brand.brand_name;
      }
      let tempData = null;
      let temp = this.tableLabel.map((element) => {
        //标签
        if (element.label == column.label) {
          tempData = row[element.prop];
          return;
        }
      });
      return tempData;
      // return column;
    },
  },
  mounted() {
    //   console.log("tableData")
    console.log("这里的数据", this.tableData);
    //   console.log("tableLabel")
    //   console.log(this.tableLabel)
    //   console.log("config")
    //   console.log(this.config)
    this.blockLoading(this.tableData, this)
  },
};

/* eslint-disable */
</script>
<style lang="less" scoped>
.common-table {
  // 小bug 窗口大小有问题
  background-color: #fff;
  position: relative;
  .pager {
    position: absolute;
    bottom: 0;
    right: 20px;
  }
}
</style>

