<template>
  <div class="swiper-main">
     <!-- Swiper -->
     <div class="swiper-containerhor">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in bannerArray" :key="index">
                <div v-if="type === 'image'" class="imagezb">
                    <img class="swiperimg" :src="item.image">
                    <el-button>进入直播间</el-button>
                    <div class="textzb">
                        <a class="titlezb">主播: {{ item.title }}</a>
                        <a class="contentzb">内容: {{ item.subTitle }}</a>
                    </div>
                </div>
                <div v-else class="videozb">
                    <img class="swiperimg" :src="item.image">
                    <img class="play" src="@/assets/play.png"  @click.prevent="videoFn(item)">
                    <div class="textzb">
                        <a>{{ item.title }}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="main">
          <span class="swiper-button-prev"></span>
          <span class="swiper-button-next"></span>
        </div>
        <!-- Add Pagination -->
        <!-- <div class="swiper-paginationhor"></div> -->
    </div>
    <el-dialog  :visible.sync="videoDialogVisible" width="400px" >
        <VideoDialog :url="videoUrl"></VideoDialog>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
import Swiper from 'swiper'
import 'swiper/dist/js/swiper'
import 'swiper/dist/css/swiper.css'
import VideoDialog from '@/components/video'
export default {
  name: 'bannerSwiper',
  props: {
    bannerArray: Array,
    type: {
        type: String,
        default: ''
    }
  },
  components: { VideoDialog },
  data() {
    return { 
      videoDialogVisible: false,
      videoUrl: '',
    }
  },
  mounted() {
    setTimeout(() => {
        this.initSwiper()
     }, 300)
  },
  methods: {
    handleClickBanner(item, index) {
      window.open(item.link)
    },
    initSwiper() {
      this.mySwiper = new Swiper('.swiper-containerhor', {
        pagination: '.swiper-paginationhor',
        slidesPerView: 5,
        paginationClickable: true,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        spaceBetween: 30,
        // autoplay: 3000,
        loop: true
      })
    },
    videoFn (item) {
        this.videoUrl = item.link
        this.videoDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
    .swiper-containerhor {
        width: 1200px;
        position: relative;
        overflow: hidden;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
    }
    .swiper-button-prev, .swiper-button-next{
      width: 50px;
      height: 50px;
      position: absolute;
      top: 180px;
      background: url('../../assets/right.png') no-repeat;
      background-size: contain;
    }
    .swiper-button-prev{
        position: absolute;
      background: url('../../assets/left.png') no-repeat;
      background-size: contain;
    }

    .swiper-slide {
          width: 230px;
          margin-right: 20px;
          .swiperimg {
            width: 230px;
            display: block;
          }
          .imagezb{
            position: relative;
            width: 230px;
          }
          .el-button {
            margin-left: -73px;
            border: none;
            background: #07CAAF;
            font-size: 18px;
            font-weight: bold;
            color: #FFFFFF;
            padding-top: 0px;
            padding-bottom: 0px;
            width: 146px;
            height: 44px;
            position: absolute;
            top: 310px;
            left: 50%;
          }
          .textzb {
            font-size: 18px;
            font-weight: bold;
            color: #030303;
            line-height: 16px;
            margin-top: 18px;
            line-height: 30px;
            a {
              display: inline-block;
              text-align: center;
              display: block;
            }
            .contentzb{
                margin-top: 10px;
            }
          }
          .videozb {
            width: 230px;
            float: left;
            margin-right: 20px;
            position: relative;
            .play {
              position: absolute;
              margin: 0 auto;
              top: 165px;
              left: 50%;
              margin-left: -27.5px;
              width: 55px;
            }
            video {
              width: 230px;
            }
            .textzb {
              margin-top: 10px;
              line-height: 16px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              a {
                width: 100%;
                display: inline-block;
                text-align: center;
                font-size: 18px;
                font-weight: 400;
                color: #030303;
                line-height: 24px;
              }
              .contentzb{
                margin-top: 10px;
                width: 207px;
                font-size: 18px;
                font-weight: 400;
                color: #030303;
                line-height: 24px;
              }
            }
          }
          // .videozb::after {
          //   content: '';
          //   z-index: 99;
          //   width: 55px;
          //   height: 55px;
          //   position: absolute;
          //   background-image: url('../../assets/play.png');
          //   background-size: 100%;
          //   left: 50%;
          //   margin-left: -27.5px;
          //   top: 200px;
          //   z-index: 99;
          //   background-repeat: no-repeat;
          // }

        }
</style>
