<template>
    <div class="banner">
        <div class="box">
            <ul>
                <li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
                    <img :src= "item.cover" style="width:100%;min-height: 350px;" :alt="item.title"/>
                </li>
            </ul>
            <div class="status">
            <span class="name-t" v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''"
                  @mouseenter="changeBanner(index)"
                  @mouseleave="startLoop"
            >{{item.title}}
        </span>
            </div>
            <!--<div class="btn">-->
                <!--<span class="prev" @click="prev" @mouseenter="stopLoop" @mouseleave="startLoop">《</span>-->
                <!--<span class="next" @click="next" @mouseenter="stopLoop" @mouseleave="startLoop">》</span>-->
            <!--</div>-->
        </div>
        <!--h1 @click="getArticle">{{msg}}</h1-->
    </div>
</template>

<script>
    export default {
        name: 'banner',
        data() {
            return {
                current: 0, // 当前索引
                timerId: null, // 清除循环标记
                intStyle: {}
            }
        },
        props: [
            'list',
            'looptime',
            'height',
            'width',
            'background',
            'color',
            'fontSize'
        ],
        methods: {
            getArticle () {
                this.$emit('getArticle', this.article)
            },
            // 鼠标移入状态圆点
            changeBanner (index) {
                this.$emit('change', this.current);
                this.stopLoop();
                this.current = index;
            },
            // 鼠标点击banner内容
            bannerClick (index, item) {
                this.$emit('click', index, item);
            },
            // 点击上一张按钮
            prev () {
                if(this.current > 0) {
                    // 将对象列表对应的索引和整个对象传出去
                    this.$emit('prev', this.current, this.list);
                    this.current--;
                } else {
                    this.$emit('prev', this.current, this.list);
                    this.current = this.list.length - 1 ;
                }
            },
            // 点击下一张按钮
            next () {
                if(this.current < this.list.length - 1) {
                    this.$emit('prev', this.current, this.list);
                    this.current ++;
                } else {
                    this.$emit('prev', this.current, this.list);
                    this.current = 0;
                }
            },
            // 鼠标移出继续循环播放
            startLoop () {
                this.int(4000);
            },
            // 鼠标移入停止循环播放
            stopLoop () {
                clearTimeout(this.timerId); // 清除循环
            },
            // 初始化加载
            int (time){
                this.timerId = setInterval(()=> {
                    this.next();
                }, time);
                // 初始化样式
                this.intStyle = {
                    width: this.width + 'px',
                    height: this.height + 'px',
                    background: this.background,
                    color: this.color
                }
            }
        },
        created () {
            this.int(4000);
        }
    }
</script>

<style scoped>
    .banner-bg{
        width: 100%;
    }
    li{
        position:absolute;
        left:0;
        width:100%;
        height:100%;
        font-size:inherit;
        color:#fff;
        font-size:80px;
        text-align:center;
        opacity:0;
        transition: all 1.5s;
    }
    .active{
        opacity:1;
        transition: all 1.5s;
    }
    ul{
        height:100%;
    }
    .name-t{
        display:inline-block;
        height:34px;
        line-height: 34px;
        width:102px;
        font-size: 14px;
        margin:0 5px;
        background:#eee;
        color:#666;
        cursor:pointer;
    }
    span.active{
        color:#fff;
        background:#1bbb9f;
    }
    .status{
      position:absolute;
      /*top:90%;*/
      bottom: 30px;
      width:100%;
      height:40px;
      text-align:Center;
      display: flex;
      justify-content: center;
    }
    @media screen and (min-width:1120px) and (max-width:1366px){
      .box{
        position:relative;
        height:350px;
        min-height: 350px;
      }
    }
    @media screen and (min-width:1366px) and (max-width:1920px){
      .box{
        position:relative;
        height:420px;
        min-height: 350px;
      }
    }
    @media screen and (min-width:1920px){
      .box{
        position:relative;
        height:560px;
        min-height: 350px;
      }
    }

    span{
        display:block;
        height:40px;
        width:20px;
        color:#fff;
        line-height:40px;
        text-align:Center;
        background:rgba(0,0,0, .7);
        cursor:pointer;
    }
    span.prev{
        float:left;
    }
    span.next{
        float:right;
    }
    .btn{
        position:absolute;
        top:50%;
        width:100%;
        transform: translateY(-50%);
    }
    .banner{
      width:100%;
      min-height: 350px;
      overflow: hidden;
    }
</style>
