<template>
  <view class="common-details-container" v-if="chargeInfo?.title">
    <view class="common-header-wrapper">
      <image :src="pathPre + content.image" mode="aspectFill" />
    </view>
    <view class="common-content-wrapper">
      <view class="common-card">
        <view class="common-card-title">{{ chargeInfo?.title }}</view>
        <view class="common-sub-title">营业时间:{{ chargeInfo?.businessAt }}</view>
        <view class="common-sub-title">客服电话:{{ chargeInfo?.mobile }}</view>
      </view>
      <view class="common-card">
        <view class="common-card-title u-margin-bottom-20">当前电价</view>
        <view class="charge-current-wrapper">
          <view class="current-left-wrap">
            <view class="text">{{ content?.price }}</view>
            <view class="unit">元/度</view>
          </view>
          <view class="current-right-wrap">09:00-12:00</view>
        </view>
        <HyCharge title="快充" :freeNum="content?.fastChargeFree" :totalNum="content?.fastChargeTotal" :status="content?.fastChargeStatus" />
        <HyCharge title="慢充" :freeNum="content?.slowChargeFree" :totalNum="content?.slowChargeTotal" :status="content?.slowChargeStatus" />
        <view class="common-card-title u-margin-top-45">温馨提示</view>
        <view class="common-card-content">
          <u-parse :html="content?.intro" />
        </view>
      </view>
    </view>
  </view>
  <view class="no-data-container" v-else>
    <u-empty />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getParkServicePower } from '@/api/home'
import { useGlobal } from '@/composables/index'

const { pathPre } = useGlobal()

const chargeInfo = ref<any>({})
const content = ref<any>({})
onLoad(async () => {
  const parkId = uni.getStorageSync('parkId')
  const res = await getParkServicePower(parkId)
  if (res.code === 200) {
    if (res.data) {
      chargeInfo.value = res.data
      content.value = JSON.parse(chargeInfo.value?.content)
    }
  }
})
</script>

<style lang="scss" scoepd>
@import '../base.scss';
.charge-current-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  .current-left-wrap {
    display: flex;
    align-items: center;
    .text {
      font-size: 31rpx;
      color: #ff3d28;
      font-weight: 600;
    }
    .unit {
      font-size: 21rpx;
      color: #333;
    }
  }
  .current-right-wrap {
    font-size: 21rpx;
    color: #999;
  }
}
</style>
