<template>
  <div class="platform-container">
    <!-- 使用导航栏组件 -->
    <nav-bar
      :active-nav="activeNav"
      :search-keyword.sync="searchKeyword"
      @search="handleSearch">
    </nav-bar>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧筛选栏 -->
      <aside class="sidebar">
        <div class="filter-section">
          <h3 class="filter-title">
            <i class="el-icon-sort"></i> 排序方式
          </h3>
          <ul class="filter-options">
            <li class="filter-option" :class="{ active: sortType === 'publish' }">
              <el-radio v-model="sortType" label="publish">最新发布</el-radio>
            </li>
            <li class="filter-option" :class="{ active: sortType === 'download' }">
              <el-radio v-model="sortType" label="download">下载次数</el-radio>
            </li>
          </ul>
        </div>

        <div class="filter-section">
          <h3 class="filter-title">
            <i class="el-icon-menu"></i> 组件类型
          </h3>
          <ul class="filter-options">
            <li class="filter-option" v-for="type in componentTypes" :key="type.value">
              <el-checkbox v-model="selectedTypes" :label="type.value">{{ type.label }}</el-checkbox>
            </li>
          </ul>
        </div>
      </aside>

      <!-- 右侧内容区域 -->
      <main class="content-area">
        <div class="component-grid">
          <!-- 组件卡片 -->
          <div class="component-card" v-for="component in filteredComponents" :key="component.id">
            <div class="card-header">
              <img :src="apiBase + component.image" alt="Component Image" class="card-image">
              <!-- 名称和版本在同一行 -->
              <div class="card-title-wrapper">
                <h3 class="card-title">{{ component.name }}</h3>
                <div v-if="showVersion" class="card-version">{{ component.version }}</div>
              </div>
            </div>

            <div class="card-footer">
              <button class="card-action-btn" style="background: linear-gradient( 180deg, #00C7EF 0%, #005EEF 100%);color: white; " @click="downloadComponent(component)">
                下载
              </button>
              <button class="card-action-btn" @click="showComments(component)">
                评论
              </button>
<!--              <button class="card-action-btn" @click="viewDocument(component)">
                文档
              </button>-->

              <div class="dropdown">
                <button class="card-action-btn" @click="toggleDropdown(component)">
                  文档
                </button>
                <ul class="dropdown-menu" v-if="activeComponentId === component.id">
                  <li @click="viewDocument(component)">预览</li>
                  <li @click="downloadDocument(component)">下载</li>
                </ul>
              </div>

            </div>

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

<script>
import NavBar from '@/views/psp/navBar.vue'

