<template>
  <view class="app">
    <template v-if="typeNum === 1">
      <view class="card" v-for="(item, index) in list" :key="index">
        <view>
          <view>
            第{{ item.Periods }}期开奖:
            <text
              :style="{
                color: numColor(item.Name),
              }"
            >
              {{ item.Name }}
            </text>
          </view>
          <view>开奖时间: {{ item.DrawTime }}</view>
        </view>
      </view>
    </template>
    <template v-else>
      <view v-if="list.length > 0">
        <view class="card desc" v-for="(item, index) in list" :key="index">
          <view>
            <view>第{{ item.Periods }}期投注:</view>
            <view>
              点数:
              <text style="color: red">{{ item.Name }}</text>
            </view>
            <view class="sub">
              投注时间:
              <text>{{ item.DrawTime }}</text>
            </view>
          </view>
          <view style="text-align: right">
            <view style="color: red" v-if="item.State === 1">
              +{{ item.DrawNum }}积分
            </view>
            <view style="color: green">-{{ item.Number }}豆子</view>
          </view>
        </view>
      </view>
      <view v-else>
        <view style="margin-top: 100px">暂无记录.....</view>
      </view>
    </template>
  </view>
</template>

<script setup>
import { ref } from "vue";
import Taro from "@tarojs/taro";

const list = ref([]);

const typeNum = ref(0);

Taro.useLoad((options) => {
  typeNum.value = Number(options.type);
  Taro.setNavigationBarTitle({
    title: options.type === "1" ? "开奖记录" : "投注记录",
  });
  getData();
});

Taro.usePullDownRefresh(() => {
  getData();
});

const numColor = (num) => {
  switch (num) {
    case "大":
      return "red";
    case "小":
      return "green";
    case "单":
      return "orange";
    case "双":
      return "blue";
    case "和":
      return "purple";
    default:
      return "black";
  }
};

const getData = async () => {
  if (typeNum.value === 1) {
    Taro.request({
      url: `${process.env.TARO_APP_TURNTABLE_API}/draw`,
      method: "GET",
      success: ({ data: res }) => {
        list.value = res.data.data || [];
      },
    });
  } else {
    Taro.request({
      url: `${
        process.env.TARO_APP_TURNTABLE_API
      }/userTurntableRecord?uid=${Taro.getStorageSync("uid")}`,
      method: "GET",
      success: ({ data: res }) => {
        list.value = res.data.data || [];
      },
    });
  }
  Taro.stopPullDownRefresh();
};
</script>

<style lang="scss">
.taro_page {
  background-color: #f5f5f5 !important;
}
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  //justify-content: center;
  font-size: 35px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.card {
  width: 95%;
  padding: 20px;
  background-color: #fff;
  margin-top: 10px;
  border-radius: 10px;

  .sub {
    margin-top: 10px;
    color: #555555;
  }
}

.desc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
</style>
