<template>
  <div class="historico">
    <div v-if="list.length > 0">
      <h-block v-for="(item, index) in list" :key="index">
        <p>
          <span>OrderId: </span>
          <span>{{ item.orderId }}</span>
        </p>
        <p>
          <span>Dinheiro: </span>
          <span style="color: #ffe726">
            R$ {{ formatDigit(item.amount / 10000) }}
          </span>
        </p>
        <p>
          <span>Date: </span>
          <span>{{ fomartDate(item.createdAt) }}</span>
        </p>
        <p>
          <span>Estado: </span>
          <span :style="{ color: STATUS_COLOR(item.state) }">
            {{ STATUS_TXT(item.state) }}
          </span>
        </p>
      </h-block>
    </div>
    <div v-else class="no-data">
      Opa! Ainda não há dados!
    </div>
    <h-table-paging
      :total="pageInfo.pageTotal"
      :page-size="pageInfo.pageSize"
      @on-previous="previous"
      @on-nextPage="nextPage"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount } from "vue";
import socketApi from "@/socket/socketApi";
import { fomartDate, formatDigit } from "@/utils";
import { STATUS_TXT, STATUS_COLOR } from "@/enums/PAY_STATUS_MENU";
import http from "@/https";

interface ListProps {
  orderId: string;
  amount: number;
  createdAt: string;
  state: number;
}

// const labels = ["OrderId", "Montante", "Date", "Estado"];
const list = ref<Array<ListProps>>([]);
const pageInfo = reactive<PageProps>({
  pageIndex: 1,
  pageSize: 8,
  pageTotal: 0,
});

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

const getData = async () => {
  http
    .getPayRecords({
      pageIndex: pageInfo.pageIndex,
      pageSize: pageInfo.pageSize,
    })
    .then((res: any) => {
      if (res.code !== 0) return;
      list.value = res.data.rows;
      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>
.historico {
  margin: 0.2rem 0.2rem 0 0.2rem;
  .no-data{
    text-align: center;
    padding: 1rem 0;
    font-size: .4rem;
  }
}
</style>
