<template>
  <div class="rest-list">
    <div class="list-wrapper">
      <el-table v-loading="isLoading" :data="gameHot" style="width: 100%" :stripe="true">
        <el-table-column prop="order_number" label="订单号" width="180"/>
        <el-table-column prop="appname" label="游戏名称" width="120" />
        <el-table-column prop="game_product_name" label="道具名称" width="120" />
        <el-table-column prop="order_amount" label="道具数量" width="120" />
        <el-table-column prop="order_submit_time" label="创建时间" width="180">
          <template #default="scope">
            <div>
              {{ parseTime(scope.row.order_submit_time, '') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="order_asynch_time" label="付款时间" width="180">
          <template #default="scope">
            <div>
              {{ scope.row.order_asynch_time? parseTime(scope.row.order_asynch_time, ''):'-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="channel_name" label="支付方式" width="120" />
        <el-table-column prop="order_submit_time" label="订单状态" width="120" >
          <template #default="scope">
            <div>
              {{ status[scope.row.order_status] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="target_role_id" label="游戏订单号" width="190"/>
        <el-table-column prop="out_trade_no" label="支付平台订单号" width="260" />
      </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="userOrder" @resetPage="resetPage" @pagePlus="addPage">
      <template #listItem="listItem">
        <div class="item" >
          <van-cell-group inset >
            <van-cell title="游戏名称" :value="listItem.row.appname" />
            <van-cell title="订单号" :value="listItem.row.order_number" />
            <van-cell title="游戏订单号" :value="listItem.row.target_role_id" />
            <van-cell title="支付平台订单号" :value="listItem.row.out_trade_no" />
            <van-cell title="道具名称" :value="listItem.row.game_product_name" />
            <van-cell title="道具数量" :value="listItem.row.order_amount" />
            <van-cell title="支付方式" :value="listItem.row.channel_name" />
            <van-cell title="订单状态" :value="status[listItem.row.order_status]" />
            <van-cell title="创建时间" :value="parseTime(listItem.row.order_submit_time, '{y}-{m}-{d} {h}:{i}:{s}')" />
            <van-cell title="付款时间" :value="parseTime(listItem.row.order_asynch_time, '')" />
          </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 { userOrder } from '@/api/index'
import vantList from '@/components/vantList.vue'
import { parseTime } from '@/utils/index'

// const img:any = inject('img')
// const router = useRouter()
// const route = useRoute()
// const { user } = useStore()
// showSuccessToast('成功文案')
// showFailToast('失败文案')
const gameHot: any = ref([])
const isLoading = ref<boolean>(false)
const vanList = ref<any>()
// const token = ref<string | null>(localStorage.getItem('token'))
// const user = useStore('user')

const pageConfig = reactive({
  page: 1,
  pagesize: 10,
  total: 0
})
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  pageConfig.page = val
  getTableData()
}
const status = ref<any[]>([])
const getTableData = async() => {
  const params = {
    page: pageConfig.page,
    pagesize: pageConfig.pagesize
  }
  isLoading.value = true
  await userOrder(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.total || 0
      status.value = res.data.data.status
    }
  }).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>
