<template>
  <transition name="fade">
    <div @touchend='end' @touchstart='start' @touchmove='move' class="swiper">
      <div class="item" @click="chooseItem(item,index)" v-for="(item, index) in imgs" :style="config5[index]" :key="item.id">
        <img :src="item.imgSrc" style="position:absolute;">
      </div>
    </div>
  </transition>
</template>
<script>
// import { ce } from 'migu-sdk';
export default {
    name: 'zt',
    data() {
        return {
            activityId: 'MAC_ZP_KF_MGHZJRQJXPX2019',
            stage: '', // 当前活动状态
            voteInfo: '', //当前所有票数列表
            loading: true,
            initCenterIndez: 3, // 初始化中间的index（img数组中）
            currentIndex: 3, //当前中间imgs数组中index
            centerInfo: '', // 当前中间信息
            startX: '',
            endX: '',
            imgs: [
                {
                    name: '巴耶克',
                    imgSrc:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578753283849&di=926ab993242f5124613b7cb61134ff75&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F82c9e6899e7f33bf867f207e871d61e24f473834.jpg',
                    index: 0
                },
                {
                    name: '马拉卡',
                    imgSrc:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579348146&di=5548595a45061454b4b5491f65a74a0a&imgtype=jpg&er=1&src=http%3A%2F%2Fimg23.aspzz.cn%2Fuploads%2Fallimg%2Fc190116%2F154KD32553610-1044U.jpg',
                    index: 1
                },
                {
                    name: '艾吉奥',
                    imgSrc:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579348251&di=7ca30312f94789c03154db45b176b599&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fff1a45aeb6126ba1d0bd6c9e75d192ec83b9fb1a.jpg',
                    index: 2
                },
                {
                    name: '巴耶克白色海报',
                    imgSrc:
                        'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1259084891,2660179829&fm=26&gp=0.jpg',
                    index: 3
                },
                {
                    name: '巴耶克沙漠',
                    imgSrc:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578753631199&di=c7033bf418e21b926a33e102de7a23d5&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2242226280%2C1896230013%26fm%3D214%26gp%3D0.jpg',
                    index: 4
                }
            ],
            previous: 0,
            config5: [
                {
                    id: '-A',
                    position: 'absolute',
                    width: '22%',
                    height: '72%',
                    top: '16.6%',
                    left: '-22%',
                    opacity: 0,
                    zIndex: 0,
                    transition: '.2s'
                },
                {
                    id: 'A',
                    position: 'absolute',
                    width: '32%',
                    height: '72%',
                    top: '16.6%',
                    left: '0%',
                    opacity: 1,
                    zIndex: 1,
                    transition: '.2s'
                },
                {
                    id: 'B',
                    position: 'absolute',
                    width: '40%',
                    height: '82%',
                    top: '9%',
                    left: '13%',
                    opacity: 1,
                    zIndex: 2,
                    transition: '.2s'
                },
                {
                    id: 'center',
                    position: 'absolute',
                    width: '45%',
                    height: '100%',
                    top: '0px',
                    left: '50%',
                    marginLeft: '-22.5%',
                    opacity: 1,
                    zIndex: 4,
                    transition: '.2s'
                },
                {
                    id: 'D',
                    position: 'absolute',
                    width: '40%',
                    height: '82%',
                    top: '9%',
                    left: '48%',
                    opacity: 1,
                    zIndex: 2,
                    transition: '.2s'
                },
                {
                    id: 'E',
                    position: 'absolute',
                    width: '32%',
                    height: '72%',
                    top: '16.6%',
                    left: '68%',
                    opacity: 1,
                    zIndex: 1,
                    transition: '.2s'
                },
                {
                    id: 'E+',
                    position: 'absolute',
                    width: '22%',
                    height: '72%',
                    top: '16.6%',
                    left: '100%',
                    opacity: 0,
                    zIndex: 0,
                    transition: '.2s'
                }
            ],
            itemNormal: 'itemNormal',
            item: 'item',
            itemSelect: 'itemSelect'
        };
    },
    methods: {
        // 获取数据
        async getData() {
            await this.getSingerColumn(); // 获取投票歌手信息
            this.$nextTick(() => {
                this.loading = false;
            });
        },
        // 获取参赛选手栏目
        async getSingerColumn() {
            // this.imgs.sort(() => Math.random() - 0.5);
            // this.imgs = res.nodes;
            // this.imgs.length = 8;
        },

        // 滑动上一个
        prev(index) {
            console.log('上一个');
            this.config5.push(this.config5.shift());
            this.currentIndex = this.currentIndex - 1;
            if (this.currentIndex < 0) {
                this.currentIndex = this.imgs.length - 1;
            }
            this.centerCard();
            this.centerIndex('prev');
        },
        // 滑动下一个
        next() {
            console.log('下一个');
            this.config5.unshift(this.config5.pop());
            this.currentIndex = this.currentIndex + 1;
            if (this.currentIndex > this.imgs.length - 1) {
                this.currentIndex = 0;
            }
            this.centerCard();
            this.centerIndex('next');
            // console.log(this.currentIndex);
        },
        // 开始移动端滑动屏幕
        start(event) {
            this.startX = event.changedTouches[0].clientX;
            this.startY = event.changedTouches[0].clientY;
        },
        // 连续滑动放开注释
        move(event) {
            this.endY = event.changedTouches[0].clientY;
            this.endX = event.changedTouches[0].clientX;
            this.stopDefault(event);
            this.interval = this.endX - this.startX;
            if (this.interval > 40) {
                this.startX = this.endX;
                this.prev();
            }
            if (this.interval < -40) {
                this.startX = this.endX;
                this.next();
            }
        },
        // 滑动放开注释
        end(event) {
            // this.endY = event.changedTouches[0].clientY;
            // this.endX = event.changedTouches[0].clientX;
            //this.stopDefault(event)
            // this.formatSwiper();
        },
        formatSwiper() {
            if (this.startX > this.endX) {
                console.log('左边滑动');
                if (this.startX > this.endX + 40) {
                    this.next();
                }
            } else {
                console.log('右边滑动');
                if (this.endX > this.startX + 40) {
                    this.prev();
                }
            }
        },
        // 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
        stopDefault(event) {
            let differenceY = this.endY - this.startY;
            let differenceX = this.endX - this.startX;
            if (Math.abs(differenceX) > Math.abs(differenceY)) {
                event.preventDefault();
            }
        },
        // 当前imgs在位置上的index（并非img数组的index）
        centerIndex(val) {
            if (val == 'prev') {
                for (let val of this.imgs) {
                    if (val.index == this.imgs.length - 1) {
                        val.index = 0;
                    } else {
                        val.index = val.index + 1;
                    }
                }
            } else {
                for (let val of this.imgs) {
                    if (val.index == 0) {
                        val.index = this.imgs.length - 1;
                    } else {
                        val.index = val.index - 1;
                    }
                }
            }
        },
        // 点击
        chooseItem(item, index) {
            console.log(item);
            console.log(this.initCenterIndez);
            let cycles = item.index;
            if (item.index < this.initCenterIndez) {
                for (let i = 0; i < this.initCenterIndez - cycles; i++) {
                    console.log(item.index);
                    this.prev();
                }
            } else if (item.index > this.initCenterIndez) {
                for (let i = -1; i < item.index - this.initCenterIndez; i++) {
                    this.next();
                }
            } else if (item.index == this.initCenterIndez) {
            }
        },
        // 计算中间卡片信息
        centerCard() {
            this.centerInfo = this.imgs[this.currentIndex];
            this.$emit('centerInfo', this.centerInfo);
        },
        // 加入样式位置的index
        addCardStyle() {
            if (this.imgs.length >= 7) {
                this.initCenterIndez = 3;
                let addtime = this.imgs.length - 7;
                for (let i = 0; i < addtime; i++) {
                    this.config5.push({
                        id: 'other',
                        position: 'absolute',
                        width: '45%',
                        height: '100%',
                        top: '0px',
                        left: '50%',
                        marginLeft: '-22.5%',
                        opacity: 0,
                        transition: '.1s'
                    });
                }
            } else {
                this.config5.pop();
                this.config5.shift();
                this.currentIndex = 2;
                this.initCenterIndez = 2;
            }
        }
    },
    async created() {
        await this.getData();
        await this.addCardStyle(); // 加入样式位置的index
        await this.centerCard(); // 获取中间卡片信息
    }
};
</script>

<style lang="less" scoped>
.swiper {
    width: 100%;
    // border: 1px blue solid;
    height: 100%;
    min-height: 400px;
    position: relative;
    overflow: hidden;

    .item {
        opacity: 0;
        border: 5px #fec473 solid;
        border-radius: 10px;
        background-size: 100% 100%;
        // background-image: url('../imgs/cardBack.png');
        position: relative;
        img {
            height: 100%;
            width: 100%;
            border-radius: 10px;
        }
    }
}
</style>