<template>
  <div class="notice-container">
    <div class="notice-content">
      <!-- 左侧导航卡片 -->
      <div class="left-sidebar">
        <div class="sidebar-card">
          <div class="sidebar-header">
            <span class="title">通知公告</span>
          </div>
          <div class="sidebar-decorator">
            <div class="decorator-segment" style="background-color: #4B9F37"></div>
            <div class="decorator-segment" style="background-color: #C51A2D"></div>
            <div class="decorator-segment" style="background-color: #E37221"></div>
            <div class="decorator-segment" style="background-color: #0298DB"></div>
            <div class="decorator-segment" style="background-color: #F8C72E"></div>
            <div class="decorator-segment" style="background-color: #D0103A"></div>
            <div class="decorator-segment" style="background-color: #028542"></div>
            <div class="decorator-segment" style="background-color: #BF8B2E"></div>
            <div class="decorator-segment" style="background-color: #0B97D9"></div>
          </div>
          <div class="sidebar-menu">
            <div 
              class="menu-item"
              :class="{ active: currentMenu === 'official' }"
              @click="handleMenuClick('official')"
            >
              官方公告
            </div>
            <div 
              class="menu-item"
              :class="{ active: currentMenu === 'cooperation' }"
              @click="handleMenuClick('cooperation')"
            >
              合作征集
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="right-content">
        <div class="content-card">
          <!-- <div class="content-header">
            <span class="title">{{ currentTitle }}</span>
          </div> -->
          <div class="content-body">


            <!-- 通知公告列表 -->
            <div class="notice-list-section" v-loading="loading" element-loading-text="加载中...">
              <div class="notice-list">
                <div v-if="noticeList.length === 0" class="empty-state">
                  <el-empty description="暂无通知公告"></el-empty>
                </div>
                <div v-else class="notice-item" v-for="(item, index) in noticeList" :key="item.id">
                  <div class="notice-date">
                    <div class="date-day">{{ item.day }}</div>
                    <div class="date-month">{{ item.month }}</div>
                  </div>
                  <div class="notice-content-item">
                    <h3 class="notice-title">{{ item.title }}</h3>
                    <div class="notice-summary" v-html="item.content"></div>
                    <div class="notice-meta">
                      <span><i class="el-icon-user"></i> {{ item.createBy }}</span>
                      <span><i class="el-icon-view"></i> {{ item.viewCount || 0 }}</span>
                      <el-tag size="small" :type="item.tagType" class="notice-type">{{ item.type }}</el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </div>




          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNoticeListAll } from '@/api/portal/notice'

