<template>
  <div class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
    <!-- 占位撑开 -->
    <div class="w-vw"></div>
    <div class="flex flex-col px-16 pt-16 pb-12 border-box" @click="openDetail(item)">

      <div class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
        {{ item.badge }}
      </div>

      <div class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
        {{ item.title }}
      </div>
      <div class="long-text-guide-card__summary-text color-94A3B8 font-size-14 font-500 ellipsis-2">
        {{ item.summary }}
      </div>
      <div class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
        <span class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</span>
        <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
      </div>

    </div>
  </div>

</template>

<script setup>
import { defineProps, computed } from "vue";
import { getLongTextGuideDetailRoute } from "./detailRoutes.mjs";
const props = defineProps({
  componentName: {
    type: String,
    default: 'longTextCard',
  },
});

const longTextCard = {
  type: 'longTextCard',
  badge: "漂流攻略",
  badgeTone: "amber",
  title: "下水之前，先听小七唠两句",
  summary: "卧龙潭漂流值得冲，全程四十分钟、三段激流，但晕水的人要掂量…",
  footer: "点击查看完整攻略",
}

const longTextCardScenicSpot = {
  type: 'longTextCardScenicSpot',
  badge: "景点故事",
  badgeTone: "green",
  title: "小七孔古桥 · 走了三百年的石拱",
  summary: "小七孔古桥是一座三百岁的七孔石桥，小七孔的名字就从这儿来…",
  footer: "点击查看完整介绍",
}

const longTextCardRoute = {
  type: 'longTextCardRoute',
  badge: "路线指引",
  badgeTone: "violet",
  title: "漂完卧龙潭，顺道去鸳鸯湖",
  summary: "卧龙潭到鸳鸯湖坐观光车约二十分钟。要紧的是鸳鸯湖分上下湖…",
  footer: "点击查看完整路线",
}

const longTextCardSnap = {
  type: 'longTextCardSnap',
  badge: "拍照攻略",
  badgeTone: "blue",
  title: "鸳鸯湖玻璃船，这样拍才不亏",
  summary: "玻璃船拍照，关键是拍水下那抹通透的绿，顺光时段最出片…",
  footer: "点击查看完整攻略",
}

const item = computed(() => {
  switch (props.componentName) {
    case 'longTextCard':
      return longTextCard;
    case 'longTextCardSnap':
      return longTextCardSnap;
    case 'longTextCardRoute':
      return longTextCardRoute;
    case 'longTextCardScenicSpot':
      return longTextCardScenicSpot;
    default:
      return longTextCard;
  }
});

const openDetail = (item) => {
  const url = getLongTextGuideDetailRoute(item.type);
  if (!url) {
    uni.showToast({
      title: "暂未配置详情页",
      icon: "none",
    });
    return;
  }

  uni.navigateTo({ url });
};

</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
