<template>
    <div style="float: left; margin: 0px 10px; line-height: 34px;">
        <vxe-button :size="size" @click = "firstClick">第一条</vxe-button>
        <vxe-button :size="size" @click = "preClick">上一条</vxe-button>
        <vxe-button :size="size" @click = "nextClick">下一条</vxe-button>
        <vxe-button :size="size" @click = "lastClick">末一条</vxe-button>
        <span style="margin-left: 15px">当前定位:{{this.currentRow + 1}}/{{this.rowCount}}</span>
    </div>
</template>
<script>
import create from '../utils/create'

export default create({
  name: 'form-navigator',
  props: {
    size: {
      type: String,
      default: () => {
        return 'mini'
      }
    }
  },
  inject: {
    $xegrid: {
      default: null
    }
  },
  data () {
    return {
      currentRow: 0,
      xGrid: null,
      rowCount: 0,
      rows: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.refresh()
    })
  },
  methods: {
    refresh () {
      this.xGrid = this.$xegrid.$refs.xGrid
      this.rows = this.xGrid.getTableData().tableData
      this.rowCount = this.rows.length
      let record = this.xGrid.getCurrentRecord()
      this.rows.forEach((row, idx) => {
        if (row.id === record.id) {
          this.currentRow = idx
        }
      })
    },
    moveToRow (row) {
      this.xGrid.setCurrentRow(row)
      this.$xegrid.currentChangeEvent({ row })
    },
    firstClick () {
      this.currentRow = 0
      this.moveToRow(this.rows[this.currentRow])
    },
    preClick () {
      if (this.currentRow === 0) {
        this.currentRow = 0
      } else {
        this.currentRow -= 1
      }
      this.moveToRow(this.rows[this.currentRow])
    },
    nextClick () {
      if (this.currentRow < this.rowCount - 1) {
        this.currentRow += 1
      } else {
        this.currentRow = this.rowCount - 1
      }
      this.moveToRow(this.rows[this.currentRow])
    },
    lastClick () {
      this.currentRow = this.rowCount - 1
      this.moveToRow(this.rows[this.currentRow])
    }
  }
})
</script>
