<template>
  <div class="particulars">
    <div class="historico">
      <div class="label">
        <span class="label-item" v-for="item in labels" :key="item">
          {{ item }}
        </span>
      </div>
      <div class="table" v-show="data.length > 0">
        <div class="row" v-for="(item, index) in data" :key="index">
          <span style="padding: 0 0.2rem;cursor: pointer;" @click="changeTab(item.unit)">{{ item.unit }}</span>
          <span>{{ item.regNum }}</span>
          <span>{{ (item.bet / 10000).toFixed(2) }}</span>
          <span>{{ item.upLevel }}</span>
          <span>{{ (item.coins / 10000).toFixed(2) }}</span>
        </div>
      </div>
      <div class="no-data" v-show="data.length === 0">Opa! Ainda não há dados!</div>
    </div>
    <h-table-paging
      color="#000"
      background="#fff"
      :total="pageInfo.pageTotal"
      @on-previous="previous"
      @on-nextPage="nextPage"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import socketApi from "@/socket/socketApi";
import http from "@/https/index";
const emit = defineEmits(["changeTab"]);
onMounted(async () => {
  await getChildRebateDetail();
});
const labels = ["Data", "Inscrições", "Aposta válidas(R$)", "Nível de Agente", "Comissão"];
const data = ref<Array<any>>([]);
const pageInfo = reactive<PageProps>({
  pageIndex: 1,
  pageSize: 10,
  pageTotal: 0,
});
const getChildRebateDetail = async () => {
  const res = await http.getChildRebateRecords({
    pageIndex: pageInfo.pageIndex,
    pageSize: pageInfo.pageSize,
    type: 3,
  });
  if (res.code === 0) {
    data.value = res.data.rows || [];
    pageInfo.pageTotal = res.data.total;
  }
  console.log(res);
};
const previous = async (page: number) => {
  pageInfo.pageIndex = page;
  await getChildRebateDetail();
};

const nextPage = async (page: number) => {
  pageInfo.pageIndex = page;
  await getChildRebateDetail();
};
const changeTab = (date:any) => {
  console.log(date)
  emit("changeTab",{current:1,date})
}
</script>
<style lang="scss" scoped>
.particulars {
  color: #000;
  padding: 0.2rem 0.1rem;
  .historico {
    margin-bottom: 0.1rem;
    font-size: 0.3rem;
    background: #fff;
    border-radius: $border-radius;
    .label {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      text-align: center;
      align-items: center;
      border-bottom: 1px solid #bbb;
      padding: 0.2rem 0;
    }
    .no-data {
      padding: 0.5rem;
      font-size: 0.3rem;
      text-align: center;
    }
    .table {
      font-size: 0.3rem;
      .row {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        border-bottom: 1px solid #bbb;
        span {
          border-right: 1px solid #bbb;
          padding: 0.2rem 0.1rem;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          word-break: break-all;
        }
        span:last-child {
          border: none;
        }
      }
    }
  }
}
</style>
