<template>
  <div>
    <div v-if="total">
      <div class="order-item" v-for="(item,i) in myorder.list" :key="item.orderSn">
        <OrderItem :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: 'mallHome'})">{{$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 OrderItem from './orderItem'
import { mapState } from 'vuex'
import Paging from '@/components/Paging'
import Vue from 'vue'
export default {
  provide () {
    return {
      getList: this.getList
    }
  },
  data () {
    return {
      pageSize: 5,
      currentPage: 1,
      total: 0,
      maxPage: 0,
      showInvoice: false,
      currentI: '',
      currentItem: ''
    }
  },
  
  watch: {
    currentPage () {
      this.getList()
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      language: state => state.language.current,
      myorder: state => {
        let type = Object.prototype.toString.call(state.user.myorder)
        if (type === '[object Object]') {
          return state.user.myorder
        }
        let condition = state.user.myorder && state.user.myorder !== 'null' && type !== '[object Array]'
        return condition ? JSON.parse(state.user.myorder) : {}
      }
    })
  },
  components: {
    OrderItem,
    Paging
  },
  mounted () {
    this.getList()
  },
  methods: {
    edit (bool) {
      console.log(bool)
      this.$bus.$emit('isOrderInvoice', bool)
    },
    
    pageChange (data) {
      this.currentPage = data
    },
    async getList () {
      window.scrollTo(0, 0)
      let params = {
        type: '',
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      await this.$store.dispatch('getUserOrder', params)
      this.pageSize = this.myorder.pageSize
      this.total = this.myorder.total || 0
    },
    
    
  }
}
</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>