<template>
  <div class="w-full">
    <div v-if="!detailOpen"
      class="w-full bg-[#FFFBEB] rounded-[24px] pt-4 px-5 pb-[14px] border border-[#fde68a] shadow-[0_8px_22px_rgba(245,158,11,0.08)] box-border">
      <div class="color-B45309 text-[16px] font-bold leading-[22px]">
        {{ summary.title }}
      </div>
      <div class="mt-[6px] leading-5 text-[#D97706] text-[14px] font-bold">
        {{ summary.content }}
      </div>
      <div class="flex items-center justify-between min-w-0 mt-2">
        <div class="min-w-0 leading-[18px] text-[#D97706] text-[12px] font-bold">
          {{ summary.publishTime }}
        </div>
        <div
          class="ml-4 leading-[18px] underline whitespace-nowrap color-B45309 text-[14px] font-bold active:opacity-[0.82]"
          :class="{ 'opacity-[0.55]': disabled }" @click="openDetail">
          {{ summary.actionText }}
        </div>
      </div>
    </div>

    <div v-else
      class="w-full bg-white rounded-[24px] overflow-hidden border border-[rgba(226,232,240,0.72)] shadow-[0_12px_30px_rgba(15,23,42,0.05)]">
      <div class="flex items-center h-[68px] px-5 box-border">
        <div
          class="flex items-center justify-center rounded-full shrink-0 w-[34px] h-[34px] mr-[14px] text-[#64748b] text-[28px] leading-none bg-[#f8fafc]"
          @click="closeDetail">
          <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
        </div>
        <div class="text-[#1e293b] text-[18px] font-bold leading-6">
          {{ detail.navTitle }}
        </div>
      </div>

      <image class="block w-full h-[250px]" :src="detail.image" />

      <div class="pt-[22px] px-5 pb-7 box-border">
        <div class="text-[#1e293b] font-size-20 font-bold leading-7">
          {{ detail.title }}
        </div>
        <div
          class="inline-flex items-center h-[34px] mt-4 px-3 border border-[#e2e8f0] rounded-full leading-[34px] box-border bg-[#f8fafc] text-[#475569] text-[13px] font-bold">
          <span class="mr-[6px] text-[#64748b] text-[15px] leading-[15px]">{{ detail.timeIcon }}</span>
          <span>{{ detail.publishTime }}</span>
        </div>
        <div class="h-px my-[26px] mt-[26px] mb-5 bg-[#e5e7eb]"></div>
        <div v-for="paragraph in paragraphs" :key="paragraph.id"
          class="text-[#475569] text-[14px] font-bold leading-[30px] [&+&]:mt-[18px]">
          <span v-for="segment in paragraph.segments" :key="segment.text"
            :class="segment.strong ? 'text-[#1e293b] font-black' : ''">
            {{ segment.text }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["select", "back", "action"]);

const detailOpen = ref(false);
const summary = computed(() => props.data.summary || {});
const detail = computed(() => props.data.detail || {});
const paragraphs = computed(() => detail.value.paragraphs || []);

const openDetail = () => {
  if (props.disabled) return;
  detailOpen.value = true;
  emit("select", props.data);
  emit("action", props.data);
};

const closeDetail = () => {
  detailOpen.value = false;
  emit("back");
};
</script>
