<template>
  <div class="page">
    <h-navbar title="Minhas Apostas de Jogo" />
    <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>Produção: </span>
            <span style="color: #00e7bb">
              {{ pro(item.detail) }}
            </span>
          </p>
          <p>
            <span>Tipo: </span>
            <span>{{ slot(item.detail) }}</span>
          </p>
          <p>
            <span>Jogo: </span>
            <span style="color: #00e7bb">
              {{ gameName(item.detail) }}
            </span>
          </p>
          <p>
            <span>{{ item.type == 10 ? "Apostar" : "Profito e perda" }}: </span>
            <span style="color: #ffe726">
              {{ formatDigit(Number(item.changeCoins / 10000).toFixed(2)) }}
            </span>
          </p>
        </h-block>
      </div>
      <van-empty v-else description="Sem apostas" image-size="100" />
      <h-table-paging
        :total="pageInfo.pageTotal"
        :page-size="pageInfo.pageSize"
        @on-previous="previous"
        @on-nextPage="nextPage"
      />
    </div>
  </div>
</template>
  <script setup lang="ts">
import { ref, onBeforeMount, reactive, computed } from "vue";
import socketApi from "@/socket/socketApi";
import { fomartDate, formatDigit } from "@/utils";
import { gameListStore } from "@/stores/modules/game-list";
import http from "@/https/index";
const gameStore = gameListStore();
const pageInfo = reactive<PageProps>({
  pageIndex: 1,
  pageSize: 8,
  pageTotal: 0,
});

const replaceData = (str: string) => {
  let regex = /游戏ID：(.*?)\s/g;
  let data:string = ""
  str.replace(regex, (match, p1, offset, string) => {
    data = p1
    return match;
  });
  return data
};
const pro = computed(() => {
  return (detail: any) => {
    let data = replaceData(detail)
    let game = gameStore.originalList.find((item: any) => item.gameId == data);
    if (!game) return "";
    let provider = gameStore.providerList.find(
      (item: any) => item.providerId === game.providerId
    );
    return provider.gameProviderName;
  };
});

const gameName = computed(() => {
  return (detail: any) => {
    let data = replaceData(detail)
    if (!data) return "";
    let game = gameStore.originalList.find((item: any) => item.gameId == data);
    if (!game) return "";
    return game.gameAlias;
  };
});

const slot = computed(() => {
  return (detail: any) => {
    let data = replaceData(detail)
    if (!data) return "";
    let game = gameStore.originalList.find((item: any) => item.gameId == data);
    if (!game) return "";
    let gameClass = gameStore.gameClassData.find(
      (item: any) =>
        item.gameClassId === game.gameClassId[game.gameClassId.length - 1]
    );
    if (!gameClass) return "";
    return gameClass.gameClassName;
  };
});

const list = ref<Array<any>>([]);
onBeforeMount(() => {
  getData();
});

const getData = () => {
  http
    .getCoinsDetailLog({
      pageIndex: pageInfo.pageIndex,
      pageSize: pageInfo.pageSize,
      types: [10, 20],
    })
    .then((res: any) => {
      console.log(res);
      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>
.page-body {
  padding-bottom: 1.5rem;
  .no-data {
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.4rem;
  }
}
</style>

function result() {
  throw new Error("Function not implemented.");
}
  