<template>
  <div>
    <div v-if="total">
      <div class="order-item" v-for="(item,i) in data" :key="item.orderSn">
        <InterestsItem :item="item" :i="i" @isOrderInvoice="edit"  />
      </div>
    </div>
    <div class="scene-nothing" v-else>
      <img :src="`${$cdn}images/nothing.png`" alt>
      <div>{{$t('manage.myOrders.norecord')}} 
        <a class="gotoBuy" @click="$router.push({name: 'member'})">{{$t('manage.gotoBuy')}}</a>
      </div>
    </div>
    <div class="paging" v-if="total">
      <Paging @clickHandle="pageChange" @maxPage="data=>maxPage=data" :current="currentPage" :total="total" :equable="pageSize"/>
    </div>
  </div>
</template>

<script>
import InterestsItem from './interestsItem'
import { mapState } from 'vuex'
import Paging from '@/components/Paging'
import MemberApi from '@/apis/member'

export default {
  provide () {
    return {
      getList: this.getList
    }
  },
  data () {
    return {
      pageSize: 5,
      currentPage: 1,
      data: [],
      total: 0,
      maxPage: 0,
      showInvoice: false,
      currentI: '',
      currentItem: ''
    }
  },
  
  watch: {
    currentPage () {
      this.getMemberOrderList()
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      language: state => state.language.current
    })
  },
  components: {
    InterestsItem,
    Paging
  },
  mounted () {
    this.getMemberOrderList()
  },
  methods: {
    edit (bool) {
      console.log(bool)
      this.$bus.$emit('isOrderInvoice', bool)
    },
    pageChange (data) {
      this.currentPage = data
    },
    getMemberOrderList () {
      let data = {
        snCode: '',
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      MemberApi.getVirtualOrderList(data).then(res => {
        this.data = res.data.data.list
        this.total = res.data.data.total
      })
    },
    
    
  }
}
</script>

<style lang="less" scoped>
.scene-nothing {
  text-align: center;
  padding: 42px 0 210px 0;
  img {
    padding-bottom: 22px;
  }
  div {
    font-size: 16px;
    color: #969696;
  }
}
</style>