<template>
  <view class="notice-card w-full">
    <view v-if="!detailOpen" class="notice-card__summary bg-[#fffbeb] rounded-[24px] w-full">
      <view class="notice-card__summary-title  text-[#b45309] font-size-16 font-900">
        {{ summary.title }}
      </view>
      <view class="notice-card__summary-content text-[#d97706]  font-size-14 font-900">
        {{ summary.content }}
      </view>
      <view class="notice-card__summary-footer flex flex-items-center flex-justify-between">
        <view class="notice-card__summary-time text-[#d97706]  font-size-12 font-900">
          {{ summary.publishTime }}
        </view>
        <view class="notice-card__summary-link  text-[#b45309] font-size-14 font-900"
          :class="{ 'is-disabled': disabled }" @click="openDetail">
          {{ summary.actionText }}
        </view>
      </view>
    </view>

    <view v-else class="notice-card__detail bg-white rounded-[24px] overflow-hidden w-full">
      <view class="notice-card__detail-head flex flex-items-center">
        <view class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
          @click="closeDetail">
          <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
        </view>
        <view class="notice-card__head-title text-[#1e293b] font-size-18 font-900">
          {{ detail.navTitle }}
        </view>
      </view>

      <image class="notice-card__image block w-full" :src="detail.image" mode="aspectFill" />

      <view class="notice-card__detail-body">
        <view class="notice-card__detail-title text-[#1e293b] font-size-20 font-900">
          {{ detail.title }}
        </view>
        <view class="notice-card__time-pill flex flex-items-center bg-[#f8fafc] text-[#475569] font-size-13 font-900">
          <text class="notice-card__time-icon">{{ detail.timeIcon }}</text>
          <text>{{ detail.publishTime }}</text>
        </view>
        <view class="notice-card__divider"></view>
        <view v-for="paragraph in paragraphs" :key="paragraph.id"
          class="notice-card__paragraph text-[#475569] font-size-14 font-800">
          <text v-for="segment in paragraph.segments" :key="segment.text"
            :class="{ 'notice-card__strong': segment.strong }">
            {{ segment.text }}
          </text>
        </view>
      </view>
    </view>
  </view>
</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>

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