<template>
  <view class="common-details-container">
    <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">
          <view class="text">{{ details.title }}</view>
          <view class="card-tag">{{ content.level }}</view>
        </view>
        <view class="common-sub-title">开放时间：{{ details?.businessAt }}</view>
        <view class="common-sub-title">
          <view class="text">地址：{{ content?.address }}</view>
          <view class="sub-img-wrap" @click="goToNavigation(content?.longitude, content?.latitude, content?.title)">
            <image :src="minioUrl + '/icon_go.png'" mode="aspectFill" />
          </view>
        </view>
      </view>
      <view class="common-card">
        <view class="common-card-content">
          <u-parse :html="content?.intro" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getParkServiceScenicDetail } from '@/api/home'
import { useGlobal } from '../../composables/index'
const { minioUrl, pathPre } = useGlobal()

const id = ref<string>('')
const details = ref<any>({})
const content = ref<any>({})
onLoad(async (options) => {
  id.value = options?.id || ''
  const parkId = uni.getStorageSync('parkId')
  const res = await getParkServiceScenicDetail(id.value, parkId)
  if (res.code === 200) {
    details.value = res.data
    content.value = JSON.parse(details.value.content)
  }
})

// 导航功能
const goToNavigation = (longitude: string, latitude: string, name: string) => {
  uni.openLocation({
    latitude: Number(latitude),
    longitude: Number(longitude),
    name: name,
    success: () => {
      console.log('导航功能调用成功')
    }
  })
}
</script>

<style lang="scss" scoepd>
@import '../base.scss';
</style>
