<template>
  <div class="sdgsat1-container">
    <div class="sdgsat1-content">
      <!-- 左侧导航卡片 -->
      <div class="left-sidebar">
        <div class="sidebar-card">
          <div class="sidebar-header">
            <span class="title">SDGSAT-1专区</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 
              v-for="(item, index) in menuList" 
              :key="index"
              class="menu-item"
              :class="{ active: activeIndex === index }"
              @click="switchMenu(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="right-content">
        <!-- 卫星总体介绍 -->
        <div v-if="activeMenu === 'introduction'" class="content-card" v-loading="loading">
          <div class="content-header">
            <span class="title">{{ currentTitle }}</span>
          </div>
          <div class="content-body" v-html="introductionData.content || '<p>暂无内容</p>'"></div>
        </div>

        <!-- 数据开发与应用 -->
        <div v-if="activeMenu === 'cases'" class="content-card" v-loading="loading">
          <div class="content-header">
            <span class="title">{{ currentTitle }}</span>
          </div>
          <div class="content-body">
            <div class="case-list">
              <div class="case-item" v-for="(item, index) in caseList" :key="index">
                <div class="case-left">
                  <div class="case-cover">
                    <img v-if="item.coverImage" :src="item.coverImage" :alt="item.title" />
                    <div v-else class="case-cover-placeholder">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </div>
                </div>
                <div class="case-right">
                  <div class="case-title">{{ item.title }}</div>
                  <div class="case-summary">{{ item.summary }}</div>
                  <div class="case-action">
                    <el-button type="text" @click="viewCaseDetail(item.id)">查看详情</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getIntroduction, getCaseList } from '@/api/portal/sdgsat1'

export default {
  name: 'SDGSAT1',
  data() {
    return {
      loading: true,
      activeMenu: 'introduction',
      activeIndex: 0,
      menuList: [
        { name: '卫星总体介绍', key: 'introduction' },
        { name: '数据开发与应用', key: 'cases' }
      ],
      introductionData: {
        title: '',
        content: ''
      },
      caseList: []
    }
  },
  computed: {
    currentTitle() {
      return this.menuList[this.activeIndex].name
    }
  },
  created() {
    // 尝试恢复页面状态
    this.restorePageState()
    
    // 如果没有恢复的状态，则获取默认数据
    if (!this.caseList.length && this.activeMenu === 'cases') {
      this.getCaseData()
    } else if (!this.introductionData.title && this.activeMenu === 'introduction') {
      this.getIntroductionData()
    }
  },
  methods: {
    async getIntroductionData() {
      this.loading = true
      try {
        const response = await getIntroduction()
        if (response.data) {
          this.introductionData = response.data
        }
      } catch (error) {
        console.error('获取卫星总体介绍失败:', error)
      } finally {
        this.loading = false
      }
    },
    async getCaseData() {
      this.loading = true
      try {
        const response = await getCaseList()
        if (response.code === 200 && response.rows) {
          this.caseList = response.rows
        }
      } catch (error) {
        console.error('获取应用案例列表失败:', error)
      } finally {
        this.loading = false
      }
    },
    switchMenu(index) {
      this.activeIndex = index
      this.activeMenu = this.menuList[index].key
      
      if (this.activeMenu === 'introduction') {
        this.getIntroductionData()
      } else if (this.activeMenu === 'cases') {
        this.getCaseData()
      }
    },
    viewCaseDetail(id) {
      // 保存页面状态
      this.savePageState()
      
      this.$router.push({
        path: '/portal/sdgsat1/case/detail',
        query: { id }
      })
    },
    savePageState() {
      // 保存页面状态到 sessionStorage
      const pageState = {
        activeIndex: this.activeIndex,
        activeMenu: this.activeMenu,
        caseList: this.caseList,
        introductionData: this.introductionData
      }
      sessionStorage.setItem('sdgsat1PageState', JSON.stringify(pageState))
      console.log('页面状态已保存:', pageState)
    },
    restorePageState() {
      // 从 sessionStorage 恢复页面状态
      const savedState = sessionStorage.getItem('sdgsat1PageState')
      if (savedState) {
        try {
          const pageState = JSON.parse(savedState)
          this.activeIndex = pageState.activeIndex
          this.activeMenu = pageState.activeMenu
          this.caseList = pageState.caseList
          this.introductionData = pageState.introductionData
          console.log('页面状态已恢复:', pageState)
          // 清除保存的状态
          sessionStorage.removeItem('sdgsat1PageState')
          // 恢复页面状态后，设置 loading 为 false
          this.loading = false
        } catch (error) {
          console.error('恢复页面状态失败:', error)
          // 恢复页面状态失败后，设置 loading 为 false
          this.loading = false
        }
      } else {
        // 没有保存的状态，设置 loading 为 false
        this.loading = false
      }
    }
  }
}
</script>

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

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

/* 应用案例列表样式 */
.case-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-item {
  display: flex;
  gap: 24px;
  padding: 24px;
  background: #f9fafc;
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    background: #f0f2f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.case-left {
  flex-shrink: 0;
}

.case-cover {
  width: 200px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  background: #e0e0e0;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.05);
    }
  }
}

.case-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;

  i {
    font-size: 48px;
  }
}

.case-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.case-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e3c72;
  line-height: 1.4;
}

.case-summary {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.case-action {
  padding-top: 8px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .sdgsat1-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;
  }

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

  .case-cover {
    width: 100%;
    height: 200px;
  }
}

@media (max-width: 768px) {
  .sdgsat1-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;
      }
    }
  }

  .case-item {
    padding: 20px;
  }
}
</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>
