<template>
  <view>
    <view class="p-[30px]" v-if="data.length !== 0">
      <view
        class="pt-[10px] pb-[10px] line"
        v-for="(item, index) in data"
        :key="index"
      >
        <view class="flex justify-between text-[#959BB1] text-[28px]">
          <view>{{ item.qs }}</view>
          <view>{{ item.t }}</view>
        </view>
        <view class="flex justify-between items-center">
          <view class="flex justify-between items-center">
            <view v-for="(itm, index) in item.hm" :key="index">
              <!--  v-if="item.type !== 2" -->
              <view class="mr-[10] text-[28px] text-[#959BB1]">{{ itm }} </view>
              <!-- <view
                v-else
                class="rounded-full border-[1px] border-[#000] text-[28px] text-center leading-[44px]"
                :style="{
                  color: itm.color,
                }"
                >{{ itm.num }}</view
              > -->
            </view>
          </view>
          <view v-if="item.j" class="text-[#088207] text-[28px]"
            >- {{ item.j }} 豆子</view
          >
        </view>
        <view class="flex items-center justify-between" v-if="item.state === 1">
          <view class="text-[28px] flex items-center">
            <view class="text-[#959BB1]">状态：</view>
            <view class="text-[red]">已中奖</view>
          </view>
          <view v-if="item.state === 1" class="text-[28px] flex">
            <view class="text-[#959BB1]">得</view>
            <view class="text-[red]">{{ item.draw_num }}</view>
            <view class="text-[#959BB1]">积分</view>
          </view>
        </view>
        <!-- <view v-if="item.state === 1" class="flex items-center justify-between">
          <view class="text-[28px] flex items-center">
            <view class="text-[#959BB1]">中奖数字：</view>
            <view class="text-[#959BB1]">{{ item.periods_num }}</view>
          </view>
        </view> -->
      </view>
    </view>
    <view v-else class="text-[#959BB1] text-center">暂无记录</view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import Taro from "@tarojs/taro";
import { GetBetRecord } from "../../api";
import "./index.scss";

const uid = ref("");

// const data = ref([
//   {
//     type: 1,
//     qs: "第2024157期",
//     hm: ["头1", "头2"],
//     t: "06-23  20:35:02",
//     j: 2000,
//   },
//   {
//     type: 2,
//     qs: "第2024158期",
//     hm: [
//       {
//         num: "04",
//         color: "#0500FA",
//       },
//     ],
//     t: "06-23  20:35:02",
//     j: 200,
//   },
//   {
//     type: 3,
//     qs: "第2024159期",
//     hm: ["单"],
//     t: "06-23  20:35:02",
//     j: 300,
//   },
// ]);
const data = ref([]);

const page = ref({
  page: 1,
  size: 10,
  total: 0,
});

Taro.useLoad((opt) => {
  uid.value = opt.uid;
});

Taro.useDidShow(() => {
  getList();
});

Taro.useReachBottom(async () => {
  if (page.value.page * page.value.size >= page.value.total) {
    Taro.showToast({
      title: "没有更多了",
      icon: "none",
    });
    return;
  }
  page.value.page++;
  await getList();
});

const getList = async () => {
  Taro.showLoading({
    title: "加载中",
  });
  const res = await GetBetRecord({
    uid: uid.value,
    PageNum: page.value.page,
    PageSize: page.value.size,
  });
  const arr =
    res.data.map((item) => ({
      type: 1,
      qs: `第${item.Periods}期`,
      hm: [item.Name],
      t: item.DrawTime,
      j: item.Number,
      draw_num: item.DrawNum,
      state: item.State,
      periods_num: item.PeriodsNum,
    })) || [];
  data.value.push(...arr);
  page.value.total = res.data.total || 0;
  Taro.hideLoading();
};
</script>

<style lang="scss"></style>
