<template>
  <m-dialog ref="dialog" title="积分兑换记录">
    <m-table
      clearHeader
      shadow="never"
      v-loading="loading"
      :items="items"
      :headers="headers"
      :page-size="pageInfo.size"
      :page-current="pageInfo.current"
      :total="total"
      @page-change="onPageChange"
      @sort-change="onSortChange"
    >
    </m-table>

  </m-dialog>
</template>

<script>
import {
  getAccumulatePointProductHistory
} from '@/api/accumulatePoint'
export default {
  name: 'accumulatePointsMotivateHistory',
  data () {
    return {
      loading: false,
      items: [],
      headers: [
        {
          label: '兑换物品',
          prop: 'scoreProductName'
        },
        {
          label: '兑换数量',
          prop: 'num',
          align: 'center'
        },
        {
          label: '兑换积分',
          prop: 'score',
          align: 'center'
        },
        {
          label: '兑换时间',
          prop: 'createDate'
        }
      ],
      pageInfo: {
        current: 1,
        size: 10
      },
      total: 0,
      orders: [
        {
          column: 'create_date',
          asc: false
        }
      ]
    }
  },
  methods: {
    open () {
      this.$refs.dialog.open()
      this.pageInfo.current = 1
      this.onInit()
    },
    async onInit () {
      this.loading = true
      try {
        const { data } = await getAccumulatePointProductHistory({
          page: {
            ...this.pageInfo,
            orders: this.orders
          }
        })
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onPageChange (index) {
      this.pageInfo.current = index
      this.onInit()
    },
    onSortChange (orders) {
      this.orders = orders
      this.onInit()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
