<template>
  <mobile-sub-layout
    :title="$t('account.header.gameRecordsTitle')"
    :lineHeight="4"
    :bgColor="themeStore2.theme.bgColor"
  >
    <view class="game-records-body">
      <view
        class="game-records-content"
        :style="{ backgroundColor: themeStore.lightBgColor }"
      >
        <view class="game-records-search">
          <view
            class="game-records-search-item"
            :style="{
              backgroundColor: themeStore.search.bgColor,
              borderColor: themeStore.search.borderColor,
            }"
            @click="checkSearch('time')"
          >
            <view
              class="game-records-search-item-value"
              :style="{ color: themeStore.search.textColor }"
              >{{ searchForm.time }}</view
            >
            <theme-image
              class="launch-image-size"
              src="@/static/account/icon/launch.png"
            ></theme-image>
          </view>
          <view
            class="game-records-search-item"
            :style="{
              backgroundColor: themeStore.search.bgColor,
              borderColor: themeStore.search.borderColor,
            }"
            @click="checkSearch('status')"
          >
            <view
              class="game-records-search-item-value"
              :style="{ color: themeStore.search.textColor }"
              >{{ searchForm.statusName }}</view
            >
            <theme-image
              class="launch-image-size"
              src="@/static/account/icon/launch.png"
            ></theme-image>
          </view>
        </view>
        <view
          class="search-form-select search-form-time-select"
          :style="{
            backgroundColor: themeStore.search.listBgColor,
            borderColor: themeStore.search.listBorderColor,
          }"
          v-if="searchFormTimeSelectVisible"
        >
          <view class="search-form-select-list">
            <view
              class="search-form-select-list-item"
              :style="{
                color:
                  searchForm.time == item
                    ? themeStore.search.listItemActiveTextColor
                    : themeStore.search.listItemTextColor,
              }"
              v-for="(item, index) in Time"
              @click="checkTime(item, index)"
            >
              {{ item }}
            </view>
          </view>
        </view>
        <view
          class="search-form-select search-form-status-select"
          :style="{
            backgroundColor: themeStore.search.listBgColor,
            borderColor: themeStore.search.listBorderColor,
          }"
          style="height: 272rpx"
          v-if="searchFormStatusSelectVisible"
        >
          <view class="search-form-select-list">
            <view
              class="search-form-select-list-item"
              v-for="(item, index) in Status"
              :style="{
                color:
                  searchForm.statusName == item.name
                    ? themeStore.search.listItemActiveTextColor
                    : themeStore.search.listItemTextColor,
              }"
              @click="checkStatus(item)"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
        <view class="game-records-scroll" v-if="gameList.length > 0">
          <scroll-view
            class="scroll-view"
            scroll-y="true"
            @scrolltolower="onScrollToLower"
            :refresher-enabled="true"
            :refresher-triggered="isRefreshing"
          >
            <!--  
				 :refresher-enabled="true"
            :refresher-triggered="isRefreshing"
				@refresherrefresh="onRefresherPull" -->
            <view class="game-records-data">
              <view
                class="game-records-item"
                :style="{ backgroundColor: themeStore.recordsItemBgColor }"
                v-for="(item, index) in gameList"
                :key="index"
              >
                <view
                  class="game-records-item-top"
                  :style="{ color: themeStore.text.normal }"
                >
                  <view class="game-records-item-top-item game-name">{{
                    item.gameName
                  }}</view>
                  <view class="game-records-item-top-item game-item-valid-bat">
                    {{ $t("account.gameRecords.vaildBet") }}:
                    <text
                      class="game-item-valid-bat-value"
                      :style="{ color: themeStore.text.batValue }"
                      >{{ item.validBet }}</text
                    >
                  </view>
                  <view class="game-records-item-top-item game-item-w-l">
                    {{ $t("account.gameRecords.wl") }}:
                    <text
                      :style="{
                        color:
                          item.winLost > 0
                            ? themeStore.text.batValue
                            : themeStore.text.wlValue,
                      }"
                      >{{ item.winLost }}</text
                    >
                  </view>
                </view>
                <view
                  class="game-records-item-bottom"
                  :style="{ color: themeStore.text.normal }"
                >
                  <view class="game-records-item-bottom-bet-id">
                    <text
                      >{{ $t("account.gameRecords.betId") }}:
                      {{ item.roundNo }}</text
                    >
                    <theme-image
                      @click="copyBetId(item.roundNo)"
                      src="@/static/account/copy.png"
                      class="copy-image"
                    ></theme-image>
                  </view>
                  <view class="game-records-item-bottom-time">{{
                    item.betTime
                  }}</view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <NoDataSearch v-if="gameList.length == 0" iconType="node" />
      </view>
    </view>
  </mobile-sub-layout>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { Time, Status } from "../constants/gameRecords.js";
import NoDataSearch from "@/components/nodata/NoDataSearch";
import Toast from "@/module/toast/toast.js";
import { getGameListApi } from "@/api/account.js";
import { useAppStore } from "@/store/useAppStore";
import { useI18n } from "vue-i18n";
import { useThemeStore } from "@/store/useThemeStore";

const themeStore = useThemeStore().theme.account.gameRecords;
const themeStore2 = useThemeStore();
const { t } = useI18n();
const appStore = useAppStore();
let searchFormTimeSelectVisible = ref(false);
let searchFormStatusSelectVisible = ref(false);

