<template>
  <view
    :class="[
      'pl-20',
      'pr-20',
      'pb-40',
      `container-${descDialog ? 'hidden' : ''}`,
    ]"
  >
    <view class="banner flex-column mt-20" v-if="canUseCount >= 0">
      <view class="flex-align-center">
        <view class="fs-40 fw-500 color-fff">{{ title }}</view>
        <view class="tag flex-center pl-15 pr-15 ml-20 fs-24 color-fff"
          >{{ canUseCount }}可用</view
        >
      </view>
      <view class="flex mt-20">
        <image
          src="../images/machines-banner-address.png"
          mode="widthFix"
          style="width: 16px; display: block"
        />
        <view class="ml-12 fs-26 color-fff">{{ location.address }}</view>
      </view>
      <view
        class="foot mt-30 flex-justify-end flex-align-center"
        @click="openDesc"
      >
        <view class="fs-28 mr-4 color-fff">计费说明</view>
        <view style="margin-top: -2px">
          <uni-icons type="right" size="8" color="#fff"></uni-icons>
        </view>
        <view style="margin-left: -4px; margin-top: -2px">
          <uni-icons type="right" size="8" color="#fff"></uni-icons>
        </view>
      </view>
      <image
        src="../images/machines-banner-nav.png"
        mode="widthFix"
        class="nav"
        @click="openAddress"
      />
    </view>
    <view
      class="mt-20"
      v-if="station"
      v-for="(item, index) in station.EquipmentInfos"
      :key="index"
    >
      <ChargeMachine
        :title="item.EquipmentID"
        :price="station.TotalFee"
        :time="currentTime"
        :list="item.ConnectorInfos"
      ></ChargeMachine>
    </view>
    <view class="dialog flex-center" v-if="descDialog">
      <view class="desc-dialog">
        <view
          @click.stop="closeDesc"
          class="desc-dialog_head flex-center fs-32 fw-500 color-fff"
          >计费说明<image
            src="/static/images/icon-close.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="desc-dialog_body">
          <view class="table">
            <view class="tr flex">
              <view class="th flex-center fs-28">时间</view>
              <view class="th flex-center flex-column">
                <view>电费</view>
                <view class="fs-24 lh-24" style="color: rgba(0, 0, 0, 0.5)"
                  >（元/kwh）</view
                >
              </view>
              <view class="th flex-center flex-column">
                <view>服务费</view>
                <view class="fs-24 lh-24" style="color: rgba(0, 0, 0, 0.5)"
                  >（元/kwh）</view
                >
              </view>
            </view>
            <view
              class="tr flex"
              v-for="(item, index) in desc"
              :key="index"
              :style="{
                'border-top': `1rpx solid ${
                  index === 0 ? 'transparent' : '#E5E5E5'
                }`,
              }"
            >
              <view class="td flex-center">{{ item.StartTimeFormat }}</view>
              <view class="td flex-center">{{ item.ElecPrice }}</view>
              <view class="td flex-center">{{ item.SevicePrice }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { fetchStation, fetchStationPriceDesc } from "../../api/charge";
import { onLoad } from "@dcloudio/uni-app";
import ChargeMachine from "./charge-machine/charge-machine.vue";
const descDialog = ref(false);
const desc = ref<any[]>([]);
const canUseCount = ref(0);
const title = ref("");
const location = ref({
  address: "",
  latitude: "",
  longitude: "",
});
const station = ref();
const currentTime = ref();
onLoad((options: any) => {
  const _title = options.title || "";
  uni.setNavigationBarTitle({
    title: _title,
  });
  title.value = _title;
  if (getApp<any>().globalData.lastData.station) {
    const { address, latitude, longitude } =
      getApp<any>().globalData.lastData.station;
    location.value = {
      address,
      latitude,
      longitude,
    };
    getApp<any>().globalData.lastData.station = undefined;
  }
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  fetchStation(Number(options.id))
    .then((res) => {
      let ConnectorID = "";
      if (res.EquipmentInfos && res.EquipmentInfos.length) {
        res.EquipmentInfos.forEach((item: any) => {
          if (item.ConnectorInfos && item.ConnectorInfos.length) {
            item.ConnectorInfos.forEach((con: any) => {
              if (!ConnectorID) {
                ConnectorID = con.ConnectorID;
              }
              if (
                con.ConnectorStatusInfo &&
                con.ConnectorStatusInfo.Status === 1
              ) {
                canUseCount.value++;
              }
            });
          }
        });
      }
      station.value = res;
      if (ConnectorID) {
        return fetchStationPriceDesc(ConnectorID);
      } else {
        // eslint-disable-next-line promise/no-return-wrap
        return Promise.resolve({
          PolicyInfos: [],
        });
      }
    })
    .then((res) => {
      uni.hideLoading();
      currentTime.value = res.CurrentTime;
      desc.value = res.PolicyInfos || [];
    })
    .catch((err) => {
      // eslint-disable-next-line no-console
      console.log(err);
      uni.hideLoading();
      uni.showToast({
        title: "加载失败，请重试",
        icon: "none",
      });
    });
});
const openAddress = function () {
  uni.openLocation({
    latitude: Number(location.value.latitude),
    longitude: Number(location.value.longitude),
    scale: 18,
    name: title.value,
    address: location.value.address,
  });
};
const openDesc = function () {
  descDialog.value = true;
};
const closeDesc = function () {
  descDialog.value = false;
};
</script>

<style lang="scss">
@import "../../styles/dialog.scss";
page {
  background-color: #f5f5f5;
}

.container-hidden {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.banner {
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #347dff 0%, #4faaff 100%);
  min-height: 280rpx;
  padding: 0 40rpx;
  padding-top: 40rpx;

  .tag {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    height: 20px;
  }

  .foot {
    flex-shrink: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    height: 88rpx;
  }

  .nav {
    position: absolute;
    top: 42rpx;
    right: 40rpx;
    width: 120rpx;
  }
}

.desc-dialog {
  background-color: transparent;
  width: 690rpx;
  overflow: hidden;
  border-radius: 10px;

  &_head {
    background: linear-gradient(180deg, #347dff 0%, #4faaff 100%);
    height: 104rpx;
    position: relative;

    image {
      position: absolute;
      width: 12px;
      right: 40rpx;
      top: 40rpx;
    }
  }

  &_body {
    max-height: 860rpx;
    box-sizing: border-box;
    padding: 30rpx;
    background-color: #fff;
    overflow-y: auto;

    .table {
      border: 1rpx solid #e5e5e5;
      border-radius: 10rpx;
      overflow: hidden;
    }

    .tr {
      width: 100%;

      & > view:nth-child(1) {
        width: 254rpx;
        flex-shrink: 0;
        border-right: 1rpx solid #e5e5e5;
      }

      & > view:nth-child(2) {
        width: 200rpx;
        flex-shrink: 0;
        border-right: 1rpx solid #e5e5e5;
      }

      & > view:nth-child(3) {
        flex-grow: 1;
      }
    }

    .th {
      border-bottom: 1rpx solid #e5e5e5;
      background-color: #f1f6ff;
      height: 92rpx;
      color: rgba(0, 0, 0, 0.7);
      font-size: 28rpx;

      view {
        color: rgba(0, 0, 0, 0.7);
        font-size: 28rpx;
      }
    }

    .td {
      color: #000;
      font-size: 26rpx;
      height: 76rpx;
    }
  }
}
</style>
