<script lang="ts">
export default { name: "Dashboard" };
</script>

<script setup lang="ts">
// 组件引用
//import BarChart from './components/Chart/BarChart.vue';
//import PieChart from './components/Chart/PieChart.vue';
//import RadarChart from './components/Chart/RadarChart.vue';
import Statistics from "./components/Statistics/index.vue";
import ContractPnl from "./components/ContractPnl/index.vue";
import DailyRecharge from "./components/DailyRecharge/index.vue";
import DailyUserStat from "./components/DailyUserStat/index.vue";
//import UserType from './components/UserType/index.vue';
import { onMounted, reactive, ref } from "vue";

const state = reactive({
    show: true,
    includeInternal: 0 as 0 | 1,
    refreshLoading: false,
});

const contractPnlRef = ref<InstanceType<typeof ContractPnl>>();
const dailyRechargeRef = ref<InstanceType<typeof DailyRecharge>>();

function onStatChangeInternal(v: boolean) {
    state.includeInternal = v ? 1 : 0;
}

function onStatRefresh() {
    // refreshAll 已触发两个 datacenter job，这里只做静默 DB 重读，不重复触发 job
    contractPnlRef.value?.reload();
    dailyRechargeRef.value?.reload();
}

function onLoadingChange(v: boolean) {
    state.refreshLoading = v;
}

onMounted(() => {
    state.show =
        (window.localStorage.getItem("roleId") as string | number) != 70
            ? true
            : false;
});
</script>

<template>
    <div
        class="dashboard-container"
        v-loading="state.refreshLoading"
        element-loading-text="正在加载统计数据，请稍候..."
        element-loading-background="rgba(240,242,245,0.88)"
    >
        <!-- 用户信息 + 手续费返佣总汇（USDT）+ 今日充提 + 今日盈亏 -->
        <el-row :gutter="0" justify="space-evenly" v-if="state.show">
            <Statistics
                @change-internal="onStatChangeInternal"
                @refresh="onStatRefresh"
                @loading-change="onLoadingChange"
            />
        </el-row>

        <!-- 合约盈亏统计 -->
        <el-row :gutter="0" v-if="state.show">
            <ContractPnl
                ref="contractPnlRef"
                :include-internal="state.includeInternal"
            />
        </el-row>

        <!-- 充值提现统计 -->
        <el-row :gutter="0" v-if="state.show">
            <DailyRecharge ref="dailyRechargeRef" :include-internal="state.includeInternal" />
        </el-row>

        <!-- 注册/登录统计 -->
        <el-row :gutter="0" v-if="state.show">
            <DailyUserStat :include-internal="state.includeInternal" />
        </el-row>


        <!-- 用户类型 -->
        <!--<el-row :gutter="40">
      <UserType />
    </el-row>-->

        <!-- Echarts 图表 -->
        <!--<el-row :gutter="40" style="margin-top: 20px">
      <el-col :sm="24" :lg="8" class="card-panel__col">
        <BarChart
          id="barChart"
          height="400px"
          width="100%"
          class="chart-container"
        />
      </el-col>

      <el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
        <PieChart
          id="pieChart"
          height="400px"
          width="100%"
          class="chart-container"
        />
      </el-col>

      <el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
        <RadarChart
          id="radarChart"
          height="400px"
          width="100%"
          class="chart-container"
        />
      </el-col>
    </el-row>-->
    </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
    padding: 24px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
        position: absolute;
        top: 0px;
        border: 0;
        right: 0;
        z-index: 99;
    }

    .box-center {
        margin: 0 auto;
        display: table;
    }

    .user-profile {
        .box-center {
            padding-top: 10px;
        }

        .user-role {
            padding-top: 10px;
            font-weight: 400;
            font-size: 14px;
        }

        .box-social {
            padding-top: 30px;

            .el-table {
                border-top: 1px solid #dfe6ec;
            }
        }

        .user-follow {
            padding-top: 20px;
        }
    }

    .card-panel__col {
        margin-bottom: 12px;
    }

    .card-panel {
        height: 108px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #666;
        background: #fff;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.05);

        &:hover {
            .card-panel-icon-wrapper {
                color: #fff;
            }

            .icon-user {
                background: #e77541;
            }

            .icon-people {
                background: #40c9c6;
            }

            .icon-message {
                background: #36a3f7;
            }

            .icon-money {
                background: #f4516c;
            }

            .icon-shopping {
                background: #34bfa3;
            }
        }

        .icon-people {
            color: #40c9c6;

            .svg-icon {
                width: 4em !important;
                height: 4em !important;
            }
        }

        .icon-message {
            color: #36a3f7;

            .svg-icon {
                width: 4em !important;
                height: 4em !important;
            }
        }

        .icon-money {
            color: #f4516c;

            .svg-icon {
                width: 4em !important;
                height: 4em !important;
            }
        }

        .icon-shopping {
            color: #34bfa3;

            .svg-icon {
                width: 4em !important;
                height: 4em !important;
            }
        }

        .card-panel-icon-wrapper {
            float: left;
            margin: 14px 0 0 14px;
            padding: 16px;
            transition: all 0.38s ease-out;
            border-radius: 6px;
        }

        .card-panel-description {
            float: right;
            font-weight: bold;
            margin: 26px 20px 0;

            .card-panel-text {
                line-height: 18px;
                color: rgba(0, 0, 0, 0.45);
                font-size: 16px;
                margin-bottom: 12px;
            }

            .card-panel-num {
                font-size: 20px;
                text-align: right;
            }
        }
    }

    .chart-container {
        background: #ffffff;
    }

    :deep(.el-loading-mask .el-loading-spinner) {
        position: fixed !important;
        top: 320px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-top: 0 !important;
    }
}
</style>
