<template>
  <div>
    <el-dialog title="调整默认顺序" :visible.sync="dialogTableVisible" style="height: 700px">
      <div style="height: 700px">
        <vxe-toolbar>
          <template #buttons>
            <vxe-button @click="sortUp" icon="el-icon-arrow-up"></vxe-button>
            <vxe-button @click="sortDown" icon="el-icon-arrow-down"></vxe-button>
            <vxe-button @click="sortTop" icon="el-icon-top"></vxe-button>
            <vxe-button @click="sortBottom" icon="el-icon-bottom"></vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          border="inner"
          auto-resize
          resizable
          height="auto"
          :row-config="{isHover: true}"
          :data="dataListSort"
          :key="keyNum"
          :checkbox-config="{}"
          :row-style="rowStyle"
          @cell-click="rowClick"
          :show-header="false"
        >
          <vxe-column title="" field="name" ></vxe-column>
        </vxe-table>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeSortDialog()" icon="el-icon-circle-close">关闭</el-button>
          <el-button size="small" type="primary"  @click="sortChange()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dataListSort: [],
        keyNum: 0,
        sortIndex: '',
        dialogTableVisible: false
      }
    },
    created () {
    },
    methods: {
      init (dataList) {
        this.dialogTableVisible = true
        this.dataListSort = dataList
      },
      rowClick (event) {
        this.sortIndex = event.rowIndex
      },
      sortUp () {
        let s = this.$sortUtils.sortUp(this.dataListSort, this.sortIndex)
        this.dataListSort = s.dataList
        this.sortIndex = s.index
        this.keyNum++
      },
      sortDown () {
        let s = this.$sortUtils.sortDown(this.dataListSort, this.sortIndex)
        this.dataListSort = s.dataList
        this.sortIndex = s.index
        this.keyNum++
      },
      sortTop () {
        let s = this.$sortUtils.sortTop(this.dataListSort, this.sortIndex)
        this.dataListSort = s.dataList
        this.sortIndex = s.index
        this.keyNum++
      },
      sortBottom () {
        let s = this.$sortUtils.sortBottom(this.dataListSort, this.sortIndex)
        this.dataListSort = s.dataList
        this.sortIndex = s.index
        this.keyNum++
      },
      closeSortDialog () {
        this.sortIndex = ''
        this.dataListSort = []
        this.dialogTableVisible = false
        this.$emit('refreshDataList')
      },
      rowStyle (event) {
        if (event.rowIndex === this.sortIndex) {
          return 'cursor:pointer;background-color:#e8f6f3'
        }
        return 'cursor:pointer;'
      },
      sortChange () {
        for (let i = 0; i < this.dataListSort.length; i++) {
          this.dataListSort[i].sort = i
        }
        this.loading = true
        this.$emit('dataSort', this.dataListSort)
        this.sortIndex = ''
        this.dataListSort = []
        this.dialogTableVisible = false
      }
    }
  }
</script>
