<template>
  <view v-if="!manageCartState && activityInfo.length" class="activity">
    <view
      :class="['activity-list', { init: end }]"
      :style="{ transform: 'translateY(' + -lampY + 'rpx)' }"
    >
      <view
        v-for="item in activityInfo"
        :key="item.activityDesc"
        class="activity-list-detail"
        @click="goSpecialList(item)"
      >
        <view class="activity-list-name">
          <image src="https://img.lkbang.net/xcx/couponicon.png" class="activity-list-icon" />
          <text>{{ item.activityDesc }}</text>
        </view>
        <text style="color: #333"
          >查看更多商品<text class="iconfont icon-arrow" style="color: #c8c9cc"
        /></text>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState } from "../shopCartModules.js";
export default {
  props: {
    isActivity: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      setInterval: null,
      lampY: 0,
      height: 0,
      end: false,
      boxHeight: 76
    };
  },
  computed: {
    ...mapState(["activityInfo", "manageCartState"])
  },
  watch: {
    activityInfo: {
      deep: true,
      immediate: true,
      handler(value) {
        clearInterval(this.setInterval);
        if (!this.activityInfo.length) return;
        this.$nextTick(() => {
          this.height = value.length * 76;
          this.setInterval = setInterval(this.marquee, 3000);
        });
      }
    },
    isActivity(v) {
      if (v) {
        if (this.activityInfo.length) {
          clearInterval(this.setInterval);
          this.setInterval = setInterval(this.marquee, 3000);
        }
      } else {
        clearInterval(this.setInterval);
      }
    }
  },
  methods: {
    marquee() {
      if (this.lampY + this.boxHeight >= this.height) {
        this.end = true;
        this.lampY = 0;
      } else {
        this.end = false;
        this.lampY += this.boxHeight;
      }
    },
    goSpecialList(item) {
      // 跳转活动专题并带参数activity
      uni.navigateTo({
        url: `/pages/activityProduct/index?activityId=${item.activityId}&activityDesc=${item.activityDesc}&activityLimitAmt=${item.activityLimitAmt}`
      });
    }
  }
};
</script>
<style lang="scss">
.activity {
  position: fixed;
  z-index: 2;
  left: 0;
  width: 100vw;
  height: 76rpx;
  overflow: hidden;
  margin: auto;
  font-size: 28rpx;
  padding: 0 30rpx 0 20rpx;
  color: $font-color-base;
  background-color: #f7f8fa;
  &-list {
    transition-timing-function: ease;
    transition-duration: 0.3s;
    transition-property: all;
    &-icon {
      width: 44rpx;
      height: 36rpx;
      margin-right: 8rpx;
    }
    &-name {
      display: flex;
      // align-items: center;
      align-content: center;
      color: #333;
      font-weight: bold;
    }
    &-detail {
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: space-between;
      padding: 0 8rpx;
      width: 100%;
      height: 76rpx;
      background: #ffffff;
      background-image: url("https://img.lkbang.net/xcx/rectangle.png");
      background-repeat: no-repeat;
      background-size: auto 100%;
      background-position: -5% 0;
    }
  }
  .init {
    transition-duration: 0s;
  }
}
</style>
