<template>
  <div class="table-container">
    <el-row v-if="attrs.btnCofig.isBtn" style="margin-bottom: 15px">
      <el-col>
        <el-button
          v-for="item in attrs.btnCofig.btnGroup"
          :key="item.icon"
          :type="item.type"
          :icon="item.icon"
          :round="item.round"
          :size="item.size"
          :loading="item.loading"
          @click="handleClick(item)"
          >{{ item.btnName }}</el-button
        >
      </el-col>
    </el-row>
    <el-table
      :max-height="attrs.maxHeight"
      :empty-text="emptyText"
      v-bind="attrs"
      v-loading="loadingTable"
      :data="tableData"
      @selection-change="selectionChange"
      ref="tableRef"
      row-key="id"
      :header-cell-class-name="headerCellClassName"
    >
      <template v-if="columns.length">
        <template v-for="(item, index) in columns">
          <column v-if="!item.hidden" :key="index" :attrs="item"></column>
        </template>
      </template>
      <slot name="column" v-else></slot>
    </el-table>
    <!-- 分页 -->
    <div
      v-if="pageConfig.isPagination"
      class="pagination-container"
      :style="{ textAlign: pageConfig.position || 'right' }"
    >
      <el-pagination
        background
        :hide-on-single-page="false"
        :current-page="pageConfig.pageData.page"
        :page-sizes="[10, 15, 20, 25, 30, 35, 40]"
        :page-size="pageConfig.pageData.size"
        layout="total,prev, pager, next, jumper, ->, sizes"
        :total="pageConfig.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Sortable from "sortablejs";
import { objectMerge, debounce } from "@/utils";
import column from "./column";
export default {
  props: {
    attrs: {
      type: Object,
      default: {
        border: true,
        isDragSort: false,
        btnCofig: {
          isBtn: true,
          btnGroup: [
            {
              type: "primary", // text、primary、danger
              icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
              btnName: "搜索",
              size: "mini", // medium / small / mini
              round: false,
              loading: false,
              event: "searchBtn",
            },
          ],
        },
      },
    },
    emptyText: {
      type: String,
      default: "暂无数据",
    },
    loadingTable: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    pageConfig: {
      type: Object,
      default: {
        isPagination: true,
      },
      required: true,
    },
  },
  components: {
    column,
  },
  data() {
    return {
      dropCol: objectMerge({}, this.columns),
      trHeight: 4,
    };
  },
  computed: {
    _attrs() {
      //默认table 参数
      const defaultParams = {};
      return Object.assign(defaultParams, this.attrs);
    },
    isHasAttr() {},
  },
  created() {
    if (this.attrs.isDragSort) {
      // 有没有复选框、有没有render
      //  this.columns
    }
  },
  mounted() {
    //阻止火狐拖拽新建新页面
    document.body.addEventListener(
      "drop",
      (event) => {
        event.preventDefault();
        event.stopPropagation();
      },
      false
    );
    if (this.tableData.length) {
      this.getTrCurrentHeight();
      window.addEventListener("resize", this.getTrCurrentHeight);
      // 拖拽行更新排序
      // this.rowDrop();
      // 拖拽列更新排序
      this.columnDrop();
    }
  },
  destroyed() {
    if (this.tableData.length) {
      window.removeEventListener("resize", this.getTrCurrentHeight);
    }
  },

  methods: {
    getTrCurrentHeight: debounce(function () {
      this.$nextTick(() => {
        const trEl =
          this.$refs.tableRef.$refs.bodyWrapper.children[0].children[1]
            .children[0].clientHeight;
        this.trHeight = trEl;
        // console.log(this);
      });
    }, 800),

    // 给表头列添加className
    headerCellClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex !== 0) {
        return "el-table_1_column";
      }
    },
    useTableFunc(FuncName, ...params) {
      if (!this.$refs["el-table"]) {
        return console.warn("访问不到el-table");
      }
      if (!FuncName) {
        return console.error("请传入tabel方法名字");
      }
      this.$refs["el-table"][FuncName](params[0]);
    },
    // table复选框事件
    selectionChange(e) {
      console.log(e);
      this.$emit("selectionEvent", e);
    },
    // 条数变化
    handleSizeChange(e) {
      this.$emit("sizeChange", e);
    },
    // 页码变化
    handleCurrentChange(e) {
      this.$emit("currentChange", e);
    },
    // btn点击事件注册
    handleClick(item) {
      this.$emit(item.event, item);
    },
    // 拖拽行更新排序
    rowDrop() {
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      console.log("wrapperTr:", wrapperTr);
      this.sortable = Sortable.create(wrapperTr, {
        sort: this.attrs.isDragSort,
        animation: 100,
        delay: 0,
        handle: ".move", // 只有带move类名的元素才能拖动,多选框禁止拖动
        onEnd: (evt) => {
          // 因为手动加了一个多选框, 不在表头循环数组内, 所以这里减1
          let oldIndx = evt.oldIndex - 1;
          let newIndx = evt.newIndex - 1;
          const oldItem = this.dropCol[oldIndx];
          // 真正改变列数据--变化列头，就能实现列拖动 列数据按列头索引取值 {{ scope.row[dropCol[index].prop] }}
          this.dropCol.splice(oldIndx, 1); // 删除旧一行 删除为1
          this.dropCol.splice(newIndx, 0, oldItem); // 插入新一行 插入为0
        },
      });
    },
    // 拖拽列更新排序
    columnDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        sort: this.attrs.isDragSort,
        animation: 100,
        delay: 0,
        onEnd({ newIndex, oldIndex }) {
          console.log("onEnd:", newIndex, oldIndex);
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        },
      });
    },
  },
  watch: {
    data() {
      this.$nextTick(() => {
        this.useTableFunc("doLayout");
      });
    },
  },
};
</script>
<style lang="scss">

</style>