export default {
  name: "index.vue",
  components: {
    NavBar,
  },
  data() {
    return {
      apiBase: process.env.VUE_APP_BASE_API,
      activeNav: 'components',
      searchKeyword: '',
      sortType: 'publish',
      selectedTypes: [],
      showVersion: true, // 控制版本号是否显示
      componentTypes: [
        { value: 'data-display', label: '数据展示' },
        { value: 'form-control', label: '表单控件' },
        { value: 'layout-container', label: '布局容器' },
        { value: 'navigation', label: '导航组件' }
      ],
      components: [
        {
          id: 1,
          name: '数据表格组件',
          version: 'V2.1.2',
          type: 'data-display',
          downloads: 1250,
          publishDate: '2023-06-15',
          image: '/profile/avatar/2025/09/03/001_20250903132300A001.JPG',
        },
        {
          id: 2,
          name: '报表可视化',
          version: 'V2.1.2',
          type: 'data-display',
          downloads: 980,
          publishDate: '2023-05-20',
          image: '/profile/avatar/2025/09/03/ldst.png',
        },
        {
          id: 3,
          name: '布局容器',
          version: 'V2.1.2',
          type: 'layout-container',
          downloads: 750,
          publishDate: '2023-07-10',
          image: '/profile/avatar/2025/09/03/001_20250903132300A001.JPG',
        },
        {
          id: 4,
          name: '数据接入组件-交互',
          version: 'V2.1.2',
          type: 'data-display',
          downloads: 620,
          publishDate: '2023-04-05',
          image: '/profile/avatar/2025/09/03/ldst.png',
        },
        {
          id: 5,
          name: '表单控件',
          version: 'V2.1.2',
          type: 'form-control',
          downloads: 1100,
          publishDate: '2023-08-12',
          image: '/profile/avatar/2025/09/03/ldst.png',
        }
      ]
    }
  },

  computed: {
    filteredComponents() {
      let filtered = this.components;

      // 按类型筛选
      if (this.selectedTypes.length > 0) {
        filtered = filtered.filter(component =>
          this.selectedTypes.includes(component.type)
        );
      }

      // 按排序方式排序
      if (this.sortType === 'download') {
        filtered = filtered.sort((a, b) => b.downloads - a.downloads);
      } else {
        filtered = filtered.sort((a, b) =>
          new Date(b.publishDate) - new Date(a.publishDate)
        );
      }

      return filtered;
    }
  },

  methods: {
    handleSearch(keyword) {
      this.$message({
        message: `搜索关键词: ${keyword}`,
        type: 'success'
      });
    },
    downloadComponent(component) {
      this.$message({
        message: `开始下载 ${component.name}`,
        type: 'success'
      });
    },
    showComments(component) {
      this.$message({
        message: `查看 ${component.name} 的评论`,
        type: 'info'
      });
    },
    viewDocument(component) {
      this.$message({
        message: `查看 ${component.name} 的文档`,
        type: 'info'
      });
      this.activeComponentId = null; // 关闭下拉菜单
    },
    toggleDropdown(component) {
      if (this.activeComponentId === component.id) {
        this.activeComponentId = null; // 如果已经打开，则关闭
      } else {
        this.activeComponentId = component.id; // 否则打开
      }
    },
    downloadDocument(component) {
      this.$message({
        message: `开始下载 ${component.name} 的文档`,
        type: 'success'
      });
      this.activeComponentId = null; // 关闭下拉菜单
    }
  }
}
</script>

<style scoped>
.platform-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
}

.user-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* 主体内容 */
.main-content {
  display: flex;
  width: 100%;
  margin: 20px auto;
  padding: 0 20px;
  gap: 20px;
  flex: 1;
}

/* 左侧筛选栏 */
.sidebar {
  width: 250px;
  flex-shrink: 0;
  background:transparent;
}

.filter-section {
  background: #F6F6F6;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #303133;
  display: flex;
  align-items: center;
}

.filter-title i {
  margin-right: 8px;
  color: #409EFF;
}

.filter-options {
  list-style: none;
}

.filter-option {
  padding: 10px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.filter-option:hover {
  color: #409EFF;
}

.filter-option.active {
  color: #409EFF;
  font-weight: 500;
}

.filter-option .el-checkbox {
  width: 100%;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px 8px 8px 8px;
}

/* 名称和版本的容器 */
.card-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 5px;
}

/* 右侧内容区域 */
.content-area {
  flex: 1;
}

.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.component-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.component-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.card-header {
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
  flex: 1;
}

.card-version {
  font-size: 12px;
  color: #909399;
  background-color: #f0f2f5;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 10px;
}

.card-footer {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 45px; /* 增大按钮间距 */
}

.card-action-btn {
  flex: 1;
  background-color: #ffffff;
  color: #2B2B2B;
  border: 1px solid #58D9F4; /* 定义边框宽度和透明度 */
  border-radius: 4px ;
  padding: 4px 0;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-height: 28px;
}

.card-action-btn:hover {
  background-color: #ecf5ff;
  color: #409eff;
  border-color: #409eff;
}

.card-action-btn:active {
  background-color: #409eff;
  color: #ffffff;
  border-color: #409eff;
}

.card-action {
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.card-action i {
  margin-right: 5px;
}

.card-action:hover {
  color: #66b1ff;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  list-style-type: none;
  padding: 0;
  margin: 0;
  min-width: 100px;
  z-index: 1;
}

.dropdown-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #f1f1f1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .component-grid {
    grid-template-columns: 1fr;
  }
}
</style>
