<template>
  <el-dialog
    title="排序"
    :append-to-body="true"
    :modal-append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="showDialog"
    :modal="false"
    :destroy-on-close="true"
    custom-class="dialog-style list-dialog"
    width="600px"
    @close="handleClose"
    v-el-drag-dialog
  >
    <div class="cont" style="height:400px;">
      <vxe-grid row-key ref="sortTable" v-bind="sortTableOption" class="sortable-tree-demo"
                :scroll-y="{ enabled: false }" :data="sortRows"></vxe-grid>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain class="button-sty" @click="handleClose">
          <i class="el-icon-close el-icon"></i>
          取 消
        </el-button>
        <el-button type="primary" @click="saveSort" class="button-sty">
          <i class="el-icon-check el-icon"></i>
          确 定
        </el-button>
      </span>
  </el-dialog>
</template>
<script>
import Sortable from "sortablejs";
import defaultHandleMixin from "../../../../../components/xform/mixins/defaultHandle";
import scriptHttpMixin from "../../../../../components/xform/mixins/scriptHttp";


export default {
  mixins: [defaultHandleMixin, scriptHttpMixin],
  props: {
    rows: Array,
    parentTarget: null,
    sortParentRow: null,
  },
  data() {
    return {
      showDialog: true,
      sortRows: [],
      sortTableOption: {},
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initSortTable();
    })
  },
  methods: {
    saveSort() {
      this.$emit("confirm",this.sortRows);
      this.handleClose();
    },
    getI18nLabel(label, path, param) {
      return label ? this.$t2(label, path, param) : label;
    },
    initSortTable(rows) {
      this.sortRows = this.$baseLodash.cloneDeep(this.rows || []);

      let parentTarget = this.parentTarget;
      let parentGrid = parentTarget.getGridTable();

      let tableColumns = parentTarget.widget.options.tableColumns;
      let col = tableColumns[0];
      let columns = [
        {
          field: col.prop,
          title: this.getI18nLabel(col.label),
          sortable: false
        }
      ]

      let that = this;
      let tableOption = {
        vue: this,
        tableRef: 'sortTable',
        tableNameRequired: false,
        columns: [
          {
            width: 60,
            slots: {
              default: () => {
                return [
                  <span class="drag-btn">
                    <i class="el-icon-s-operation"/>
                  </span>
                ];
              },
              header: () => {
                return [
                  <el-tooltip v-model={this.showHelpTip2} content="按住后可以上下拖动排序！" enterable class="drag-btn">
                    <i
                      class="el-icon-menu "
                      onClick={() => {
                        this.showHelpTip2 = !this.showHelpTip2;
                      }}
                    />
                  </el-tooltip>
                ];
              }
            }
          },
          ...columns
        ],
        config: {
          height: 'auto',
          maxHeight: '100%'
        }
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
        this.sortTableOption = opts;
      });
      this.rowDrop();
    },
    rowDrop() {
      this.$nextTick(() => {
        const sortTable = this.$refs.sortTable;
        this.sortable1 = Sortable.create(sortTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
          handle: '.drag-btn',
          onEnd: ({newIndex, oldIndex}) => {
            const currRow = this.sortRows.splice(oldIndex, 1)[0];
            this.sortRows.splice(newIndex, 0, currRow);
          }
        });
      });
    },
    handleClose() {
      this.showDialog = false;
      this.$emit("update:visiable", false)
    }
  }
}
</script>
<style scoped>

</style>
