<template>
  <div>
    <component :is="comTable.tableColumnName" width="1px"></component>
    <!-- 选择框 -->
    <component
      :is="comTable.tableColumnName"
      v-if="comTable.tableOption.selection"
      :fixed="vaildData(comTable.tableOption.selectionFixed, config.selectionFixed)"
      type="selection"
      key="selection"
      :selectable="comTable.tableOption.selectable"
      align="center"
    ></component>
    <!-- 序号 -->
    <component
      :is="comTable.tableColumnName"
      v-if="vaildData(comTable.tableOption.index)"
      :fixed="vaildData(comTable.tableOption.indexFixed, config.indexFixed)"
      :label="comTable.tableOption.indexLabel || config.indexLabel"
      type="index"
      key="index"
      :index="indexMethod"
      align="center"
    ></component>
  </div>
</template>

<script>
import config from './config.js';
import base from '../../utils/base.js';

export default {
  name: 'comTable',
  mixins: [base()],
  components: {},
  data() {
    return {
      config: config,
    };
  },
  inject: ['comTable'],
  mounted() {
    this.setSort();
  },
  methods: {
    indexMethod(index) {
      return (
        index +
        1 +
        ((this.comTable.page.currentPage || 1) - 1) * (this.comTable.page.pageSize || 10)
      );
    },
    setSort() {
      this.rowDrop();
    },
    rowDrop() {
      if (!this.comTable.$refs.table) return;
      const el = this.comTable.$refs.table.$el.querySelectorAll(this.config.dropRowClass)[0];
      this.comTable.tableDrop('row', el, evt => {
        const oldIndex = evt.oldIndex;
        const newIndex = evt.newIndex;
        const targetRow = this.comTable.list.splice(oldIndex, 1)[0];
        this.comTable.list.splice(newIndex, 0, targetRow);
        this.comTable.$emit('sortable-change', oldIndex, newIndex);
        this.comTable.refreshTable(() => this.rowDrop());
      });
    },
  },
};
</script>
