<template>
  <div class="document">
    <!-- 功能区块 -->
    <div class="document-card">
      <p class="document-title">功能</p>
      <div class="document-content">
        <el-button v-for="(item, index) in functionList" 
                  :key="'func-' + index"
                  type="primary"
                  icon="el-icon-eleme"
                  class="document-button"
                  @click="goView(item.url)">{{item.label}}</el-button>
      </div>
    </div>
    
    <!-- 文档区块 -->
    <div class="document-card">
      <p class="document-title">文档</p>
      <div class="document-content">
        <el-button v-for="(item, index) in docList"
                  :key="'doc-' + index"
                  type="success"
                  class="document-button"
                  @click="goView(item.url)">{{item.label}}</el-button>
      </div>
    </div>
    
    <!-- 视频区块 -->
    <div class="document-card">
      <p class="document-title">视频</p>
      <div class="document-content">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in videoList" :key="index">
            <div class="video-item" @click="goOpen(item)">
              <div class="video-content">
                <span class="video-name">{{item.label}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 功能列表
      functionList: [
        { label: '多屏幕控制器', url: '/tools/control.html' },
        { label: '屏幕轮播', url: '/tools/swiper.html' },
        { label: '多屏幕切换', url: '/tools/screen.html' },
        { label: '多屏投屏工具', url: '/tools/screen-cast.html' },
        { label: 'iframe通讯', url: '/tools/iframe.html' }
      ],
      // 文档列表
      docList: [
        { label: '功能清单', url: 'https://docs.qq.com/sheet/DZmdKak9vY0lnRWRy' },
        { label: '原理图', url: 'https://kdocs.cn/l/cuOoWqq98ljO' },
        { label: '接口文档', url: 'https://api.data.bladex.cn/doc.html' },
        { label: '系统文档', url: 'https://www.yuque.com/smallwei/avue-data' }
      ],
      // 视频列表
      videoList: []
    }
  },
  created() {
    // 获取视频列表数据
    this.$axios.get('/mock/video.json').then(res => {
      this.videoList = res.data;
    })
  },
  methods: {
    // 打开链接
    goOpen(item) {
      window.open(item.src)
    },
    // 打开工具页面或URL
    goView(url) {
      window.open(url)
    }
  }
}
</script>

<style lang="scss">
.document {
  height: 100%;
  overflow: auto;
  padding: 20px;
  background-color: var(--bg-color-primary);
  
  // 卡片样式
  &-card {
    background-color: var(--bg-color-secondary);
    border-radius: 8px;
    box-shadow: var(--shadow-dark);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color-base);
  }
  
  // 标题样式
  &-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color-base);
  }
  
  // 内容区域样式
  &-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  // 按钮样式
  &-button {
    margin: 5px;
    min-width: 120px;
    border: none;
    color: var(--text-color-primary);
    
    &.el-button--primary {
      background-color: var(--primary-color);
      &:hover, &:focus {
        background-color: var(--primary-color-hover);
      }
    }
    
    &.el-button--success {
      background-color: var(--success-color);
      &:hover, &:focus {
        background-color: var(--success-color-hover);
      }
    }
  }
  
  // 视频项样式
  .video-item {
    height: 80px;
    background-color: var(--bg-color-tertiary);
    border-radius: 4px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid var(--border-color-dark);
    
    &:hover {
      background-color: var(--bg-color-hover);
      transform: translateY(-2px);
      box-shadow: var(--shadow-dark);
      border-color: var(--border-color-light);
    }
    
    .video-content {
      text-align: center;
      width: 100%;
    }
    
    .video-name {
      font-size: 14px;
      color: var(--text-color-secondary);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  
  // 响应式调整
  @media screen and (max-width: 768px) {
    padding: 10px;
    
    &-button {
      min-width: 100px;
      margin: 3px;
    }
    
    .video-item {
      height: 70px;
    }
  }
  
  // 添加滚动条样式
  &::-webkit-scrollbar {
    width: 8px;
  }
  
  &::-webkit-scrollbar-track {
    background: var(--bg-color-secondary);
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: var(--border-color-light);
    border-radius: 4px;
    
    &:hover {
      background-color: var(--border-color-dark);
    }
  }
}
</style>