let searchForm = reactive({
  time: t("account.gameRecords.time.today"),
  dayRange: 0,
  status: "",
  statusName: t("account.gameRecords.status.all"),
  page: 1,
  pageSize: 12,
});
let gameList = ref([]);
// 上拉加载 下拉刷新
let isRefreshing = ref(false);
let hasMore = ref(true);
const onRefresherPull = () => {
  gameList.value = [];
  isRefreshing.value = true;
  searchForm.page = 1;
  hasMore.value = true;
  getGameList(searchForm);
};
const onRefresherRestore = () => {
  isRefreshing.value = false;
};
const onScrollToLower = () => {
  if (hasMore.value) {
    searchForm.page++;
    getGameList(searchForm);
  }
};
/**
 * 复制 BetID
 */
const copyBetId = (value) => {
  uni.setClipboardData({
    data: value,
    success() {
      uni.showToast({
        title: t("account.toast.copySuccess"),
        icon: "success",
      });
    },
  });
};
/**
 * 查询条件时间选中
 */
const checkTime = (value, index) => {
  searchForm.time = value;
  searchForm.dayRange = index;
  searchForm.page = 1;
  searchFormTimeSelectVisible.value = false;
  getGameList(searchForm, 1);
};
/**
 * 查询条件 状态选中
 */
const checkStatus = (item) => {
  searchForm.statusName = item.name;
  searchForm.status = item.code;
  searchForm.page = 1;
  searchFormStatusSelectVisible.value = false;
  getGameList(searchForm, 1);
};

/**
 * 设置查询条件
 */
const checkSearch = (type) => {
  if (type == "time") {
    searchFormTimeSelectVisible.value = !searchFormTimeSelectVisible.value;
    searchFormStatusSelectVisible.value = false;
  }
  if (type == "status") {
    searchFormTimeSelectVisible.value = false;
    searchFormStatusSelectVisible.value = !searchFormStatusSelectVisible.value;
  }
};

const getGameList = async (searchForm, type = 0) => {
  Toast.showLoading(t("account.toast.loading"));

  const { code, data } = await getGameListApi({
    dayRange: searchForm.dayRange,
    status: searchForm.status === "" ? null : searchForm.status,
    page: searchForm.page,
    pageSize: searchForm.pageSize,
  });
	
  if (code == 200) {
    if (type == 1) {
      gameList.value = gameList.value.concat(data);
    } else {
      gameList.value = data;
    }

    if (data.length < searchForm.pageSize) {
      hasMore.value = false;
    }
    onRefresherRestore();
    Toast.hideLoading();
  } else {
    Toast.hideLoading();
    onRefresherRestore();
  }
};

onMounted(() => {
  getGameList(searchForm);
});
</script>

<style lang="scss" scoped>
.game-records-body {
  width: 100vw;
  box-sizing: border-box;
  padding-top: 10rpx;
  .game-records-content {
    height: 100%;
    // background: #610606;
    box-sizing: border-box;
    padding: 0 30rpx 30rpx 30rpx;
    // overflow: hidden;
    position: relative;
    .game-records-search {
      width: 100%;
      height: 122rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .game-records-search-item {
        width: 334rpx;
        height: 70rpx;
        // background: #3d0303;
        border: 1px solid;
        border-radius: 20rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding-right: 28rpx;
        .game-records-search-item-value {
          width: calc(100% - 50rpx);
          text-align: center;
          font-size: 24rpx;
          // color: #f4e3e3;
        }
        .launch-image-size {
          width: 28rpx;
          height: 12rpx;
        }
      }
    }
    .search-form-select {
      position: absolute;
      width: 325rpx;
      height: 212rpx;
      top: 113rpx;
      z-index: 100;
      // background: #7d1616;
      border-radius: 10rpx;
      border: 1px solid;
      .search-form-select-list {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        text-align: center;
        .search-form-select-list-item {
          width: 100%;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 24rpx;
          // color: #fff;
        }
      }
    }
    .search-form-time-select {
      left: 34rpx;
    }
    .search-form-status-select {
      right: 34rpx;
    }
    .game-records-scroll {
      width: 100%;
      height: calc(100% - 112rpx);
      .scroll-view {
        height: 100%;
      }
      // overflow-y: auto;
      .game-records-data {
        width: 100%;
        margin-top: 22rpx;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;

        .game-records-item {
          width: 100%;
          height: 120rpx;
          box-sizing: border-box;
          padding: 24rpx 27rpx;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          // background: #922222;
          border-radius: 20rpx;
          margin-bottom: 15rpx;
          .game-records-item-top {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: space-between;
            // color: #fff;
            font-size: 26rpx;
            .game-records-item-top-item {
              width: 33%;
              .game-item-valid-bat-value {
                // color: #ffdf3f;
              }
              .game-item-w-l-value {
                // color: #18ff00;
              }
            }
            .game-item-w-l {
              text-align: right;
            }
            .game-name {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .game-records-item-bottom {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 20rpx;
            // color: #fff;

            .game-records-item-bottom-bet-id {
              width: 70%;
              display: flex;
              align-items: center;
            }
            .copy-image {
              width: 20rpx;
              height: 20rpx;
              margin-left: 13rpx;
            }
            .game-records-item-bottom-time {
              width: 30%;
              text-align: right;
            }
          }
        }
      }
    }
  }
}
</style>
