<template>
  <view class="notice-bar">
    <wd-notice-bar
      :text="displayTexts"
      color="#333"
      background-color="#fff"
      @click="handleNoticeClick"
    >
      <template #prefix>
        <view class="notice-bar-left flex-row align-center">
          <view class="notice-icon" v-if="props.prefix">
            <wd-icon
              class="prefix"
              :name="props.noticeData.notice_img"
              size="28rpx"
              v-if="props.noticeData.notice_img"
            ></wd-icon>
          </view>
          <view class="header-text flex-row align-center">
            <text class="smart-text floor-font-28">{{ props.firstText }}</text>
            <text class="announcement-text floor-font-28">{{ props.secondText }}</text>
          </view>
        </view>
      </template>
      <template #suffix>
        <view class="arrow-right" v-if="props.suffix">
          <wd-icon name="arrow-right" size="24rpx"></wd-icon>
        </view>
      </template>
    </wd-notice-bar>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    prefix?: boolean
    suffix?: boolean
    firstText?: string
    secondText?: string
    noticeData: {
      notice_img?: string
      list: Array<{
        title: string
        content: string
        url: string
      }>
    }
  }>(),
  {
    prefix: false,
    suffix: false,
    firstText: '智慧',
    secondText: '公告'
  }
)

const emits = defineEmits<{
  (e: 'noticeClick', index: number): void
}>()

// 计算属性：提取content作为展示文本
const displayTexts = computed(() => {
  // 从noticeData.list中提取所有content组成数组
  return props.noticeData?.list?.map(item => item.content) || []
})

const handleNoticeClick = ({ index }: { index: number }) => {
  if (props.noticeData?.list?.[index]?.url) {
    uni.navigateTo({
      url: props.noticeData.list[index].url,
      fail: () => {
        uni.reLaunch({
          url: props.noticeData.list[index].url
        })
      }
    })
  }
  emits('noticeClick', index)
}
</script>

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

// 穿透修改通知栏内容样式
:deep(.wd-notice-bar__content) {
  font-size: 24rpx;
  color: #666; // 内容文本颜色区分于标题
}

.notice-bar {
  .header-text {
    flex-wrap: wrap;
    font-size: 28rpx;
    margin-left: 4rpx;

    .smart-text {
      color: $else-highlight-color;
      font-family: $font-family-bold;
      font-weight: 700;
    }

    .announcement-text {
      color: #333;
      font-family: $font-family-bold;
      font-weight: 700;
    }
  }
}
</style>
