<template>
  <mobile-sub-layout :title="$t('account.header.balanceRecordsTitle')" :lineHeight="4"
    :bgColor="themeStore2.theme.bgColor">
    <view class="balance-records-body">
      <view class="balance-records-content">
        <view class="balance-records-search" @click="showSearchFormSelect">
          <view class="balance-records-search-value" :style="{ color: themeStore.balance.search.text }">{{
            searchForm.balanceType }}</view>
          <theme-image src="@/static/account/icon/launch-yellow.png" class="launch-image-size"></theme-image>
        </view>
        <view class="balance-records-list-scroll" v-if="balanceRecordList.length > 0">
          <scroll-view class="scroll-view" scroll-y="true" :refresher-triggered="isRefreshing"
            @scrolltolower="onScrollToLower">
            <!-- 
:refresher-enabled="false"
            :refresher-triggered="isRefreshing"
            @refresherrefresh="onRefresherPull"
		   -->
            <view class="balance-records-list">
              <view class="balance-records-list-item" :style="{
                backgroundColor: themeStore.balance.balanceItemBgColor,
              }" v-for="(item, index) in balanceRecordList" :key="index">
                <view class="balance-records-list-item-top">
                  <view class="balance-records-list-item-top-left"
                    :style="{ color: themeStore.balance.text.orderTypeColor }">{{ item.orderType }}</view>
                  <view class="balance-records-list-item-top-right"
                    :style="{ color: themeStore.balance.text.amountColor }">{{ item.amount }}</view>
                </view>
                <view class="balance-records-list-item-bottom"
                  :style="{ color: themeStore.balance.text.itemBottomColor }">
                  <view class="balance-records-list-item-bottom-left">{{
                    item.gameName
                    }}</view>
                  <view class="balance-records-list-item-bottom-right">{{
                    item.orderedOn
                    }}</view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <NoDataSearch v-else iconType="node" />
      </view>
    </view>
    <view class="select-content" :style="{ backgroundColor: themeStore.balance.statusParams.bgColor }"
      v-if="searchSelectVisible">
      <view class="select-content-block" @click="closeSearchFormSelect"></view>
      <view class="select-content-list" :style="{
        height: searchSelectHeight,
        backgroundColor: themeStore.balance.statusParams.contentBgColor,
      }">
        <view class="select-content-list-header" :style="{
          color: themeStore.balance.statusParams.titleTextColor,
          borderColor: themeStore.balance.statusParams.borderColor,
        }">
          {{ $t("account.balanceRecords.searchFormTitle") }}
          <theme-image src="@/static/account/icon/close.png" @click="closeSearchFormSelect"
            class="close-image"></theme-image>
        </view>
        <view class="select-content-list-scroll">
          <view class="select-content-list-content">
            <view class="select-content-list-item" v-for="(item, index) in balanceTypeList" :key="index" :style="{
              color:
                item != searchForm.balanceType
                  ? themeStore.balance.statusParams.itemTextColor
                  : themeStore.balance.statusParams.itemTextActiveColor,
            }" @click="chekSelectItem(item)">
              {{ item }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </mobile-sub-layout>
</template>

<script setup>
import NoDataSearch from "@/components/nodata/NoDataSearch";
import { ref, reactive, onMounted } from "vue";
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { getBalanceTypeApi, getBalanceListApi } from "@/api/account.js";
import Toast from "@/module/toast/toast.js";
import { useAppStore } from "@/store/useAppStore";
import { useI18n } from "vue-i18n";
import { useThemeStore } from "@/store/useThemeStore";
const themeStore = useThemeStore().theme.account;
const themeStore2 = useThemeStore();
const { t } = useI18n();
const appStore = useAppStore();
let searchSelectVisible = ref(false);
let searchSelectHeight = ref("0rpx");
let balanceRecordList = ref([]);
let balanceTypeList = ref([]);

let searchForm = reactive({
  balanceType: t("account.balanceRecordsStatus.all"),
  page: 1,
  pageSize: 10,
});
//上拉加载 下拉刷新
let isRefreshing = ref(false);
let hasMore = ref(true);
const onRefresherPull = () => {
  balanceRecordList.value = [];
  isRefreshing.value = true;
  searchForm.page = 1;
  hasMore.value = true;
  getBalanceList(searchForm);
};
const onRefresherRestore = () => {
  isRefreshing.value = false;
};
const onScrollToLower = () => {

  if (hasMore.value) {
    searchForm.page++;
    getBalanceList(searchForm, 1);
  }
};
/**
 * 显示查询条件下拉框
 */
const showSearchFormSelect = () => {
  searchSelectVisible.value = true;
  setTimeout(() => {
    searchSelectHeight.value = "869rpx";
  }, 100);
};
/**
 * 关闭查询条件下拉框
 */
const closeSearchFormSelect = () => {
  searchSelectVisible.value = false;
  searchSelectHeight.value = "0rpx";
};
/**
 * 选中查询条件
 */
const chekSelectItem = (item) => {
  searchForm.balanceType = item;
  searchForm.page = 1;
  closeSearchFormSelect();
  getBalanceList(searchForm);
};

/**
 * 获取查询条件
 */
const getBalanceType = async () => {
  const { code, data } = await getBalanceTypeApi();
  if (code == 200) {
    balanceTypeList.value = data.typeList;
  }
};
/**
 * 获取列表数据
 */
const getBalanceList = async (searchForm, type = 0) => {
  Toast.showLoading(t("account.toast.loading"));

  const { code, data } = await getBalanceListApi({
    ...searchForm,
  });

  if (code == 200) {
    if (type == 1) {
      balanceRecordList.value = balanceRecordList.value.concat(data);
    } else {
      balanceRecordList.value = data;
    }

    // balanceRecordList.value.push.apply(data);
    if (data.length < searchForm.pageSize) {
      hasMore.value = false;
    }
    // onRefresherRestore();
    Toast.hideLoading();
  } else {
    Toast.hideLoading();
    // onRefresherRestore();
  }
};
onMounted(() => {
  getBalanceType();
  getBalanceList(searchForm);
});
</script>

<style lang="scss" scoped>
.balance-records-body {
  width: 100vw;
  box-sizing: border-box;
  // height: calc(100vh - 88rpx);
  padding-top: 10rpx;

  .balance-records-content {
    height: 100%;
    // background: #610606;
    // overflow: hidden;
    position: relative;

    .balance-records-search {
      width: 100%;
      box-sizing: border-box;
      padding: 0 44rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 93rpx;

      .balance-records-search-value {
        font-size: 30rpx;
        // color: #ffde00;
      }

      .launch-image-size {
        width: 20rpx;
        height: 11rpx;
      }
    }

    .balance-records-list-scroll {
      width: 100%;
      height: calc(100% - 93rpx);
      // overflow: hidden;
      box-sizing: border-box;
      padding-bottom: 20rpx;

      .scroll-view {
        height: 100%;
      }

      .balance-records-list {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0 30rpx;

        // overflow-y: auto;
        .balance-records-list-item {
          width: 100%;
          height: 171rpx;
          // background: #922222;
          border-radius: 20rpx;
          box-sizing: border-box;
          padding: 38rpx 26rpx 15rpx 19rpx;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          margin-bottom: 20rpx;

          .balance-records-list-item-top {
            width: 100%;
            display: flex;
            justify-content: space-between;
            // color: #ffdf3f;
            height: 25rpx;
            line-height: 25rpx;

            .balance-records-list-item-top-left {
              font-size: 30rpx;
              text-align: left;
            }

            .balance-records-list-item-top-right {
              font-size: 32rpx;
              text-align: right;
            }
          }

          .balance-records-list-item-bottom {
            width: 100%;
            display: flex;
            justify-content: space-between;
            // color: #fff;
            height: 56rpx;
            line-height: 28rpx;

            .balance-records-list-item-bottom-left {
              width: 60%;
              font-size: 26rpx;
              text-align: left;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .balance-records-list-item-bottom-right {
              width: 40%;
              font-size: 22rpx;
              text-align: right;
            }
          }
        }
      }
    }
  }
}

.select-content {
  width: 100vw;
  height: 100vh;
  // background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;

  .select-content-block {
    height: calc(100% - 869rpx);
  }

  .select-content-list {
    width: 100%;
    height: 0rpx;
    transition: height 0.5s ease;
    // background: #922222;
    position: absolute;
    bottom: 0;
    border-radius: 20rpx 20rpx 0rpx 0rpx;

    .select-content-list-header {
      width: 100%;
      z-index: 100;
      height: 110rpx;
      position: relative;
      text-align: center;
      // color: #fed90d;
      font-size: 36rpx;
      line-height: 110rpx;
      border-bottom: 1px solid;

      .close-image {
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        right: 27rpx;
        top: 40rpx;
      }
    }

    .select-content-list-scroll {
      width: 100%;
      height: calc(100% - 110rpx);
      overflow-y: hidden;

      .select-content-list-content {
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
        padding-left: 34rpx;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
      }

      .select-content-list-item {
        width: 100%;
        height: 73rpx;
        line-height: 73rpx;
        // color: #fff;
        font-size: 30rpx;
      }

      .select-content-list-item-active {
        // color: #ffde00;
      }
    }
  }
}
</style>
