<template>
  <!--详情页，标题下方可配置单元-->
  <template v-for="(item, k) in introBlocks" :key="k">
    <!-- 同级别非遗项目显示 -->
    <view v-if="item.type == 'OtherLevelList' && content.otherLevel && content.otherLevel.length > 0" class="mt-2">
      <view 
        v-for="(item, k) in content.otherLevel"
        :key="k"
        class="d-flex flex-row align-center justify-between p-3 radius-base bg-light"
        @click="navTo('/pages/article/data/details?pageConfigName=intangible-details', {
          id: item.id,
        })"
      >
        <view class="d-flex flex-row align-center">
          <Tag
            :text="StringUtils.cutString(item.levelText as string, 3)"
            size="small" scheme="light" type="primary"
            class="flex-shrink-0"
          />
          <view class="d-flex flex-col ml-2">
            <text>{{ item.title }} ({{ item.regionText }})</text>
            <text v-if="item.unit" class="size-s color-second">{{ item.unit }}</text>
          </view>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <!-- 去这里导航按钮 -->
    <FlexRow v-else-if="item.type == 'NavTo' && content.address" justify="space-between" align="center">
      <FlexRow :gap="10" :radius="20" :padding="10" align="center" backgroundColor="background.warning">
        <Icon icon="map" />
        <text class="text-lines-2">{{ content.address }}</text>
      </FlexRow>
      <Button icon="navigation" type="text" @click="openLocation">     
        去这里
      </Button>
    </FlexRow>
  </template>
</template>

<script setup lang="ts">
import { type PropType } from 'vue';
import type { CommonCategoryDetailIntroBlocksDesc } from './CommonCategoryDetail.vue';
import { StringUtils } from '@imengyu/imengyu-utils';
import Tag from '@/components/display/Tag.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Button from '@/components/basic/Button.vue';
import Icon from '@/components/basic/Icon.vue';
import { navTo } from '@/components/utils/PageAction';

const props = defineProps({
  introBlocks: {
    type: Array as PropType<CommonCategoryDetailIntroBlocksDesc[]>,
    default: () => [],
  },
  content: {
    type: null,
    default: () => ({}),
  },
})

function openLocation() {
  uni.openLocation({
    latitude: Number(props.content.latitude),
    longitude: Number(props.content.longitude),
    name: props.content.address,
  });
}
</script>
