<script setup>
import { ref, watch, onMounted, computed } from 'vue'
import Paging from '@/components/pc/Paging/index.vue'
import InterestsItem from './downItem.vue'
import { getDownOrderList } from '@/api/user'
import { PAYSIDMAP } from '../data.ts'
const pageSize = ref(5)
const currentPage = ref(1)
const total = ref(0)
const list = ref([])
const maxPage = ref(0)
const showInvoice = ref(false)
const currentI = ref('')
const currentItem = ref('')
watch(()=>currentPage.value, () => {
  getList()
})
onMounted(() => {
  getList()
})
function pageChange(data) {
  currentPage.value = data
}
async function getList() {
  window.scrollTo(0, 0)
  let params = {
    type: '',
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }
  let res = await getDownOrderList(params)
  pageSize.value = res.pageSize
  total.value = res.total || 0
  list.value = res.list
}
</script>

<template>
  <div>
    <div v-if="total">
      <div class="order-item" v-for="(item,i) in list" :key="item.orderSn">
        <InterestsItem :item="item" :i="i"  />
      </div>
    </div>
    <div class="scene-nothing" v-else>
      <img :src="`${$cdn}images/nothing.png`" alt>
      <div>{{$t('manage.myOrders.norecord')}} 
        <!-- <a class="gotoBuy" >{{$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 './downItem.vue'
// import { mapState } from 'vuex'
// import tableList from '@/components/table'
// import {capacity, recharge, invoice} from './iconsumption'
// import Paging from '@/components/Paging'
// import vcenter from '@/components/vcenter'
// import MemberApi from '@/apis/member'
// import MallConfig from '@/config/mall'
// import { i18n } from '@/lang'

// let AMOUNTSTR = {
//   0: '￥',
//   1: '￥',
//   2: '$'
// }

// let methodStr = {
//   0: 'getMemberOrderList',
//   1: 'getChargeList',
//   2: 'getInvoiceList'
// }
// let rechargeType = {
//   0: i18n.t('manage.Spending.rechargeValue.0'),
//   '-1': i18n.t('manage.Spending.rechargeValue.-1'),
//   1: i18n.t('manage.Spending.rechargeValue.1'),
//   2: i18n.t('manage.Spending.rechargeValue.2')
// }

// let invoceStatusType = {
//   0: '未开票',
//   1: '已开票'
// }

// let invoiceType = {
//   1: '不需要发票',
//   2: '增值税普通发票',
//   3: '增值税专用发票'
// }

// export default {
//   components: {
//     tableList,
//     Paging,
//     vcenter,
//     InterestsItem
//   },
//   data () {
//     let cameraList = [
//       {
//         name: '全部',
//         id: ''
//       },
//       {
//         name: '二目充值',
//         id: 0
//       },
//       {
//         name: '会员权益',
//         id: 4
//       }
//     ]
//     return {
//       PAYSIDMAP: MallConfig.PAYSIDMAP,
//       tabHeader: capacity,
//       data: [],
//       cameraList,
//       active: 1,
//       recharge,
//       total: 30,
//       pageSize: 5,
//       currentPage: 1,
//       tabActive: false,
//       deviceActive: false,
//       max: 0,
//       activeDevice: '',
//       activeType: '全部',
//       activeId: '',
//       activeTypeId: '',
//       tabList: [
//         {
//           name: this.$t('manage.Spending.tabListMember')
//         },
//         {
//           name: this.$t('manage.Spending.tabListRecharge')
//         },
//         {
//           name: this.$t('manage.Spending.tabListInvoice')
//         },
//       ]
//     }
//   },
//   computed: {
//     ...mapState({
//       token: state => state.user.token,
//       language: state => state.language.current,
//       deviceLogin: state => state.user.deviceLogin,
//       // myexpansion: state => {
//       //   let type = Object.prototype.toString.call(state.user.myexpansion)
//       //   if (type === '[object Object]') {
//       //     return state.user.myexpansion
//       //   }
//       //   let condition = state.user.myexpansion && state.user.myexpansion !== 'null' && type !== '[object Array]'
//       //   return (condition ? JSON.parse(state.user.myexpansion) : {})
//       // },
//       mycharge: state => {
//         let type = Object.prototype.toString.call(state.user.mycharge)
//         if (type === '[object Object]') {
//           return state.user.mycharge
//         }
//         let condition = state.user.mycharge && state.user.mycharge !== 'null' && type !== '[object Array]'
//         return (condition ? JSON.parse(state.user.mycharge) : {})
//       },
//       myinvoicelist: state => {
//         let type = Object.prototype.toString.call(state.user.myinvoicelist)
//         if (type === '[object Object]') {
//           return state.user.myinvoicelist
//         }
//         let condition = state.user.myinvoicelist && state.user.myinvoicelist !== 'null' && type !== '[object Array]'
//         return (condition ? JSON.parse(state.user.myinvoicelist) : {})
//       },
//       invoicedevice: state => {
//         let type = Object.prototype.toString.call(state.user.invoicedevice)
//         if (type === '[object Object]') {
//           return state.user.invoicedevice
//         }
//         let condition = state.user.invoicedevice && state.user.invoicedevice !== 'null'
//         return (condition ? state.user.invoicedevice : [])
//       },
//       searchKey () {
//         return this.$parent.searchKey
//       }
//     })
//   },
//   watch: {
//     currentPage (newVal) {
//       this.getList()
//     },
//     language (newVal) {
//       this.active = 0
//       this.data.forEach(item => {
//         let condition = item['validDate'] === '终身有效' ? (newVal === 'en' ? 'N/A' : '终身有效') : item['validDate']
//         item['validDateStr'] = condition
//         item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.$t(`manage.shixian.${item['month']}`)
//         item['channel'] = this.$t(`manage.channelType.${item['status']}`)
//         item['amount1'] = AMOUNTSTR[item['payType']] + item['amount']
//         item['payTypeStr'] = this.$t(`manage.PAYSSTR.${item['payType']}`)
//       })
//     },
//     activeId (newVal) {
//       if (this.active === 2) {
//         this.getList()
//       }
//       this.getInvoiceMax()
//     },
//     activeTypeId (newVal) {
//       if (this.active === 2) {
//         this.getList()
//       }
//     },
//     active (newVal) {
//       switch (newVal) {
//         case 1:
//           this.tabHeader = recharge
//           break
//         case 2:
//           !this.deviceLogin && this.getAllDevice()
//           this.tabHeader = invoice
//           break
//         default:
//           this.tabHeader = capacity
//           break
//       }
//       if (newVal !== 1) {
//         this.$emit('changeSearchShow', false)
//       } else {
//         this.$emit('changeSearchShow', true)
//       }
//       this.currentPage === 1 ? this.getList() : this.currentPage = 1
//     }
//   },
//   methods: {
//     pageChange (data) {
//       this.currentPage = data
//     },
//     selectInId (item) {
//       this.activeDevice = item.childName
//       this.activeId = item.id
//     },
//     selectCamTy (item) {
//       this.activeType = item.name
//       this.activeTypeId = item.id
//     },
//     showDetail (item) {
//       this.$toast.showInvoiceDetail(item)
//     },
//     getList (searchKey = '') {
//       window.scrollTo(0, 0)
//       let str = methodStr[this.active]
//       this[str](searchKey)
//     },
//     openInvice () {
//       let params = {
//         max: this.max,
//         cameraId: this.activeId
//       };
//       (this.max && !this.deviceLogin) && this.$toast.showInvoice(params)
//     },
//     async getAllDevice (searchKey = '') {
//       let params = {
//         cameraType: ''
//       }
//       await this.$store.dispatch('getInvoiceDevice', params)
//       this.activeDevice = this.invoicedevice[0].childName
//       this.activeId = this.invoicedevice[0].id
//     },

//     // 扩容记录
//     async getConsumpList (searchKey = '') {
//       if (this.deviceLogin) {
//         searchKey = this.deviceLogin
//       }
//       let data = {
//         params: {
//           childName: searchKey.trim(),
//           pageNum: searchKey ? 1 : this.currentPage,
//           pageSize: this.pageSize
//         },
//         url: this.deviceLogin ? '/device/virtualOrder/expansionList' : '/user/virtualOrder/expansionList'
//       }
//       await this.$store.dispatch('getUserExpansion', data)
//       if (!this.myexpansion.total && searchKey && !this.deviceLogin) {
//         return this.$toast.show('warn', this.$t('toast.25'), () => {
//           this.getList()
//         })
//       }
//       console.log(this.myexpansion, 'this.myexpansion')
//       this.pageSize = this.myexpansion.pageSize
//       this.total = this.myexpansion.total || 0
//       this.data = this.myexpansion.list
//       this.data.forEach(item => {
//         let condition = item['validDate'] === '终身有效' ? (this.language === 'en' ? 'N/A' : '终身有效') : item['validDate']
//         item['validDateStr'] = condition
//         item['statusStr'] = this.$t(`manage.myOrders.${item['status']}`)
//         item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.$t(`manage.shixian.${item['month']}`)
//         item['channel'] = this.$t(`manage.channelType.${item['status']}`)
//         item['amount1'] = AMOUNTSTR[item['payType']] + item['amount']
//         item['payTypeStr'] = this.$t(`manage.PAYSSTR.${item['payType']}`)
//       })
//     },
//     getMemberOrderList () {
//       let data = {
//         snCode: this.searchKey,
//         pageNum: this.currentPage,
//         pageSize: this.pageSize
//       }
//       MemberApi.getVirtualOrderList(data).then(res => {
//         this.data = res.data.data.list
//         console.log(this.data)
//         this.total = res.data.data.total
//       })
//     },
//     async getInvoiceMax () {
//       let res = await this.$http({
//         method: 'post',
//         data: {
//           cameraId: this.activeId
//         },
//         headers: {
//           token: this.token
//         },
//         url: '/user/invoice/max'
//       })

//       let data = res.data
//       if (data.code !== 0) return
//       this.max = data.data.maxInvoice
//     },

//     // 充值记录
//     async getChargeList (searchKey = '') {
//       if (this.deviceLogin) {
//         searchKey = this.deviceLogin
//       }
//       let data = {
//         params: {
//           pageNum: searchKey ? 1 : this.currentPage,
//           pageSize: this.pageSize
//         },
//         url:`/user/virtualOrder/downloadOrderList`
//       }
//       await this.$store.dispatch('getChargeList', data)
//       if (!this.mycharge.total && searchKey && !this.deviceLogin) {
//         return this.$toast.show('warn', this.$t('toast.25'), () => {
//           this.getList()
//         })
//       }
//       this.pageSize = this.mycharge.pageSize
//       this.total = this.mycharge.total || 0
//       this.data = this.mycharge.list
//       this.data.forEach(item => {
//         item['status'] = rechargeType[item['status']]
//       })

//       console.log(this.data)
//     },

//     // 发票记录
//     async getInvoiceList () {
//       let data = {
//         params: {
//           cameraId: this.activeId,
//           pageNum: this.currentPage,
//           pageSize: this.pageSize,
//           type: this.activeTypeId
//         },
//         url: this.deviceLogin ? '/device/invoice/list' : '/user/invoice/list'
//       }

//       await this.$store.dispatch('getInvoiceList', data)
//       this.pageSize = this.myinvoicelist.pageSize
//       this.total = this.myinvoicelist.total || 0
//       this.data = this.myinvoicelist.list
//       this.data.forEach(item => {
//         item['detail'] = '详细'
//         item['money'] = '￥' + item['money']
//         item['finish'] = invoceStatusType[item['finish']]
//         item['type'] = invoiceType[item['type']]
//       })
//     },
//     handleSearch (keyword) {
//       this.getList(keyword)
//     }
//   },
//   mounted () {
//     this.getList()

//     this.$bus.$off('refreshInvoice')
//     this.$bus.$on('refreshInvoice', () => {
//       if (this.active === 2) {
//         this.getList()
//       }
//       this.getInvoiceMax()
//     })

//     document.addEventListener('click', (e) => {
//       if (this.$refs.invoiceMenu) {
//         if (!this.$refs.invoiceMenu.contains(e.target)) {
//           this.tabActive = false
//         }
//       }
//       if (this.$refs.deviceMenu) {
//         if (!this.$refs.deviceMenu.contains(e.target)) {
//           this.deviceActive = false
//         }
//       }
//     })
//   }
// }
// </script>

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