<template>
  <view class="notice-list-page">
    <view class="header">
      <view class="back" @click="goBack">
        <text class="iconfont icon-xiangzuo"></text>
      </view>
      <view class="title">通知公告</view>
      <view class="right"></view>
    </view>

    <view class="content">
      <!-- 搜索与筛选 -->
      <view class="search-section">
        <view class="search-box">
          <input v-model="query.noticeTitle" type="text" placeholder="请输入通知标题" />
          <view class="search-btn" @click="refreshList">
            搜索
          </view>
        </view>

        <view class="tab-row">
          <view class="tab" :class="typeTab === 'all' ? 'active' : ''" @click="switchType('all')">全部</view>
          <view class="tab" :class="typeTab === '1' ? 'active' : ''" @click="switchType('1')">内部</view>
          <view class="tab" :class="typeTab === '2' ? 'active' : ''" @click="switchType('2')">外部</view>
        </view>

        <view class="tab-row" style="margin-top: 20rpx;">
          <view class="tab" :class="statusTab === 'all' ? 'active' : ''" @click="switchStatus('all')">全部状态</view>
          <view class="tab" :class="statusTab === '0' ? 'active' : ''" @click="switchStatus('0')">草稿</view>
          <view class="tab" :class="statusTab === '1' ? 'active' : ''" @click="switchStatus('1')">提交</view>
        </view>
      </view>

      <!-- 列表 -->
      <scroll-view scroll-y class="list-scroll" @scrolltolower="loadMore">
        <view class="empty" v-if="!loading && records.length === 0">
          <text class="iconfont icon-wushuju"></text>
          <text class="text">暂无通知公告</text>
        </view>

        <view
          v-for="item in records"
          :key="item.noticeId"
          class="record-card"
          @click="openDetail(item.noticeId)"
        >
          <view class="card-header">
            <view class="left">
              <view class="title-row">
                <text class="type line1">{{ item.noticeTitle || '未命名通知' }}</text>
              </view>

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

            <text class="time">{{ formatDate(item.noticeTime) }}</text>
          </view>

          <view class="card-body">
            <view class="row">
              <text class="label">通知类型：</text>
              <text class="value">{{ item.noticeType || '—' }}</text>
            </view>
            <view class="row">
              <text class="label">通知范围：</text>
              <text class="value">{{ item.noticeScope || '—' }}</text>
            </view>
            <view class="row">
              <text class="label">拟稿单位：</text>
              <text class="value">{{ item.draftDept || '—' }}</text>
            </view>
            <view class="row" v-if="item.noticeSource">
              <text class="label">通知来源：</text>
              <text class="value">{{ item.noticeSource }}</text>
            </view>

            <view class="preview" v-if="item.noticeContent">
              {{ contentPreview(item.noticeContent) }}
            </view>
          </view>

          <view class="card-footer">
            <view class="detail-btn" @click.stop="openDetail(item.noticeId)">查看详情</view>
          </view>
        </view>

        <view class="load-more" v-if="loading">加载中...</view>
        <view class="load-more" v-else-if="finished && records.length > 0">已加载全部</view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { pubnoticeListApi } from '@/api/pubnotice.js';

