<!-- 工作台页面：大富翁色子游戏数据统计 -->
<template>
  <div>
    <CardList />

    <template v-if="isStatisticsDashboard">
      <ElRow :gutter="20">
        <ElCol :sm="24" :md="12" :lg="10">
          <ActiveUser />
        </ElCol>
        <ElCol :sm="24" :md="12" :lg="14">
          <SalesOverview />
        </ElCol>
      </ElRow>
    </template>

    <ElRow :gutter="20">
      <ElCol :sm="24" :md="12" :lg="12">
        <NewPlayerList />
      </ElCol>
      <ElCol :sm="24" :md="12" :lg="12">
        <WalletRecordList />
      </ElCol>
    </ElRow>

    <ElRow :gutter="20">
      <ElCol :sm="24" :md="24" :lg="24">
        <PlayRecordList />
      </ElCol>
    </ElRow>
  </div>
</template>

<script setup lang="ts">
  import CardList from './modules/card-list.vue'
  import ActiveUser from './modules/active-user.vue'
  import SalesOverview from './modules/sales-overview.vue'
  import WalletRecordList from './modules/wallet-record-list.vue'
  import NewPlayerList from './modules/new-player-list.vue'
  import PlayRecordList from './modules/play-record-list.vue'
  import { useCommon } from '@/hooks/core/useCommon'
  import { useUserStore } from '@/store/modules/user'

  defineOptions({ name: 'Console' })

  const userStore = useUserStore()

  /** 统计页额外展示充值图表 */
  const isStatisticsDashboard = computed(
    () => userStore.getUserInfo.dashboard === 'statistics'
  )

  const { scrollToTop } = useCommon()
  scrollToTop()
</script>
