<template>
  <view class="notice-detail-page">
    <view class="content" v-if="!loading">
      <view class="detail-card" v-if="notice && (notice.noticeTitle || notice.noticeId)">
        <view class="title-section">
          <text class="detail-title">{{ notice.noticeTitle || '未命名通知' }}</text>

          <view class="tag-row">
            <text class="tag kind" :class="typeClassMap[notice.type] || ''">{{ typeText(notice.type) }}</text>
            <text class="tag status" :class="statusClassMap[notice.status] || statusClassMap['__default__']">{{ statusText(notice.status) }}</text>
            <text class="tag sms" :class="smsClassMap[notice.smsStatus] || ''">{{ smsText(notice.smsStatus) }}</text>
          </view>
        </view>

        <view class="info-list">
          <view class="row" v-if="notice.noticeType">
            <text class="label">通知类型：</text>
            <text class="value">{{ notice.noticeType }}</text>
          </view>
          <view class="row" v-if="notice.noticeSource">
            <text class="label">通知来源：</text>
            <text class="value">{{ notice.noticeSource }}</text>
          </view>
          <view class="row" v-if="notice.draftDept">
            <text class="label">拟稿单位：</text>
            <text class="value">{{ notice.draftDept }}</text>
          </view>
          <view class="row" v-if="notice.noticeScope">
            <text class="label">通知范围：</text>
            <text class="value">{{ notice.noticeScope }}</text>
          </view>
          <view class="row" v-if="notice.bizType || notice.bizId">
            <text class="label">业务信息：</text>
            <text class="value">{{ bizText(notice.bizType, notice.bizId) }}</text>
          </view>
          <view class="row" v-if="notice.noticeTime">
            <text class="label">通知时间：</text>
            <text class="value">{{ formatDate(notice.noticeTime) }}</text>
          </view>
          <view class="row" v-if="notice.remark">
            <text class="label">备注：</text>
            <text class="value remark-value">{{ notice.remark }}</text>
          </view>
        </view>

        <view class="content-box">
          <jyf-parser
            v-if="notice.noticeContent"
            :html="notice.noticeContent"
            ref="article"
            :tag-style="tagStyle"
          ></jyf-parser>
          <view class="empty" v-else>暂无通知内容</view>
        </view>
      </view>

      <view class="empty-page" v-else>
        <text class="iconfont icon-wushuju"></text>
        <text class="text">暂无详情数据</text>
      </view>
    </view>

    <view class="loading" v-else>
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
import jyfParser from '@/components/jyf-parser/jyf-parser';
import { pubnoticeDetailApi } from '@/api/pubnotice.js';

export default {
  components: {
    'jyf-parser': jyfParser,
  },
  data() {
    return {
      loading: false,
      noticeId: '',
      notice: {},
      tagStyle: {
        img: 'max-width:100%;height:auto;display:block;',
        table: 'width:100%;border-collapse:collapse;',
        video: 'max-width:100%;',
      },
      typeClassMap: {
        1: 'tag-internal',
        2: 'tag-external',
        '__default__': ''
      },
      statusClassMap: {
        0: 'status-draft',
        1: 'status-submit',
        '__default__': ''
      },
      smsClassMap: {
        0: 'sms-unsent',
        1: 'sms-sent',
        '__default__': ''
      }
    };
  },
  onLoad(options) {
    this.noticeId = options.noticeId || options.id || '';
    if (this.noticeId) this.fetchDetail();
  },
  methods: {
    async fetchDetail() {
      this.loading = true;
      try {
        const res = await pubnoticeDetailApi(this.noticeId);
        this.notice = res?.data || {};
      } catch (e) {
        uni.showToast({
          title: typeof e === 'string' ? e : '获取通知详情失败',
          icon: 'none',
        });
      } finally {
        this.loading = false;
      }
    },
    bizText(bizType, bizId) {
      const t = bizType ? String(bizType) : '';
      const id = bizId ? String(bizId) : '';
      if (!t && !id) return '—';
      if (t && id) return `${t} #${id}`;
      return t || id;
    },
    formatDate(val) {
      if (!val) return '';
      if (typeof val === 'string') {
        return val.replace('T', ' ').slice(0, 19);
      }
      if (val instanceof Date) {
        const pad = (n) => (n < 10 ? '0' + n : '' + n);
        return `${val.getFullYear()}-${pad(val.getMonth() + 1)}-${pad(val.getDate())} ${pad(
          val.getHours()
        )}:${pad(val.getMinutes())}`;
      }
      return String(val);
    },
    typeText(type) {
      if (type === 1 || type === '1') return '内部';
      if (type === 2 || type === '2') return '外部';
      return type || '—';
    },
    statusText(status) {
      if (status === 0 || status === '0') return '草稿';
      if (status === 1 || status === '1') return '提交';
      return status ?? '—';
    },
    smsText(smsStatus) {
      if (smsStatus === 0 || smsStatus === '0') return '未发';
      if (smsStatus === 1 || smsStatus === '1') return '已发';
      return smsStatus ?? '—';
    },
  },
};
</script>

<style lang="scss">
.notice-detail-page {
  .content {
    padding: 30rpx;
  }

  .detail-card {
    background-color: #fff;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
    padding: 24rpx 26rpx;
  }

  .title-section {
    margin-bottom: 20rpx;

    .detail-title {
      font-size: 30rpx;
      font-weight: 800;
      color: #333;
      display: block;
      line-height: 1.4;
      word-break: break-all;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10rpx;
      margin-top: 14rpx;
    }
  }

  .tag {
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    font-size: 20rpx;
    line-height: 1;
  }

  .tag-internal {
    background-color: #e6f7ff;
    color: #409eff;
  }

  .tag-external {
    background-color: #fff7e6;
    color: #fa8c16;
  }

  .status-draft {
    background-color: #f5f5f5;
    color: #666;
  }

  .status-submit {
    background-color: #f6ffed;
    color: #52c41a;
  }

  .sms-unsent {
    background-color: #f5f5f5;
    color: #999;
  }

  .sms-sent {
    background-color: #e6fffb;
    color: #13c2c2;
  }

  .info-list {
    .row {
      display: flex;
      margin-bottom: 14rpx;

      .label {
        width: 170rpx;
        font-size: 24rpx;
        color: #666;
        flex-shrink: 0;
      }

      .value {
        flex: 1;
        font-size: 24rpx;
        color: #333;
        min-width: 0;
        word-break: break-word;
      }
    }

    .remark-value {
      line-height: 1.5;
    }
  }

  .content-box {
    margin-top: 10rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #f5f5f5;
  }

  .empty-page {
    margin-top: 120rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999;

    .iconfont {
      font-size: 80rpx;
      margin-bottom: 16rpx;
    }

    .text {
      font-size: 24rpx;
    }
  }

  .empty {
    font-size: 26rpx;
    color: #999;
    line-height: 2;
    padding: 30rpx 0;
  }

  .loading {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 26rpx;
  }
}
</style>

