<template>
  <div class="analysis-dashboard">
    <PollingStats v-if="hasPermission('dashboard_analysis:polling_stats')" />
    <CommissionSummary v-if="hasPermission('dashboard_analysis:commission_summary')" />
    <CommissionStats v-if="hasPermission('dashboard_analysis:commission_stats')" />
    <WithdrawalSettings v-if="hasPermission('dashboard_analysis:withdrawal_settings')" />
    <ActivePaymentSettings v-if="hasPermission('dashboard_analysis:payment_settings')" />

    <!--<el-row :gutter="20">-->
    <!--  <el-col :xl="14" :lg="15" :xs="24">-->
    <!--    <TodaySales />-->
    <!--  </el-col>-->
    <!--  <el-col :xl="10" :lg="9" :xs="24">-->
    <!--    <VisitorInsights />-->
    <!--  </el-col>-->
    <!--</el-row>-->

    <!--<el-row :gutter="20" class="mt-20">-->
    <!--  <el-col :xl="10" :lg="10" :xs="24">-->
    <!--    <TotalRevenue />-->
    <!--  </el-col>-->
    <!--  <el-col :xl="7" :lg="7" :xs="24">-->
    <!--    <CustomerSatisfaction />-->
    <!--  </el-col>-->
    <!--  <el-col :xl="7" :lg="7" :xs="24">-->
    <!--    <TargetVsReality />-->
    <!--  </el-col>-->
    <!--</el-row>-->

    <!--<el-row :gutter="20" class="mt-20">-->
    <!--  <el-col :xl="10" :lg="10" :xs="24">-->
    <!--    <TopProducts />-->
    <!--  </el-col>-->
    <!--  <el-col :xl="7" :lg="7" :xs="24">-->
    <!--    <SalesMappingByCountry />-->
    <!--  </el-col>-->
    <!--  <el-col :xl="7" :lg="7" :xs="24">-->
    <!--    <VolumeServiceLevel />-->
    <!--  </el-col>-->
    <!--</el-row>-->
  </div>
</template>

<script setup lang="ts">
  import PollingStats from './widget/PollingStats.vue'
  import CommissionSummary from './widget/CommissionSummary.vue'
  import CommissionStats from './widget/CommissionStats.vue'
  import WithdrawalSettings from './widget/WithdrawalSettings.vue'
  import ActivePaymentSettings from './widget/ActivePaymentSettings.vue'
  import { usePermission } from '@/composables/usePermission'

  defineOptions({ name: 'Analysis' })

  const { hasPermission } = usePermission()
</script>

<style lang="scss" scoped>
  @use './style';

  .analysis-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
</style>
