<template>
  <div class="rest-list">
    <div class="list-wrapper">
      <el-table :data="gameHot" style="width: 100%">
        <el-table-column prop="game_name" label="游戏名称"  />
        <el-table-column prop="total_coin" label="余额">
          <template #default="scope">
            <div>
              {{ (scope.row.total_coin/100).toFixed(2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="180" />
        <el-table-column prop="modified_at" label="修改时间" width="180" />
      </el-table>
      <div class="pagination-block">
        <el-pagination
          v-model:current-page="pageConfig.page"
          hide-on-single-page
          v-model:page-size="pageConfig.pagesize"
          layout="prev, pager, next, jumper,total"
          :total="pageConfig.total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <div class="mob-list">
    <vant-list ref="vanList" :param="{}" :pagination="pageConfig" :request="userNcoin" @resetPage="resetPage" @pagePlus="addPage">
      <template #listItem="listItem">
        <div class="item" >
          <van-cell-group inset >
            <van-cell title="游戏名称" :value="listItem.row.game_name" />
            <van-cell title="余额" :value="(listItem.row.total_coin/100).toFixed(2)" />
            <van-cell title="创建时间" :value="listItem.row.created_at" />
            <van-cell title="修改时间" :value="listItem.row.modified_at" />
          </van-cell-group>
        </div>
      </template>
    </vant-list>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
// import { useRouter, useRoute } from 'vue-router'
// import { useStore } from '@/store'
// import { showSuccessToast, showFailToast } from 'vant'
import Message from '@/utils/Message'
import { userNcoin } from '@/api/index'
import vantList from '@/components/vantList.vue'

// const img:any = inject('img')
// const router = useRouter()
// const route = useRoute()
// const { user } = useStore()
// showSuccessToast('成功文案')
// showFailToast('失败文案')
const gameHot: any = ref([])
const isLoading = ref<boolean>(true)
const vanList = ref<any>()
const pageConfig = reactive({
  page: 1,
  pagesize: 10,
  total: 0
})
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  pageConfig.page = val
  getTableData()
}
const getTableData = async() => {
  const params = {
    page: pageConfig.page,
    pagesize: pageConfig.pagesize
  }
  await userNcoin(params).then(res => {
    console.log('热门游戏', res.data)
    if (res.data.code === 200 && res.data.data) {
      gameHot.value = res.data.data.lists || []
      isLoading.value = false
      pageConfig.total = res.data.data.total || 0
    }
  }).catch(err => {
    console.log(err)

    Message.error(err.data.msg)
  })
}
const resetPage = () => {
  pageConfig.page = 1
}
const addPage = () => {
  pageConfig.page += 1
}
const platform = computed(() => {
  var u = navigator.userAgent
  return {
    mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
    iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
    iPad: u.indexOf('iPad') > -1, // 是否iPad
    webApp: u.indexOf('Safari') === -1, // 是否web应该程序，没有头部与底部
    weixin: u.indexOf('MicroMessenger') > -1 // 是否微信
  }
})
onMounted(async() => {
  getTableData()
  if (vanList.value && platform.value.mobile) {
    vanList.value.onLoad()
  }
})

</script>

<style lang="scss" scoped>
.rest-list{
  width: 100%;
  padding: 3rem;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 40rem;
  .pagination-block{
    padding-top: 1rem;
    display: flex;
    flex-direction: row-reverse;
  }
}
.mob-list{
  display: none;
  width: 100%;
  padding: 10px 0px;
  box-sizing: border-box;
  .item{
    margin-bottom: 10px;
  }
}
</style>
