<template>
  <view class="list">
    <navigation-bar title="充电站列表"></navigation-bar>
    <view class="pl-20 pr-20" v-if="infiniteScroller.list">
      <view
        class="mt-20"
        v-for="(item, index) in infiniteScroller.list"
        :key="index"
      >
        <charge-station
          :title="item.stationName"
          :tag="item.construction"
          :price="item.totalFee"
          :fast="item.fastEquipmentInfos"
          :slow="item.slowEquipmentInfos"
          :sId="item.StationID"
          :address="item.address"
          :latitude="item.location.stationLat"
          :longitude="item.location.stationLng"
        ></charge-station>
      </view>
    </view>
    <view
      class="flex-center flex-column pt-79"
      v-if="infiniteScroller.list && infiniteScroller.list.length <= 0"
    >
      <image class="empty" src="/static/images/map-empty.png" mode="widthFix" />
      <view class="fs-22 mt-14" style="color: rgba(0, 0, 0, 0.5)"
        >暂无充电站信息</view
      >
    </view>
    <view class="flex-center flex-column pt-30" v-if="!infiniteScroller.list">
      <view class="fs-28 mt-14" style="color: rgba(0, 0, 0, 0.5)">加载中</view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 废弃页面
import { fetchStations } from "../../api/charge";
import { fetchCollectList } from "../../api/user";
import { useInfiniteScroll } from "../../utils/infinite-scroll";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
const infiniteScroller = useInfiniteScroll(6, (page) => {
  return fetchStations(page, 6);
});
onLoad(() => {
  fetchCollectList().then(() => {
    infiniteScroller.refresh();
  });
});
onReachBottom(() => {
  infiniteScroller.next();
});
</script>

<style>
.list {
  width: 100w;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.empty {
  width: 80px;
}
</style>
