<template>
  <CommonPage show-footer :title="$route.title">
    <n-data-table
      :max-height="500"
      :loading="loading"
      :columns="columns"
      :data="data"
      :bordered="true"
      :virtual-scroll="true"
      :pagination="pagination"
      remote
    />
    <!--  -->
    <n-modal v-model:show="showModal">
      <n-card
        style="width: 800px"
        title="宙斯的眷顾"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <n-data-table
          :loading="zsLoading"
          :columns="zsColumns"
          :data="zsData"
          :pagination="zsPagination"
          :bordered="false"
        />
      </n-card>
    </n-modal>
  </CommonPage>
</template>

<script setup>
import api from '../../api.js'
import { NButton } from 'naive-ui'
import { h, ref, onMounted } from 'vue'

const loading = ref(false)

const columns = ref([
  {
    title: '期数',
    key: 'periods',
    align: 'center',
  },
  {
    title: '开奖号码',
    key: 'betting_name',
    align: 'center',
  },
  {
    title: '开奖数字',
    key: 'betting_number',
    align: 'center',
  },
  {
    title: '操作人',
    key: 'name',
    align: 'center',
  },
  {
    title: '开奖时间',
    key: 'draw_time',
    align: 'center',
  },
  {
    title: '操作时间',
    key: 'add_time',
    align: 'center',
  },
  {
    title: '操作IP',
    key: 'ip',
    align: 'center',
  },
  {
    title: '操作',
    slot: 'action',
    align: 'center',
    render: (row) => {
      return [
        h(
          NButton,
          {
            strong: true,
            secondary: true,
            onClick: () => {
              openModal(row)
            },
          },
          { default: () => '查看' }
        ),
      ]
    },
  },
])

const data = ref([])

onMounted(() => {
  getData()
})

const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  onChange: (page) => {
    pagination.value.page = page
    getData()
  },
})

const getData = async () => {
  const res = await api.getZsBalloon({
    pageNum: pagination.value.page,
    pageSize: pagination.value.pageSize,
  })
  data.value = res.data.data || []
  pagination.value.itemCount = res.data.total
}

const showModal = ref(false)

const zsLoading = ref(false)

const zsColumns = ref([
  {
    title: '期数',
    key: 'Periods',
    align: 'center',
  },
  {
    title: '数字',
    key: 'PeriodsNum',
    align: 'center',
  },
  {
    title: '总投注(豆子)',
    key: 'NumberSum',
    align: 'center',
  },
  {
    title: '赔付(积分)',
    key: 'TotalCount',
    align: 'center',
  },
  {
    title: '选中用户',
    key: 'User',
    align: 'center',
  },
  {
    title: '电话号码',
    key: 'Phone',
    align: 'center',
  },
])

const zsData = ref([])

const zsPagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  onChange: (page) => {
    zsPagination.value.page = page
    getData()
  },
})

const openModal = async (row) => {
  showModal.value = true
  zsLoading.value = true
  const res = await api.getZsBalloonUser({
    periods: row.periods,
    draw_time: row.draw_time,
    pageNum: zsPagination.value.page,
    pageSize: zsPagination.value.pageSize,
  })
  zsData.value = res.data.data || []
  zsPagination.value.itemCount = res.data.total
  zsLoading.value = false
}
</script>

<style lang="scss" scoped></style>
