<template>
    <div class="constructionUp">
        <div id="activityDiv">
            <ul num="0" id="activityUl">
                <li class="activityLi" v-for="(item, index) in levelRule" :key="index" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
                    <div class="liText">
                        <div class="rules-card">
                            <img v-if="item.level==1" src="~imgPath/distribute/distribute-rules-one.png"/>
                            <img v-if="item.level==2" src="~imgPath/distribute/distribute-rules-two.png"/>
                            <img v-if="item.level==3" src="~imgPath/distribute/distribute-rules-three.png"/>
                            <div class="user-level" v-show="levelRule.length > 1 && userLevel == item.level">当前等级</div>
                        </div>
                    </div>
                </li> 
            </ul>
        </div>
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            liWidth: 0,
            liNum: 0,
            startX: 0,
            endX: 0,
            currantIndex: 0, 
        };
    },
    props: {
        userLevel: {
            default: '1'
        },
        levelRule: {
            default: () => {
                return [];
            }
        }
    },
    mounted () {
        this.initUlWidth();
    },
    methods: {
        initUlWidth () { // 初始化 ul的宽度
            let pit = document.documentElement.clientWidth / 750; // 当前手机屏幕和750屏幕的比例
            let oldWidth = document.getElementsByClassName('activityLi')[0].offsetWidth; // 单个li的宽度
            let marginR = getComputedStyle(document.getElementsByClassName('activityLi')[0], null)['marginRight']; // 获取单个的marginRight,带px
            let marginNum = parseInt(marginR.replace('px', ''));
            this.liWidth = oldWidth + marginNum; // 单个宽度+maringRight
            let liCount = parseInt(document.getElementsByClassName('activityLi').length);// li的个数
            this.liNum = liCount;
            let ULpx = oldWidth * liCount + (liCount - 1) * marginNum; // 最后一个margin不算
            document.getElementById('activityUl').style.width = ULpx / pit + 'px';// 除以比率，让当前div宽度与2倍设计比例一样，设置ul的长度最后那个margin不算


            // 初始化位置
            this.currantIndex = this.userLevel - 1;
            document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px';
            this.$emit('getCurrentIndex',this.currantIndex);
        },
        touchStart (e) {
            // 记录初始位置
            e.preventDefault(); // 阻止默认事件，滚动等
            this.startX = e.touches[0].clientX; // 记录滑动开始的位置
        },
        touchEnd (e) {
            e.preventDefault(); // 阻止默认事件
            // 记录结束位置
            this.endX = e.changedTouches[0].clientX;
            // 左滑
            if (this.startX - this.endX > 30) {
                console.log('左滑');
                if (this.currantIndex >= this.liNum - 1) {
                    // 不做操作
                } else {
                    this.currantIndex++;
                    document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px';
                }
            }
            // 右滑
            if (this.startX - this.endX < -30) {
                if (this.currantIndex === 0) {
                    // 不做操作
                } else {
                    this.currantIndex--;
                    document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px';
                }
            }
            this.startX = 0;
            this.endX = 0;
            this.$emit('getCurrentIndex',this.currantIndex);
        }
 
    }
};
</script>
<style lang="scss" scoped>
    .constructionUp{
        width: 100%;
        #activityDiv{
            padding-left: 0.72rem;
            // background-color: #ffffff;
            overflow: hidden;
            #activityUl{
                position: relative;
                left: 0;
                height: 3.12rem;
                transition:all .4s ease;
                // background-color: #ffffff;
                list-style: none;
                .activityLi{
                    float: left;
                    width: 6.06rem;
                    height: 3.12rem;
                    &:not(:last-child){
                        margin-right: 0.24rem;
                    }
                    img{
                        width: 6.06rem;
                        height: 3.12rem;
                    }
                    .rules-card{
                        position: relative;
                        .user-level{
                            position: absolute;
                            left: 0;
                            top: 0;
                            width:1.12rem;
                            height:0.44rem;
                            line-height: 0.44rem;
                            text-align: center;
                            border-radius:0.16rem 0rem 0.16rem 0rem;
                            background: rgba($color: #000000, $alpha: 0.3);
                            font-size:0.2rem;
                            font-weight:500;
                            color: #FFFFFF;
                        }
                    }
                }
            }
        }
    }
</style>
