<template>
  <view v-if="!showMaxMember" class="member-container">
    <view v-if="normalMember" class="member-box" :class="{ normalMemeber: !showMaxMember }">
      <view class="benefits" @click="navigateUrl(3)">
        <view class="content">
          <view v-for="(item, index) in memberInfo.benefitsList" :key="index" class="item">
            <view class="icon" :style="{ backgroundImage: `url(${item.levelSignPic})` }" />
            <view class="text">{{ item.desc }}</view>
          </view>
        </view>
      </view>
      <view class="line" />
      <view class="statistics" @click="navigateUrl(4)">
        <view class="desc">累积权益已省</view>
        <view class="info">
          <text class="number">{{ memberInfo.saveMoney || 0 }}</text>
          <text class="unit">元</text>
        </view>
      </view>
    </view>
  </view>
  <view v-else class="member-container">
    <view class="max-member-box">
      <view
        class="max-member-box-scroll-view"
        :class="swipeClass"
        @touchstart="touchstart"
        @touchmove="touchmove"
        @touchend="touchend"
      >
        <!-- <view style="padding: 0 30rpx; display: flex;"> -->
        <view
          v-if="maxMember"
          id="max-member"
          class="max-member"
          :style="{
            backgroundImage: `url(${maxMemberInfo.imgUrl})`
          }"
          @click="toMaxMember(maxMemberInfo.jumpUrl, maxMemberInfo.status)"
        >
          <view v-if="maxMemberInfo.status && maxMemberInfo.status == 3" class="time">{{
            maxMemberInfo.expireTime
          }}</view>
          <view v-if="maxMemberInfo.text" class="textSlide">
            <view class="slideContent">
              <swiper class="textSwiper" vertical autoplay circular interval="5000">
                <swiper-item v-for="(item, index) in maxMemberInfo.text" :key="index">
                  <view class="textContent">{{ item }}</view>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>
        <view v-if="normalMember" id="normal-member" class="member-box member-box-in-max">
          <view
            class="benefits"
            style="-webkit-overflow-scrolling: touch;"
            @click.stop="navigateUrl(3)"
          >
            <view class="content">
              <swiper style="width: 100%; height: 120rpx;">
                <swiper-item
                  v-for="(item, index) in memberInfo.benefitsList"
                  :key="index"
                  class="item inSwiper"
                >
                  <view class="icon" :style="{ backgroundImage: `url(${item.levelSignPic})` }" />
                  <view class="text">{{ item.desc }}</view>
                </swiper-item>
              </swiper>
            </view>
          </view>
          <view class="line" />
          <view class="statistics in-max" @click="navigateUrl(4)">
            <view class="desc">累积权益已省</view>
            <view class="info">
              <text class="number in-max">{{ memberInfo.saveMoney || 0 }}</text>
              <text class="unit">元</text>
            </view>
          </view>
        </view>
        <!-- </view> -->
      </view>
    </view>
  </view>
