<template>
  <div id="tableData" class="tableData">
    <el-table
      element-loading-text="数据加载中"
      v-loading="loading"
      :height="height"
      :class="type"
      ref="tableRef"
      style="width: 100%"
      empty-text="暂无信息"
      :data="tableData"
      @selection-change="handleSelectionChange"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column
        v-if="showCheckbox"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        v-for="item in headers"
        :key="item.key"
        :align="
          item.key === 'handle-editAndDelete'
            ? 'center'
            : item.align
            ? item.align
            : 'left'
        "
        :prop="item.key"
        :label="item.label"
        :width="item.headWidth"
        :show-overflow-tooltip="
          item.key !== 'strategy' &&
            item.key !== 'idea' &&
            item.key !== 'sceneNameList'
        "
      >
        <template slot-scope="scope">
          <slot v-if="item.type === 'slot'" :value="scope.row"></slot>
          <span
            class="handle-btn"
            v-else-if="item.key === 'handle-editAndDelete'"
          >
            <i
              class="el-icon-edit"
              @click="$emit('handle', scope.row, 'edit')"
            ></i>
            <el-popconfirm
              title="确定删除这条数据吗？"
              @confirm="$emit('handle', scope.row, 'delete')"
            >
              <i slot="reference" class="el-icon-delete"></i>
            </el-popconfirm>
          </span>
          <span class="handle-btn" v-else-if="item.key === 'handle-location'">
            <img
              src="../../../../assets/images/point-location.png"
              alt
              @click="handleLocation(scope.row)"
            />
          </span>
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-else-if="item.type === 'handle-switch'"
            v-model="scope.row[item.key]"
            @change="$emit('switchChange', scope.row)"
          ></el-switch>
          <span v-else-if="item.key === 'index'">{{ scope.$index + 1 }}</span>
          <span
            :title="scope.row[item.key]"
            class="gray-span-box"
            v-else-if="
              scope.row[item.key] &&
                scope.row[item.key].length &&
                (item.key === 'strategy' ||
                  item.key === 'idea' ||
                  item.key === 'sceneNameList')
            "
            v-for="(itemKey, indexKey) in scope.row[item.key]"
            :key="indexKey"
          >
            {{ itemKey }}
          </span>
          <span v-else-if="scope.row[item.key]">{{ scope.row[item.key] }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="el-pagination-box">
      <el-pagination
        v-if="showPagination"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageObj.page"
        :page-size="pageObj.pageSize"
        :total="pageTotal"
        @current-change="currentChange"
        @size-change="sizeChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "tableData",
  props: {
    hasLoading: {
      type: Boolean,
      default: false,
    },
    headers: {
      type: Array,
      default: [],
    },
    tableData: {
      type: Array,
      default: [],
    },
    clickable: {},
    showCheckbox: {
      type: Boolean,
      default: false,
    },
    showPagination: {
      type: Boolean,
      default: false,
    },
    pageTotal: {
      type: Number,
      default: 0,
    },
    pageNum: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    type: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "",
    },
    //引用类型
  },
  data() {
    return {
      loading: true,
      pageObj: {
        page: this.pageNum,
        // pageTotal: this.pageTotal,
        pageSize: this.pageSize,
      },
      popoverVisible: false,
    };
  },
  mounted() {
    if (!this.hasLoading) {
      this.loading = false;
    }
  },
  methods: {
    loadingFinish() {
      this.loading = false;
    },
    setTableCurrent(row) {
      this.$refs.tableRef.setCurrentRow(row);
    },
    sizeChange(pageSize) {
      this.pageObj.pageSize = pageSize;
      this.$emit("setTableData", this.pageObj);
    },
    currentChange(page) {
      this.pageObj.page = page;
      this.$emit("setTableData", this.pageObj);
    },
    handleSelectionChange(val) {
      this.$emit("tableCheck", val);
    },
    handleCurrentChange(val) {
      this.$emit("tableClick", val);
    },
    handleLocation(row) {
      this.$emit("handleLocation", row);
    },
    setData() {
      this.$emit("setTableData", 2);
    },
    /**
     * 滚动翻页
     */
    // handleScroll() {
    //   // scrollTop滚动距离顶部的高度
    //   // clientHeight文档的高度 不包括
    //   // scrollHeight 滚动的高度
    //   if (
    //     this.$refs[this.type].bodyWrapper.scrollTop +
    //       this.$refs[this.type].bodyWrapper.clientHeight >=
    //     this.$refs[this.type].bodyWrapper.scrollHeight - 50
    //   ) {
    //     if (this.loading) {
    //       this.pageIndex++;
    //       if (this.pageIndex <= this.totalPage) {
    //         this.setData();
    //       }
    //     }
    //   }
    // }
  },
};
</script>
<style lang="less" scoped>
.tableData {
  /deep/.el-table__body-wrapper {
    height: 600px;
    overflow-y: auto;
  }

  .gray-span-box {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .el-pagination {
    margin-top: 10px;
    margin-right: 10px;
    float: right;
  }

  .handle-btn {
    i {
      cursor: pointer;
    }
  }
}
</style>
