<template>
  <view class="pl-20 pr-20" v-if="list && list.length">
    <view class="mt-20" v-for="(item, index) in 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"
        :distance="item.distance"
        :availableParkingNum="item.availableParkingNum"
        :parkingNum="item.parkingNum"
      ></charge-station>
    </view>
  </view>

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

  <view class="pt-40 flex-center fs-28" style="opacity: 0.6" v-if="!list"
    >加载中</view
  >
</template>

<script setup lang="ts">
import {_fetchStations, _getDistance, fetchStationByIds} from "../../api/charge";
import { fetchCollectList } from "../../api/user";
import { onLoad } from "@dcloudio/uni-app";
import { requireAuth } from "@/utils/auth";
import { ref } from "vue";
const list = ref<any[]>();
onLoad(() => {
  if (!requireAuth()) {
    return;
  }
  fetchCollectList().then((stationIdList) => {
    if (stationIdList) {
      let {latitude, longitude} = getApp<any>().globalData.fetchLocation
      return _fetchStations(1, 100, latitude, longitude,  stationIdList)
    } else {
      return Promise.reject([])
    }

    // fetchStationByIds(collectIds || []).then((res: any) => {
    //   list.value = res;
    // });
  }).then(res=>{
    if (res && res.length > 0) {
      let {latitude, longitude} = getApp<any>().globalData.fetchLocation
      res.forEach(item => {
        item.stationLatDistance = _getDistance(
            latitude||22.696779,
            longitude||114.044805,
            item.location.stationLat,
            item.location.stationLng
        );
        item.totalFee = (Number(item.currentPolicyInfo?.servicePrice||0)+Number(item.currentPolicyInfo?.elecPrice||0)).toFixed(2)
      })
    }
    list.value = res;
  });
});
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}
</style>
