<template>
    <div class="announcementDetails">
      <section class="container">
        <section class="leftNav">
          <div
            class="leftNav-item "
            :class="{active:DetailsParams.id == item.id}"
            v-for="item in problems"
            :key="item.id"
            @click="handleClick(item.id)"
            @keydown.enter.space="handleClick(item.id)"
            tabindex="0"
            role="button"
            :aria-label="item.title"
          >
            {{ item.title }}
          </div>
        </section>
        <section class="rightContent">
          <div v-if="problemLoading" class="loading-container">
            <span class="loading-text">{{ $t('home.loadingContent') || '正在加载内容...' }}</span>
          </div>
          <div v-else-if="info && info.trim()" class="dynamic-content" v-html="info"></div>
          <div v-else class="no-content">
            <p>{{ $t('home.noContent') || '暂无内容' }}</p>
          </div>
        </section>
      </section>
    </div>
  </template>
  
  <script>
  import IndexJs from "./index.js";
  export default {
    mixins: [IndexJs],
  }
  </script>
  
  <style lang="scss" scoped>
  .announcementDetails{
    width: 100vw;
    height: 100vh;
    background: #F8F9FA;
    padding-top: 60px;
  }
  .container{
    display: flex;
    justify-content: center;
    width: 70vw;
    height: 80vh;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
  
    padding-top: 50px;
    .leftNav{
      width: 260px;
      height: 100%;
      overflow-y: auto;
      padding-right: 8px; // 预留滚动条空间，避免抖动
      border-right: 1px solid #f1f2f3;
    }
    .rightContent{
      flex: 1;
      height: 100%;
      margin-left: 32px;
      overflow-y: auto;
      padding-right: 20px;
      .dynamic-content {
        width: 100%;
        margin: 0 auto;
       
        // 富文本样式
        :deep(table) {
          border-collapse: collapse;
          width: 100%;
          margin: 16px 0;
        }
        :deep(p) {
         line-height: 35px;
         margin: 8px 0;
        
        }
        :deep(th), :deep(td) {
          border: 1px solid #d1d5db;
          padding: 8px 12px;
          text-align: left;
        }
        :deep(th) {
          background: #f3f4f6;
          font-weight: bold;
        }
        :deep(strong), :deep(b) {
          font-weight: bold !important;
          color: inherit !important;
          font-style: normal !important;
        }
        :deep(em), :deep(i) {
          font-style: italic !important;
          color: inherit !important;
        }
        :deep(a) {
          color: #007bff !important;
          text-decoration: none !important;
          &:hover {
            text-decoration: underline !important;
          }
        }
      }
      .loading-container {
        text-align: center;
        padding: 40px 0;
        .loading-text {
          font-size: 16px;
          color: #666;
          vertical-align: middle;
        }
      }
      .no-content {
        text-align: center;
        padding: 40px 0;
        p {
          font-size: 16px;
          color: #999;
          margin: 0;
        }
      }
    }
  }
  
  .leftNav-item{
    cursor: pointer;
    user-select: none;
    padding: 10px 14px;
    margin-bottom: 8px;
    text-align: left;
    line-height: 1.5;
    border-radius: 8px;
    position: relative;
    outline: none;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;

    &:hover{
      background: #f7f7fb;
      color: #4c36ff;
    }

    &:focus-visible{
      box-shadow: 0 0 0 3px rgba(101,31,255,0.2);
      background: #f7f7fb;
    }

    &.active{
      color: #4c36ff;
      background: #f3f2ff;
      font-weight: 600;
    }

    &.active::before{
      content: "";
      position: absolute;
      left: -8px;
      top: 8px;
      bottom: 8px;
      width: 3px;
      background: #4c36ff;
      border-radius: 2px;
    }
  }

  /* 自定义滚动条，提升观感 */
  .leftNav::-webkit-scrollbar{
    width: 6px;
  }
  .leftNav::-webkit-scrollbar-thumb{
    background: #e2e2e8;
    border-radius: 3px;
  }
  .leftNav:hover::-webkit-scrollbar-thumb{
    background: #cfcfe7;
  }
  </style>