export default {
  data() {
    return {
      query: {
        noticeTitle: '',
      },
      typeTab: 'all', // all | 1 | 2
      statusTab: 'all', // all | 0 | 1
      records: [],
      page: 1,
      limit: 10,
      loading: false,
      finished: false,
      typeClassMap: {
        '1': 'tag-internal',
        1: 'tag-internal',
        '2': 'tag-external',
        2: 'tag-external',
        '__default__': ''
      },
      statusClassMap: {
        '0': 'status-draft',
        0: 'status-draft',
        '1': 'status-submit',
        1: 'status-submit',
        '__default__': ''
      },
      smsClassMap: {
        '0': 'sms-unsent',
        0: 'sms-unsent',
        '1': 'sms-sent',
        1: 'sms-sent',
        '__default__': ''
      }
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({ title: '通知公告' });
    this.refreshList();
  },
  onPullDownRefresh() {
    this.refreshList();
  },
  onShow() {
    if (!this.records.length) this.refreshList();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    switchType(type) {
      this.typeTab = type;
      this.refreshList();
    },
    switchStatus(status) {
      this.statusTab = status;
      this.refreshList();
    },
    async refreshList() {
      this.page = 1;
      this.records = [];
      this.finished = false;
      await this.fetchList();
      uni.stopPullDownRefresh && uni.stopPullDownRefresh();
    },
    async loadMore() {
      if (this.loading || this.finished) return;
      this.page += 1;
      await this.fetchList();
    },
    buildParams() {
      const params = {
        page: this.page,
        limit: this.limit,
        delFlag: '1',
      };
      const noticeTitle = (this.query.noticeTitle || '').trim();
      if (noticeTitle) params.noticeTitle = noticeTitle;
      if (this.typeTab !== 'all') params.type = this.typeTab;
      if (this.statusTab !== 'all') params.status = this.statusTab;
      return params;
    },
    async fetchList() {
      this.loading = true;
      try {
        const params = this.buildParams();
        const res = await pubnoticeListApi(params);

        const data = res?.data || {};
        const list = data?.list || [];
        if (this.page === 1) {
          this.records = list;
        } else {
          this.records = this.records.concat(list);
        }

        const total = data?.total ?? data?.count ?? res?.total ?? res?.count;
        if (!list.length) {
          this.finished = true;
        } else if (typeof total === 'number' && total <= this.records.length) {
          this.finished = true;
        }
      } catch (e) {
        uni.showToast({
          title: typeof e === 'string' ? e : '获取通知公告失败',
          icon: 'none',
        });
      } finally {
        this.loading = false;
      }
    },
    openDetail(noticeId) {
      if (!noticeId) return;
      uni.navigateTo({
        url: `/pages/supply_chain/notice_detail/index?noticeId=${noticeId}`,
      });
    },
    contentPreview(content) {
      if (content === undefined || content === null) return '';
      const s = String(content).replace(/\s+/g, ' ').trim();
      if (!s) return '';
      return s.length > 80 ? s.slice(0, 80) + '...' : s;
    },
    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-list-page {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 30rpx;
    background-color: #409eff;
    color: #fff;

    .back {
      width: 60rpx;
      height: 100%;
      display: flex;
      align-items: center;

      .iconfont {
        font-size: 32rpx;
        color: #fff;
      }
    }

    .title {
      font-size: 32rpx;
      font-weight: 600;
    }

    .right {
      width: 60rpx;
    }
  }

  .content {
    padding: 30rpx;
  }

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

    .search-box {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
      padding: 14rpx 16rpx;
      margin-bottom: 20rpx;

      input {
        flex: 1;
        height: 64rpx;
        font-size: 26rpx;
        color: #333;
      }

      .search-btn {
        height: 64rpx;
        padding: 0 18rpx;
        background-color: #409eff;
        color: #fff;
        border-radius: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        font-weight: 600;
      }
    }

    .tab-row {
      display: flex;
      background-color: #fff;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);

      .tab {
        flex: 1;
        height: 72rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #666;
        position: relative;

        &.active {
          color: #409eff;
          font-weight: 600;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60rpx;
            height: 4rpx;
            background-color: #409eff;
            border-radius: 2rpx;
          }
        }
      }
    }
  }

  .list-scroll {
    max-height: calc(100vh - 310rpx);
  }

  .record-card {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 24rpx 26rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);

    .card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 16rpx;

      .left {
        flex: 1;
        min-width: 0;
      }

      .title-row {
        margin-bottom: 10rpx;
      }

      .type {
        font-size: 28rpx;
        font-weight: 700;
        color: #333;
        max-width: 520rpx;
      }

      .time {
        font-size: 22rpx;
        color: #999;
        white-space: nowrap;
      }
    }

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

    .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;
    }

    .card-body {
      .row {
        display: flex;
        margin-bottom: 10rpx;

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

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

      .preview {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: #999;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

    .card-footer {
      margin-top: 20rpx;
      display: flex;
      justify-content: flex-end;

      .detail-btn {
        padding: 8rpx 16rpx;
        background-color: #409eff;
        color: #fff;
        border-radius: 16rpx;
        font-size: 20rpx;
      }
    }
  }

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

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

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

  .load-more {
    text-align: center;
    padding: 20rpx 0 10rpx;
    font-size: 22rpx;
    color: #999;
  }

  .line1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

