<template>
  <!-- 景点详情 -->
  <FlexCol v-if="currentScenicSpot" position="relative" :padding="30" :gap="20">
    <FlexRow :gap="20" justify="space-between" align="center">
      <Image :src="currentScenicSpot.image" :radius="20" :width="80" :height="80" mode="aspectFill" />
      <FlexCol>
        <Text :fontSize="33" bold>{{ currentScenicSpot.name }}</Text>
        <Text :fontSize="26" color="text.second">{{ currentScenicSpot.address }}</Text>
      </FlexCol>
      <Button
        text="导航"
        icon="map"
        size="small"
        :radius="40"
        @click="openLocation(currentScenicSpot)"
      />
    </FlexRow>
    <ImageSwiper :images="currentScenicSpot.images" />
    <Empty v-if="!currentScenicSpot.intro" :description="currentScenicSpot.name + '暂无简介'" />
    <Parse v-else :content="currentScenicSpot.intro" />
  </FlexCol>
</template>

<script setup lang="ts">
import type { RouteInfo } from '@/api/traval/RouteApi';
import Button from '@/components/basic/Button.vue';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import Parse from '@/components/display/parse/Parse.vue';
import Empty from '@/components/feedback/Empty.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import ImageSwiper from '@/pages/parts/ImageSwiper.vue';
import { onMounted, ref } from 'vue';

const currentScenicSpot = ref<RouteInfo['items'][number]['scenicSpot']|null>(null);

function openLocation(item: RouteInfo['items'][number]['scenicSpot']) {
  uni.openLocation({
    latitude: item.latitude,
    longitude: item.longitude,
  });
}

onMounted(() => {
  currentScenicSpot.value = uni.getStorageSync('travelRouteItem');
});
</script>