<!-- 图片轮播组件
参数：
img：图片url
width：组件宽度
height：组件高度
timeSeter:轮播速度  default 4000/1000 = 4秒
setInterval() 函数会每秒执行一次函数，类似手表)。使用 clearInterval() 来停止执行
附有点击查看大图功能-->

<template>
    <div class="box">
        <div @mouseenter="endInterval" @mouseleave="startInterval" class="container"
             :style="{width:width+'px',height:height+'px'}">
            <div :style="{width:wrap_width+'px',height:wrap_height+'px',left:offset_left+'px'}" class="slider-wrap">
                <div class='img' v-for="(item,index) in slider_des" :style="{width:width+'px',height:height+'px'}">
                    <lj-img :md5="item.picmd5" @click.native="clickPic(index)"/>
                </div>
            </div>
            <div class="bottom" v-if="img.length > 1">
                <ul class="pointContainer">
                    <li @click="changeIndex(index)" :class="{point:true,active:nowIndex===index}"
                        v-for="(point,index) in length">
                    </li>
                </ul>
            </div>
            <div @click="pre" class="click pre" v-if="!onePic">
                <i class="icon iconfont icon-left"></i>
            </div>
            <div @click="next" class="click next" v-if="!onePic">
                <i class="icon iconfont icon-right"></i>
            </div>
        </div>
    </div>
</template>

<script>
import LjImg from "components/lj-img";

export default {
    components: {
        LjImg,
    },
    props: {
        img: {
            type: Array,
            default: []
        },
        width: {
            type: Number,
            default: 460
        },
        height: {
            type: Number,
            default: 250
        },
        timeSeter: {
            type: Number,
            default: 4000
        }
    },

    created() {
        if (this.img.length > 1) {
            this.startInterval();
        } else if (this.img.length == 1) {
            this.onePic = true;
        }
    },

    data() {
        return {
            length: new Array(this.img.length),
            nowIndex: 0,
            wrap_width: this.width * (this.img.length + 2),
            wrap_height: this.height,
            offset_left: -this.width,
            isTransition: true,
            timer: null,
            animateFlag: true,
            timerAuto: null,
            clickSrc: "",
            onePic: false,
        }
    },
    computed: {
        slider_des: function () {
            var arr = [];
            var arr1 = arr.concat(this.img);
            arr1.push(this.img[0]);
            arr1.unshift(this.img[this.img.length - 1]);
            return arr1;
        }
    },
    methods: {
        pre() {
            if (this.nowIndex === 0) {
                if (!this.animateFlag) {
                    clearInterval(this.timer);
                    this.animateFlag = true;
                    this.offset_left = -(this.length.length) * this.width;
                }
                this.animate(-this.width, 0, function (that) {
                    that.offset_left = -(that.length.length) * that.width;
                });
                this.nowIndex = this.img.length - 1;
                return
            } else {
                if (!this.animateFlag) {
                    this.animateFlag = true;
                    clearInterval(this.timer);
                    this.offset_left = -(this.nowIndex * this.width);
                }
                this.animate(-(this.nowIndex + 1) * this.width, -(this.nowIndex * this.width));
            }
            this.nowIndex -= 1;
        },
        startInterval() {
            this.timerAuto = setInterval(this.next, this.timeSeter);
        },
        endInterval() {
            clearInterval(this.timerAuto);
        },
        next() {
            if (this.nowIndex === this.length.length - 1) {
                if (!this.animateFlag) {
                    this.animateFlag = true;
                    clearInterval(this.timer);
                    this.offset_left = -this.width;
                }
                this.animate(-(this.length.length) * this.width, -(this.length.length + 1) * this.width, function (that) {
                    that.offset_left = -that.width;
                });
                this.nowIndex = 0;
                return
            } else {
                if (!this.animateFlag) {
                    this.animateFlag = true;
                    clearInterval(this.timer);
                    this.offset_left = -(this.nowIndex + 2) * this.width;
                }
                this.animate(-(this.nowIndex + 1) * this.width, -(this.nowIndex + 2) * this.width);
                this.nowIndex += 1;
            }
        },
        animate(start, end, fuc) {
            var distance = end - start;
            var pre_dis = distance / 50;
            var that = this;
            this.timer = setInterval(function () {
                that.animateFlag = false;
                if (Math.abs(end - that.offset_left) <= Math.abs(pre_dis)) {
                    that.offset_left = end;
                    if (fuc) {
                        fuc(that);
                    }
                    that.animateFlag = true;
                    clearInterval(that.timer);
                    that.timer = null;
                    return
                }
                that.offset_left += pre_dis;
            }, 1);
        },
        changeIndex(index) {
            clearInterval(this.timer);
            this.animate(-(this.nowIndex + 1) * this.width, -(index + 1) * this.width);
            this.nowIndex = index;
        },
        clickPic(index) {
            var image = [];
            var mdlist = [];
            for (const item of this.img) {
                if (item.picmd5) {
                    var url = $lj.constant.cacheDir + "/" + item.picmd5;
                    image.push(url);
                    mdlist.push(item.picmd5)
                }
            }
            // 轮播机制，显示list=[尾，原list，首]，index 需要-1
            $lj.photoBrowser(image, index - 1, mdlist);

        },
    }
}
</script>


<style scoped>
* {
    margin: 0;
    list-style: none;
}

.box {
    position: relative;
}

.container {
    margin: 0 auto;
    border: 1px solid #ffffff;
    overflow: hidden;
    left: 0;
    top: 0;
    position: absolute;
}

.slider-wrap {
    position: absolute;
    top: 0;
}

.transition {
    transition: 0.5s;
}

.img {
    background-color: white;
    float: left;
    text-align: center;
    display: inline;
}

.click {
    width: 40px;
    background-color: rgba(44, 43, 43, 0.3);
    color: rgb(0, 0, 0);
    font-weight: bold;
    position: absolute;
    height: 40px;
    line-height: 40px;
    margin-top: -20px;
    top: 50%;
    cursor: pointer;
    border-radius: 50%;
    text-align: center;
}

.pre {
    left: 0;
}

.next {
    right: 0;
}

.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    text-align: center;
}

.pointContainer {
    height: 20px;
}

.point {
    display: inline-block;
    border: 5px solid #eeeeee;
    border-radius: 5px;
    line-height: 0;
    margin-right: 3px;
}

.active {
    border: 5px solid #42b983;
}
</style>