<template>
  <view style="opacity: 0; pointer-events: none">
    <navigation-bar></navigation-bar>
  </view>

  <image
      src="/static/images/back.png"
      mode="widthFix"
      class="back"
      @click="back"
      :style="backStyle"
  ></image>

  <view
      class="search flex-align-center"
      v-if="searchStyle"
      :style="searchStyle"
  >
    <view class="search_icon flex-center flex-shrink">
      <icon type="search" size="18" color="rgba(0,0,0,0.3)"></icon>
    </view>
    <input
        class="search_input flex-grow"
        :value="keyword"
        type="text"
        :focus="true"
        placeholder="搜索附近充电站"
        placeholder-class="input-placeholder"
        @input="input"
        @confirm="search"
        confirm-type="search"
    />
    <view
        class="search_close flex-align-center flex-shrink"
        @click.stop="clear"
        v-if="keyword"
    >
      <image class="icon" src="/static/images/search-close.png"></image>
    </view>
  </view>

  <block v-if="list">
    <view class="pl-20 pr-20" v-if="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"
            :border="true"
        ></charge-station>
      </view>
    </view>
    <view class="empty flex-center flex-column" v-else>
      <image
          class="image"
          src="/static/images/search-empty.png"
          mode="widthFix"
      ></image>
      <view class="tip">无搜索结果...</view>
    </view>
  </block>
</template>

<script setup lang="ts">
import {_getDistance, searchStation} from "@/api/charge";
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";

const searchStyle = ref<any>();
const backStyle = ref<any>();
const keyword = ref("");
const list = ref<any[]>();

onLoad(() => {
  const menu = uni.getMenuButtonBoundingClientRect();
  searchStyle.value = {
    top: `${menu.top}px`,
    height: `${menu.height}px`,
  };
  backStyle.value = {
    top: `${menu.top + 8}px`,
  };
});

const back = function () {
  uni.navigateBack();
};
const clear = function () {
  keyword.value = "";
};
const input = function (e: any) {
  if (e.detail && e.detail.value) {
    keyword.value = e.detail.value;
  }
};
const search = function () {
  if (!keyword.value) {
    uni.showModal({
      title: "温馨提示",
      content: "请输入搜素内容",
      showCancel: false,
      confirmColor: "#2d9e95",
    });
    return;
  }
  uni.showLoading({
    title: "搜索中",
  });
  searchStation(keyword.value)
      .then((res) => {
        console.log("search result", res)
        uni.hideLoading();
        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;
      })
      .catch(() => {
        uni.hideLoading();
        list.value = [];
      });
};
</script>

<style lang="scss">
.back {
  position: absolute;
  width: 18rpx;
  left: 34rpx;
}

.search {
  position: absolute;
  left: 80rpx;
  width: 450rpx;
  border-radius: 32rpx;
  background-color: var(--color-sec);

  &_icon {
    width: 72rpx;
  }

  &_input {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    font-size: 28rpx;
  }

  .input-placeholder {
    color: rgba(0, 0, 0, 0.3);
  }

  &_close {
    width: 50rpx;

    .icon {
      height: 30rpx;
      width: 30rpx;
    }
  }
}

.empty {
  margin-top: 240rpx;

  .image {
    width: 368rpx;
  }

  .tip {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.4);
    margin-top: 20rpx;
  }
}
</style>
