<template>
  <div class="banner-carousel">
    <el-carousel height="500px" :interval="5000" arrow="hover" v-loading="loading" @change="handleCarouselChange">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <div class="carousel-item" :style="{ backgroundImage: 'url(' + item.image + ')' }">
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="carousel-content">
      <span class="title">{{ currentBanner.title }}</span>
      <span class="summary">{{ currentBanner.summary }}</span>
      <!-- <span class="primary" size="large">更多新闻</span> -->
    </div>
  </div>
</template>

<script>
import { getProgressList } from '@/api/portal/progress'

export default {
  name: 'BannerCarousel',
  data() {
    return {
      loading: false,
      banners: [],
      currentBanner: {}
    }
  },
  created() {
    this.loadBanners()
  },
  watch: {
    banners: {
      handler(newBanners) {
        if (newBanners.length > 0) {
          this.currentBanner = newBanners[0]
        }
      },
      immediate: true
    }
  },
  methods: {
    loadBanners() {
      this.loading = true
      getProgressList().then(response => {
        if (response.data) {
          // 将实时动态数据转换为轮播图格式
          this.banners = response.data.map(item => ({
            image: item.coverImage || 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=international%20science%20program%20banner%20with%20earth%20and%20satellite%20theme&image_size=landscape_16_9',
            title: item.title,
            summary: item.summary || '',
            id: item.id
          })).filter(item => item.image) // 过滤掉没有图片的项目
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleCarouselChange(index) {
      if (this.banners.length > 0) {
        this.currentBanner = this.banners[index]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.banner-carousel {
  width: 100%;
  position: relative;
  ::v-deep .el-carousel__indicators {
    .el-carousel__indicator {
      .el-carousel__button {
        width: 30px;
        height: 4px;
        border-radius: 2px;
        background-color: rgba(255, 255, 255, 0.4);
      }

      &.is-active {
        .el-carousel__button {
          background-color: #ffffff;
        }
      }
    }
  }

  ::v-deep .el-carousel__arrow {
    background-color: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    width: 50px;
    height: 50px;

    &:hover {
      background-color: rgba(0, 0, 0, 0.5);
    }

    i {
      font-size: 20px;
    }
  }
}

.carousel-item {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
  }
}

.carousel-content {
  position: absolute;
  bottom: -80px;
  right: 0;
  z-index: 10;
  text-align: center;
  color: #ffffff;
  width: 84%;
  height: 160px;
  padding-top: 26px;
  padding-left: 79px;
  background-image: url("../../assets/images/carousel-content-bg.png");
  display: flex;
  flex-direction: column;
  .title{
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .summary{
    margin-top: 15px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    // font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .el-button--large {
    padding: 15px 40px;
    font-size: 16px;
    border-radius: 25px;
  }
}

@media (max-width: 768px) {
  .banner-carousel {
    ::v-deep .el-carousel__arrow {
      width: 35px;
      height: 35px;

      i {
        font-size: 16px;
      }
    }
  }

  .carousel-content {
    h2 {
      font-size: 28px;
    }

    p {
      font-size: 16px;
    }
  }
}
</style>
