<template>
  <view>
    <view class="p-[30px]">
      <view class="h-[155px] 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 mt-[20px] justify-between items-center">
          <view class="flex justify-between items-center">
            <view
              class="m-[5px] rounded-full w-[44px] h-[44px] text-white text-[28px] text-center leading-[44px]"
              v-for="(itm, index) in item.hm"
              :key="index"
            >
              <view v-if="!itm.num" class="m-[5px]">
                <plus-cross theme="filled" size="20" fill="#333333" />
              </view>
              <view
                class="rounded-full"
                :style="{
                  backgroundColor: itm.color,
                }"
                >{{ itm.num }}</view
              >
            </view>
          </view>
          <view v-if="item.w" class="text-[#EB1313] text-[28px]"
            >得 {{ item.w }} 积分</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import Taro from "@tarojs/taro";
import { PlusCross } from "@icon-park/vue-next";
import { GetLotteryRecord } from "../../api";
import "./index.scss";

const uid = ref("");

const data = ref([]);

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

const getList = async () => {
  const res = await GetLotteryRecord(uid.value);
  data.value = res.data.map((item) => {
    return {
      qs: `第${item.Periods}期`,
      hm: [
        {
          num: item.A,
          color: "#088207",
        },
        { num: item.B, color: "#0500FA" },
        { num: item.C, color: "#0500FA" },
        { num: item.D, color: "#088207" },
        { num: item.E, color: "#FF0204" },
        { num: item.F, color: "#0500FA" },
        {},
        { num: item.G, color: "#FF0204" },
      ],
      t: item.DrawTime,
      w: item.Win,
    };
  });
};
</script>

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