<template>
  <div class="particulars">
    <div class="historico">
      <div class="calendar" @click="showCalendar = true">
        <i class="iconfont icon-rili"></i>
        {{ date }}
      </div>
      <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">{{ index + 1 }}</span>
          <span>{{ item.uid }}</span>
          <span>{{ (item.bet / 10000).toFixed(2) }}</span>
          <span>{{ (item.childrenBet / 10000).toFixed(2) }}</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"
    />
    <van-calendar
      :min-date="new Date('1990-01-01')"
      :show-title="false"
      confirm-text="Confirm"
      v-model:show="showCalendar"
      @confirm="confirm"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import socketApi from "@/socket/socketApi";
import { fomartDate } from "@/utils";
import http from "@/https/index";
const labels = ["#", "Conta", "Apostas(R$)", "Aposta equipe(R$)", "Comissão"];
const data = ref<Array<any>>([]);
const pageInfo = reactive<PageProps>({
  pageIndex: 1,
  pageSize: 10,
  pageTotal: 0,
});
const date = ref(fomartDate(new Date(), "YYYY-MM-DD"));

const props = defineProps({
  date: {
    type: String,
    default: fomartDate(new Date(), "YYYY-MM-DD"),
    required: false,
  },
});

const getChildRebateDetail = async () => {
  const res = await http.getChildRebateRecordsDetail({
    pageIndex: pageInfo.pageIndex,
    pageSize: pageInfo.pageSize,
    type: 3,
    unit: date.value,
  });
  console.log(res,"数据")
  if (res.code === 0) {
    data.value = res.data.rows || [];
    pageInfo.pageTotal = res.data.total;
  }
};

watch(
  () => props.date,
  async () => {
    date.value = props.date;
    pageInfo.pageIndex = 1
    await getChildRebateDetail();
  },
  {
    deep: true,
    immediate: true,
  }
);

const showCalendar = ref(false);
const confirm = async (value: any) => {
  date.value = fomartDate(value, "YYYY-MM-DD");
  showCalendar.value = false;
  await getChildRebateDetail();
};

const previous = async (page: number) => {
  pageInfo.pageIndex = page;
  await getChildRebateDetail();
};

const nextPage = async (page: number) => {
  pageInfo.pageIndex = page;
  await getChildRebateDetail();
};
</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;
    padding: 0.2rem;
    .calendar {
      width: 3rem;
      border: 1px solid #b1b1b1;
      padding: 0.1rem 0.2rem;
      border-radius: 0.1rem;
      .icon-rili {
        color: #b1b1b1;
      }
    }
    .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;
        }
      }
    }
  }
  :deep(.van-calendar__body) {
    &::-webkit-scrollbar {
      display: none;
      width: 0;
    }
  }
}
</style>
