<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"
          @mousedown="touchStart"
          @touchend.capture="touchEnd"
          @mouseup="touchEnd"
        >
          <div class="liText">
            <div class="rules-card">
              <img
                v-if="item.level == 1"
                src="~imgPath/distribute/LV_1@4x.png"
              />
              <img
                v-if="item.level == 2"
                src="~imgPath/distribute/LV_2@4x.png"
              />
              <img
                v-if="item.level == 3"
                src="~imgPath/distribute/LV_3@4x.png"
              />
              <img
                v-if="item.level == 4"
                src="~imgPath/distribute/LV_4@4x.png"
              />
              <img
                v-if="item.level == 5"
                src="~imgPath/distribute/LV_5@4x.png"
              />
              <img
                v-if="item.level == 6"
                src="~imgPath/distribute/LV_6@4x.png"
              />
              <img
                v-if="item.level == 7"
                src="~imgPath/distribute/LV_7@4x.png"
              />
              <img
                v-if="item.level == 8"
                src="~imgPath/distribute/LV_8@4x.png"
              />
              <div class="user-level" v-show="userLevel == item.level">
                当前等级
              </div>
              <div class="user-level no-level" v-show="userLevel < item.level">
                未解锁
              </div>
              <!-- <div class='bottom-border'></div> -->
              <div class="name-level">{{ item.title }}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      liNum: 0,
      startX: 0,
      endX: 0,
      currantIndex: 0,
    };
  },
  props: {
    userLevel: {
      default: "1",
    },
    levelRule: {
      default: () => {
        return [];
      },
    },
    // page页面传来的值 currantIndex是内部组件的值
    currentIndex: {
      default: 0,
    },
  },
  watch: {
    // 观察该值 触发图片移动
    currentIndex: {
      immediate: true,
      handler(newVal) {
        if (newVal == this.currantIndex) {
          return;
        }
        this.currantIndex = newVal;
        document.getElementById("activityUl").style.left =
          -this.currantIndex * (6.22 + 0.32) + "rem";
      },
    },
  },
  mounted() {
    this.initUlWidth();
  },
  methods: {
    initUlWidth() {
      // 初始化 ul的宽度
      let liCount = this.levelRule.length;

      this.liNum = liCount;

      document.getElementById("activityUl").style.width =
        this.liNum * 6.22 + (this.liNum - 1) * 0.32 + "rem";

      // 初始化位置
      this.currantIndex = this.userLevel - 1;
      document.getElementById("activityUl").style.left =
        -this.currantIndex * (6.22 + 0.32) + "rem";
      this.$emit("getCurrentIndex", this.currantIndex);
    },
    touchStart(e) {
      // 记录初始位置
      e.preventDefault(); // 阻止默认事件，滚动等
      if (e.touches) {
        this.startX = e.touches[0].clientX; // 记录滑动开始的位置
      } else {
        this.startX = e.clientX; // 记录滑动开始的位置
      }
    },
    touchEnd(e) {
      e.preventDefault(); // 阻止默认事件
      // 记录结束位置
      if (e.changedTouches) {
        this.endX = e.changedTouches[0].clientX;
      } else {
        this.endX = e.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 * (6.22 + 0.32) + "rem";
        }
      }
      // 右滑
      if (this.startX - this.endX < -30) {
        if (this.currantIndex === 0) {
          // 不做操作
        } else {
          this.currantIndex--;
          document.getElementById("activityUl").style.left =
            -this.currantIndex * (6.22 + 0.32) + "rem";
        }
      }
      this.startX = 0;
      this.endX = 0;
      this.$emit("getCurrentIndex", this.currantIndex);
    },
  },
};
</script>
<style lang="scss" scoped>
.constructionUp {
  width: 100%;
  #activityDiv {
    padding-left: 0.48rem;
    overflow: hidden;
    #activityUl {
      position: relative;
      left: 0;
      height: 2.5rem;
      transition: all 0.4s ease;
      list-style: none;
      display: flex;
      margin-bottom: 0.34rem;
      .activityLi {
        float: left;
        width: 6.54rem;
        height: 2.8rem;
        &:not(:last-child) {
          // margin-right: 0.32rem;
        }
        img {
          width: 6.54rem;
          height: 2.8rem;
        }
        .rules-card {
          position: relative;
          img {
            border-radius: 0.2rem;
          }
          .user-level {
            position: absolute;
            left: 0.16rem;
            top: 0.08rem;
            width: 1.12rem;
            height: 0.44rem;
            line-height: 0.44rem;
            text-align: center;
            font-size: 0.2rem;
            font-weight: 500;
            color: #ffffff;
            background: linear-gradient(90deg, #ffae52 0%, #ff7214 100%);
            border-radius: 0.24rem 0rem 0.24rem 0rem;
          }
          .no-level {
            background: #cccccc;
          }
          .name-level {
            position: absolute;
            top: 1.36rem;
            left: 0.32rem;
            font-size: 0.4rem;
            font-weight: 600;
            color: #ff781f;
          }
        }
      }
    }
  }
}
</style>
