<template>
  <div class="withdrawal-log">
    <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>Dinheiro: </span>
          <span style="color: #ffe726">
            R$ {{ item.amount / 10000 }}
          </span>
        </p>
        <p>
          <span>OrderId: </span>
          <span>{{ item.orderId }}</span>
        </p>
        <p>
          <span>Estado: </span>
          <span :style="{ color: STATUS_COLOR(item.state) }">
            {{ STATUS_TXT(item.state) }}
          </span>
        </p>
        <template v-slot:bottom>
          <div class="flot-remake">
            Mensagem:
            <van-text-ellipsis
              :content="item.remark || ''"
              :rows="2"
              expand-text="Expandir"
              collapse-text="esconder"
            />
          </div>
        </template>
      </h-block>
    </div>
    <div v-else>
      <van-empty description="No Data" image-size="100" />
    </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/index";

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

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

const getData = () => {
  http
    .getWithDrawRecord({
      pageIndex: pageInfo.pageIndex,
      pageSize: pageInfo.pageSize,
    })
    .then((res: any) => {
      if (res.code !== 0) {
        return;
      }
      pageInfo.pageTotal = res.data.total;
      list.value = res.data.rows;
    });
};

const previous = (page: number) => {
  pageInfo.pageIndex = page;
  getData();
};

const nextPage = (page: number) => {
  pageInfo.pageIndex = page;
  getData();
};

onBeforeMount(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.withdrawal-log {
  margin-top: 0.2rem;
  // height: 16.5rem;
}
.flot-remake {
  text-align: left;
  font-size: 0.35rem;
  padding: 0 0.3rem;
  display: flex;
  margin-bottom: 0.5rem;
  :deep(.van-text-ellipsis){
    width: 80%;
  }
}
</style>
