<template>
  <div class="page">
    <h-navbar title="Registro do diário de moedas de ouro" />
    <div class="page-body">
      <div v-if="list.length > 0">
        <h-block v-for="(item, index) in list" :key="index">
          <p>
            <span>Date: </span>
            <span>{{ fomartDate(item.createdAt) }}</span>
          </p>
          <p>
            <span>Fonte: </span>
            <span style="color: #00e7bb">
              {{ ENUM(item.type) }}
            </span>
          </p>
          <p>
            <span>Iconcluido: </span>
            <span style="color: #ffe726">
              {{ formatDigit(Number(item.usedCoinsNum / 10000).toFixed(2)) }}
            </span>
          </p>
          <p>
            <span>Total: </span>
            <span style="color: #ffe726">
              {{ formatDigit(Number(item.userCoinsFlow / 10000).toFixed(2)) }}
            </span>
          </p>
        </h-block>
      </div>
      <van-empty v-else description="No Data" image-size="100" />
      <h-table-paging
        :total="pageInfo.pageTotal"
        :page-size="pageInfo.pageSize"
        @on-previous="previous"
        @on-nextPage="nextPage"
      />
      <div class="text">
        Voce ainda precisa apostar na quantidade de
        <span>
          {{ flow ? formatDigit(Number(flow / 10000).toFixed(2)) : 0 }}
        </span>
        para retirar
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onBeforeMount, reactive } from "vue";
import socketApi from "@/socket/socketApi";
import { fomartDate, formatDigit } from "@/utils";
import { ENUM } from "@/enums/GLOD_TYPE_ENUM";
import http from "@/https";

const pageInfo = reactive<PageProps>({
  pageIndex: 1,
  pageSize: 8,
  pageTotal: 0,
});

const list = ref<Array<any>>([]);
const flow = ref(0);

onBeforeMount(() => {
  getData();
});

const getData = () => {
  http
    .getFlowRecordPage({
      pageIndex: pageInfo.pageIndex,
      pageSize: pageInfo.pageSize,
    })
    .then((res: any) => {
      console.log(res.data.rows, "res.data.rows;");
      list.value = res.data.rows;
      flow.value = res.data.coinsSpan;
      pageInfo.pageTotal = res.data.total;
    });
};
const previous = (page: number) => {
  pageInfo.pageIndex = page;
  getData();
};

const nextPage = (page: number) => {
  pageInfo.pageIndex = page;
  getData();
};
</script>
<style lang="scss" scoped>
.page-body {
  .no-data {
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.4rem;
  }
  .text {
    width: 100%;
    font-weight: 600;
    font-size: 0.3rem;
    background-color: #015320;
    border-radius: 0.15rem;
    padding: 0.2rem 0;
    position: absolute;
    bottom: 0.1rem;
    left: 0;
    span {
      color: red;
    }
  }
}
</style>