</template>
<script>
import { jumpToUrl } from "@/mixins/common";
import { saTrackEvent } from "@/utils/sa.js";
export default {
  props: {
    showMaxMember: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: () => {}
    },
    memberInfo: {
      type: Object,
      default: () => {}
    },
    maxMemberInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      touchStart: [0, 0],
      touchEnd: [0, 0],
      swipeClass: ""
    };
  },
  computed: {
    normalMember() {
      return this.$config("yxm") && this.userInfo.hasLogin && Object.keys(this.memberInfo).length;
    },
    maxMember() {
      return (
        this.$config("yxm") && this.userInfo.hasLogin && Object.keys(this.maxMemberInfo).length
      );
    }
  },
  methods: {
    touchstart(e) {
      let x = e.touches[0].pageX;
      let y = e.touches[0].pageY;
      this.touchStart = [x, y];
    },
    touchmove(e) {
      let x = e.touches[0].pageX;
      let y = e.touches[0].pageY;
      this.touchEnd = [x, y];
    },
    touchend() {
      let start = this.touchStart;
      let end = this.touchEnd;
      if (start[0] < end[0] - 20) {
        console.log("向右滑了");
        this.swipeClass = "swipeLeft";
        this.$emit("changeBg", "maxMember");
      } else if (start[0] > end[0] + 20) {
        console.log("向左滑了");
        this.swipeClass = "swipeRight";
        this.$emit("changeBg", "normal");
      } else {
        console.log("滑动太短 不做处理");
      }
    },
    navigateUrl(type) {
      this.$emit("navigateUrl", type);
    },
    toMaxMember(url, status) {
      saTrackEvent("MINI_MaxMemberEntryBtnClick", {
        entry_btn_status: status,
        page_name: "我的页面",
        commodity_id: ""
      });
      jumpToUrl(url);
    }
  }
};
</script>
<style scoped lang="scss">
.max-member-box-scroll-view {
  position: absolute;
  left: 30rpx;
  top: 0;
  display: flex;
  transition: left 0.5s;
  &.swiperLeft {
    left: 30rpx;
  }
  &.swipeRight {
    left: -420rpx;
  }
}
.member-container {
  margin-top: -210rpx;
  position: relative;
}
.max-member-box {
  position: relative;
  width: 100vw;
  height: 176rpx;
  background-size: cover;
  margin-bottom: 24rpx;
  overflow: hidden;
}

.max-member {
  margin-right: 20rpx;
  flex-shrink: 0;
  width: 560rpx;
  height: 176rpx;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  .time {
    position: absolute;
    right: 24rpx;
    top: 40rpx;
    font-size: 20rpx;
    color: #788aff;
    letter-spacing: -0.29px;
  }
  .textSlide {
    width: 350rpx;
    display: flex;
    height: 40rpx;
    // background: rgba(10, 66, 253, 0.2);
    position: absolute;
    bottom: 10rpx;
    left: 190rpx;
    padding: 0 12rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    .desc {
      color: #ffdcae;
      padding-right: 18rpx;
    }
    .slideContent {
      width: 100%;
      height: 40rpx;
      .textSwiper {
        width: 100%;
        height: 100%;
        .textContent {
          line-height: 44rpx;
          display: flex;
          width: 100%;
          flex-wrap: nowrap;
          align-items: center;
          color: $white;
          height: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: left;
        }
      }
    }
  }
}
.member-box {
  width: 690rpx;
  height: 176rpx;
  background-image: url("http://img.lkbang.net/maxMember/20220413/normal-1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &.normalMemeber {
    margin: 0 auto 24rpx;
  }
  &-in-max {
    width: 560rpx;
    background-image: url("http://img.lkbang.net/maxMember/20220413/normal-2.png");
  }
  .line {
    width: 0;
    height: 90rpx;
    border-right: 1px dashed #773e1d;
    opacity: 0.59;
  }
  .benefits {
    padding: 0 20rpx;
    width: 384rpx;
    height: 120rpx;
    overflow: hidden;
    .content {
      width: 100%;
      height: 146rpx;
      padding-bottom: 20rpx;
      display: flex;
      // justify-content: center;
      align-items: center;
      overflow-x: auto;
      .item {
        width: 50% !important;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 10rpx;
        &.inSwiper {
          height: 120rpx !important;
        }
        .icon {
          background-size: cover;
          width: 72rpx;
          height: 72rpx;
          margin-bottom: 4rpx;
        }
        .text {
          text-align: center;
          width: 100%;
          font-size: 24rpx;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    // background: #000;
  }
  .statistics {
    width: 296rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &.in-max {
      width: 206rpx;
    }
    // opacity: 0.43;
    .desc {
      font-size: 24rpx;
      color: #773e1d;
      margin-bottom: 8rpx;
    }
    .info {
      display: flex;
      align-items: baseline;
      font-weight: 600;
      color: #cd4b00;
      .number {
        line-height: 52rpx;
        font-size: 52rpx;
        &.in-max {
          font-size: 36rpx;
          line-height: 36rpx;
        }
      }
      .unit {
        line-height: 24rpx;
        font-size: 24rpx;
      }
    }
  }
}
</style>
