<template>
  <div class="container">
    <div class="left-side">
      <div class="panel">
        <banner />
        <data-panel
          :total-consumption="toNumber(renderData.payment?.totalConsumption)"
          :total-deposits="toNumber(renderData.payment?.totalDeposits)"
          :total-deposit-count="renderData.payment?.totalDepositCount"
          :apple-account-count="renderData.appleAccountCount"
          :total-consumption-count="renderData.payment?.totalConsumptionCount"
        />
      </div>
      <a-grid :cols="24" :col-gap="16" :row-gap="16" style="margin-top: 16px">
        <a-grid-item :span="24">
          <payment-record />
        </a-grid-item>
        <!-- <a-grid-item
          :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
        >
          <CategoriesPercent />
        </a-grid-item> -->
      </a-grid>
    </div>
    <div class="right-side">
      <a-grid :cols="24" :row-gap="20">
        <a-grid-item :span="24">
          <div class="panel moduler-wrap">
            <balance :balance="toNumber(renderData.payment?.balance)" />
          </div>
        </a-grid-item>
        <!-- <a-grid-item class="panel" :span="24">
          <Carousel />
        </a-grid-item> -->
        <!-- <a-grid-item class="panel" :span="24">
          <Announcement />
        </a-grid-item>
        <a-grid-item class="panel" :span="24">
          <Docs />
        </a-grid-item> -->
      </a-grid>
    </div>
  </div>
</template>

<script lang="ts" setup>
import banner from './components/banner.vue';
import paymentRecord from './components/payment-record.tsx';
import dataPanel from './components/data-panel.vue';
import Balance from './components/balance.tsx';
import { useIntervalFn } from '@vueuse/core';
import { onMounted, ref } from 'vue';
import { toNumber } from 'lodash';
import { queryStatistics, statisticsRecord } from '@/api/user.ts';
import { isNull, isUndefined } from '@/utils/is.ts';

const generatePayment = () => {
  return {
    id: 0,
    userId: '',
    balance: '',
    totalConsumption: '',
    totalDepositCount: 0,
    totalConsumptionCount: 0,
    lastDepositTime: '',
    lastConsumptionTime: '',
    totalDeposits: '',
    status: '',
    notes: ''
  };
};

const renderData = ref<statisticsRecord>({
  appleAccountCount: 0,
  payment: generatePayment()
});
onMounted(() => {
  useIntervalFn(
    () => {
      queryStatistics().then(res => {
        renderData.value = res.data;
        if (
          isNull(renderData.value.payment) ||
          isUndefined(renderData.value.payment)
        ) {
          renderData.value.payment = generatePayment();
        }
      });
    },
    3000,
    { immediate: true, immediateCallback: true }
  );
});
</script>

<script lang="ts">
export default {
  name: 'UserDashboard' // If you want the include property of keep-alive to take effect, you must name the component
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  padding: 16px 20px;
  padding-bottom: 0;
  background-color: var(--color-fill-2);
}

.left-side {
  flex: 1;
  overflow: auto;
}

.right-side {
  width: 280px;
  margin-left: 16px;
}

.panel {
  overflow: auto;
  background-color: var(--color-bg-2);
  border-radius: 4px;
}

:deep(.panel-border) {
  margin-bottom: 0;
  border-bottom: 1px solid rgb(var(--gray-2));
}

.moduler-wrap {
  background-color: var(--color-bg-2);
  border-radius: 4px;

  :deep(.text) {
    font-size: 12px;
    color: rgb(var(--gray-8));
    text-align: center;
  }

  :deep(.wrapper) {
    margin-bottom: 8px;
    text-align: center;
    cursor: pointer;

    &:last-child {
      .text {
        margin-bottom: 0;
      }
    }

    &:hover {
      .icon {
        color: rgb(var(--arcoblue-6));
        background-color: #e8f3ff;
      }

      .text {
        color: rgb(var(--arcoblue-6));
      }
    }
  }

  :deep(.icon) {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 32px;
    color: rgb(var(--dark-gray-1));
    text-align: center;
    background-color: rgb(var(--gray-1));
    border-radius: 4px;
  }
}
</style>

<style lang="less" scoped>
// responsive
.mobile {
  .container {
    display: block;
  }

  .right-side {
    // display: none;
    width: 100%;
    margin-top: 16px;
    margin-left: 0;
  }
}
</style>
