<template>
  <view
    class="pl-30 pr-30"
    v-if="infiniteScroller.list && infiniteScroller.list.length"
  >
    <view
      class="item flex-align-center"
      v-for="(item, index) in infiniteScroller.list"
      :key="index"
      @click="detail(index)"
    >
      <view>
        <view class="fs-30 fw-500" key="title" duration="300">充电费用</view>
        <view class="fs-24 mt-10" style="color: rgba(0, 0, 0, 0.4)">{{
          item.transaction_time
        }}</view>
      </view>
      <view class="ml-auto" style="text-align: right">
        <view class="fs-36 fw-500">
          <text>{{ item.amount }}</text>
          <text class="fs-24 ml-6">元</text>
        </view>
      </view>
      <view class="ml-20">
        <uni-icons type="right" size="12" color="rgba(0,0,0,0.4)"></uni-icons>
      </view>
    </view>
  </view>

  <view
    class="pt-40 flex-center fs-30"
    style="color: rgba(0, 0, 0, 0.6)"
    v-if="infiniteScroller.list && infiniteScroller.list.length <= 0"
    >暂无数据</view
  >
</template>

<script setup lang="ts">
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { fetchWallet } from "../../api/user";
import { useInfiniteScroll } from "../../utils/infinite-scroll";
const infiniteScroller = useInfiniteScroll(10, (page) => {
  return fetchWallet(3, page, 10).then((res: any) => {
    if (res && res.length) {
      res.forEach((item: any) => {
        item.amount = (Number(item.amount) / 100).toFixed(2);
      });
    }
    return res;
  });
});
const detail = (index: number) => {
  if (!infiniteScroller.list) {
    return;
  }
  uni.navigateTo({
    url: `/pages-charge/order/order?id=${infiniteScroller.list[index].transaction_id}`,
  });
};
onLoad(() => {
  infiniteScroller.refresh();
});
onPullDownRefresh(() => {
  infiniteScroller.refresh();
});
onReachBottom(() => {
  infiniteScroller.next();
});
</script>

<style lang="scss">
.item {
  height: 170rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
</style>
