<template>
  <div class="carousel">
    <el-carousel
      ref="carousel"
      motion-blur
      :pause-on-hover="true"
    >
      <el-carousel-item v-for="item in data" :key="item.id">
        <nuxt-link target="_blank" :to="JSON.parse(item.value).link">
          <img :src="getImageURL(JSON.parse(item.value).image)" :alt="item.title"/>
          <p>{{ item.title }}</p>
        </nuxt-link>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getImageURL } from '@/utils/util'

export default {
  name: 'Carousel',
  props: {
    // 轮播数据
    data: {
      type: Array,
      required: true
    }
  },
  methods: {
    getImageURL
  }
}
</script>

<style scoped lang="scss">
.carousel {
  width: 100%;
  height: 100%;
  :deep(.el-carousel) {
    // 原点占位宽度
    --indicators-width: 200px;
    height: 100%;
    position: relative;
    .el-carousel__container {
      height: 100% !important;
    }
    // 轮播项
    .el-carousel__item {
      background-color: #efdfdf;
      a {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      p {
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        left: 0;
        margin: 0;
        bottom: 0;
        padding: 8px var(--indicators-width) 8px 20px;
        background-color: rgba(0, 0, 0, .3);
        color: var(--color-white);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    // 轮播圆点
    .el-carousel__indicators {
      width: var(--indicators-width);
      position: absolute;
      right: 0;
      bottom: 5px;
      left: initial;
      transform: none;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
