<template>
  <div class="video-more-container">
    <div class="switch-btn prev" @click="handlePrev">
        <img src="@/assets/images/icon_08.png" alt="">
    </div>
    <div class="video-grid">
      <div v-for="index in 4" :key="index" class="video-cell">
        <div class="video-wrapper">
          <video class="video-player" controls>
            <source src="" type="video/mp4">
          </video>
          <div class="video-controls">
            <div class="time-display">01:32</div>
            <div class="control-buttons">
              <i class="el-icon-video-play"></i>
              <i class="el-icon-refresh-right"></i>
              <i class="el-icon-full-screen"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="switch-btn next" @click="handleNext">
        <img src="@/assets/images/icon_07.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoMore',
  data() {
    return {
      currentPage: 1,
      totalPages: 3
    }
  },
  methods: {
    handlePrev() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    handleNext() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.video-more-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;

  .switch-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 0.3s;
    color: #fff;
    z-index: 1;

    &.prev {
      left: 0;
      border-radius: 0 4px 4px 0;
    }

    &.next {
      right: 0;
      border-radius: 4px 0 0 4px;
    }
  }

  .video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    height: 100%;
  }

  .video-cell {
    position: relative;
    background: url('~@/assets/images/bg13.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  }

  .video-wrapper {
    background-color: #000;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }

  .time-display {
    font-size: 14px;
  }

  .control-buttons {
    display: flex;
    gap: 15px;
    
    i {
      cursor: pointer;
      font-size: 20px;
      &:hover {
        color: #409EFF;
      }
    }
  }
}
</style>