export default {
  name: 'Notice',
  data() {
    return {
      currentMenu: 'official',
      noticeList: [],
      loading: false
    }
  },
  computed: {
    currentTitle() {
      return this.currentMenu === 'official' ? '官方公告' : '合作征集'
    }
  },
  mounted() {
    this.fetchNoticeList()
  },
  methods: {
    handleMenuClick(menu) {
      this.currentMenu = menu
      this.fetchNoticeList()
    },
    fetchNoticeList() {
      this.loading = true
      const params = {
        noticeType: this.currentMenu === 'official' ? '1' : '2' // 1: 官方公告, 2: 合作征集
      }
      console.log('请求通知公告数据:', params)
      getNoticeListAll(params).then(response => {
        console.log('获取通知公告响应:', response)
        // 处理后端返回的数据结构
        let dataList = []
        if (response && response.data && Array.isArray(response.data)) {
          dataList = response.data
        }
        
        this.noticeList = dataList.map(item => {
          // 处理日期格式
          let day = '01'
          let month = '01'
          if (item.createTime) {
            const date = new Date(item.createTime)
            day = date.getDate().toString().padStart(2, '0')
            month = (date.getMonth() + 1).toString().padStart(2, '0')
          }
          
          // 处理标签类型
          let tagType = 'info'
          let noticeType = '通知'
          if (item.noticeType === '1') {
            noticeType = '官方公告'
          } else if (item.noticeType === '2') {
            noticeType = '合作征集'
          }
          
          return {
            id: item.noticeId,
            title: item.noticeTitle,
            content: item.noticeContent,
            type: noticeType,
            createBy: item.createBy,
            createTime: item.createTime,
            viewCount: item.viewCount,
            day,
            month,
            tagType
          }
        })
        console.log('处理后的通知公告数据:', this.noticeList)
        this.loading = false
      }).catch(error => {
        console.error('获取通知公告失败:', error)
        this.noticeList = []
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.notice-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 40px 0;
}

.notice-content {
  max-width: 1390px;
  margin: 0 auto;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 300px 1060px;
  gap: 30px;
  align-items: start;
}

/* 左侧导航卡片 */
.left-sidebar {
  .sidebar-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }

  .sidebar-header {
    background: #1EA8C5;
    // padding: 30px 24px;
    height: 58px;
    display: flex;
    align-items: center;
    // justify-content: center;
    padding-left: 19px;

    .title {

font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 18px;
color: #FFFFFF;
line-height: 18px;
text-align: left;
font-style: normal;
text-transform: none;
    }
  }

  .sidebar-decorator {
    width: 100%;
    height: 6px;
    display: flex;
    overflow: hidden;

    .decorator-segment {
      width: 80px;
      height: 100%;

      &:first-child {
        margin-left: -40px;
      }

      &:last-child {
        margin-right: -40px;
      }
    }
  }

  .sidebar-menu {
    padding: 16px 0;

    .menu-item {
      padding: 16px 24px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 16px;
      color: #666666;
      border-left: 3px solid transparent;

      &:hover {
        background-color: #f5f7fa;
        color: #1e3c72;
      }

      &.active {
        background-color: #f0f2f5;
        color: #1e3c72;
        font-weight: 600;
        border-left-color: #1e3c72;
      }
    }
  }
}

/* 右侧内容区域 */
.right-content {
  .content-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    min-height: 600px;
  }

  .content-header {
    padding: 30px 30px 0;

    .title {
      font-size: 20px;
      font-weight: 600;
      color: #1e3c72;
      margin: 0;
    }
  }

  .content-body {
    padding: 30px;
    line-height: 1.8;
    color: #333333;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;

    :deep(h1),
    :deep(h2),
    :deep(h3),
    :deep(h4),
    :deep(h5),
    :deep(h6) {
      color: #1e3c72;
      margin-top: 24px;
      margin-bottom: 16px;
    }

    :deep(p) {
      margin-bottom: 16px;
      max-width: 100%;
      overflow: hidden;
    }

    :deep(img) {
      max-width: 100% !important;
      width: 100% !important;
      height: auto !important;
      border-radius: 4px;
      margin: 16px 0;
      display: block;
      box-sizing: border-box;
    }

    :deep(a) {
      color: #1e3c72;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    :deep(ul),
    :deep(ol) {
      margin-left: 24px;
      margin-bottom: 16px;
    }

    :deep(li) {
      margin-bottom: 8px;
    }
  }
}

/* 通知公告列表 */
.notice-list-section {
  margin-bottom: 30px;

  .notice-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .notice-item {
    display: flex;
    gap: 20px;
    background: #f9fafc;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;

    &:hover {
      transform: translateX(10px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    .notice-date {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      .date-day {
        font-size: 28px;
        font-weight: 700;
        color: #ffffff;
      }

      .date-month {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
      }
    }

    .notice-content-item {
      flex: 1;

      .notice-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;

        h3 {
          font-size: 18px;
          font-weight: 600;
          color: #1e3c72;
          margin: 0;
          flex: 1;
          padding-right: 15px;
        }
      }

      .notice-summary {
        font-size: 14px;
        color: #666666;
        line-height: 1.6;
        margin: 0 0 15px 0;

        p {
          margin: 0 0 10px 0;
        }

        br {
          line-height: 1.6;
        }

        strong {
          font-weight: 600;
        }

        em {
          font-style: italic;
        }

        ul, ol {
          margin: 10px 0;
          padding-left: 20px;
        }

        li {
          margin: 5px 0;
        }

        img {
          max-width: 100%;
          height: auto;
          margin: 10px 0;
        }

        a {
          color: #1EA8C5;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .notice-meta {
        display: flex;
        gap: 20px;
        font-size: 13px;
        color: #999999;

        span {
          display: flex;
          align-items: center;
          gap: 5px;

          i {
            font-size: 14px;
          }
        }
      }
    }

    .notice-actions {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
  }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .notice-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .left-sidebar {
    order: 2;

    .sidebar-menu {
      display: flex;
      overflow-x: auto;
      white-space: nowrap;

      .menu-item {
        border-left: none;
        border-bottom: 3px solid transparent;
        display: inline-block;
        margin-right: 8px;
        border-radius: 4px 4px 0 0;

        &.active {
          border-left: none;
          border-bottom-color: #1e3c72;
        }
      }
    }
  }

  .right-content {
    order: 1;
  }

  .notice-item {
    flex-direction: column;
  }

  .notice-actions {
    width: 100%;
    justify-content: flex-end;
  }


}

@media (max-width: 768px) {
  .notice-content {
    padding: 0 20px;
  }

  .right-content {
    .content-card {
      min-height: 500px;
    }

    .content-header {
      padding: 20px 20px 0;
    }

    .content-body {
      padding: 20px;
    }
  }

  .left-sidebar {
    .sidebar-header {
      padding: 20px 20px;

      h2 {
        font-size: 20px;
      }
    }

    .sidebar-menu {
      .menu-item {
        padding: 12px 20px;
        font-size: 14px;
      }
    }
  }

  .search-section {
    padding: 20px;

    .filter-bar {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .notice-item {
    padding: 20px;
  }

  .empty-state {
    text-align: center;
    padding: 60px 0;
  }

}
</style>

<style scoped>
/* 确保图片宽度自适应 */
.content-body >>> img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 4px;
  margin: 16px 0;
  display: block;
  box-sizing: border-box;
}

/* 确保富文本编辑器生成的其他元素也不会溢出 */
.content-body >>> .ql-video {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}
</style>
