<template>
  <view class="common-details-container">
    <view class="common-header-wrapper">
      <image :src="content.image" mode="scaleToFill" />
    </view>
    <view class="common-content-wrapper">
      <view class="common-card">
        <!-- common title -->
        <view class="common-card-title">{{ boyInfo?.title }}</view>
        <!-- sub title -->
        <view class="common-sub-title">营业时间:{{ boyInfo?.businessAt }}</view>
        <view class="common-sub-title">客服电话:{{ boyInfo?.mobile }}</view>
      </view>
      <view class="common-card">
        <view class="common-card-title u-margin-bottom-20">基本介绍</view>
        <view class="common-card-content">
          <u-parse :html="content?.intro" />
        </view>
        <view class="common-card-title u-margin-top-45">设施配置</view>
        <view class="bottom-box-wrap">
          <HyTag v-for="item in content?.facilities" :key="item" :text="item.name" :imgUrl="item.img" />
        </view>
      </view>
    </view>
  </view>
</template>

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

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

<style lang="scss" scoepd>
@import '../base.scss';
.bottom-box-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 24rpx;
  :deep(.tag-item-wrapper) {
    margin-right: 30rpx;
  }
}
</style>
