<template>
  <div class="normal-member">
    <div ref="memberSwiper" class="normal-member-left" @click="jumpUrl('memberCenter')">
      <div v-for="(item, index) in memberInfo.benefitsList" :key="index" class="equities-item">
        <img :src="item.levelSignPic" alt="" />
        <span>{{ item.desc }}</span>
      </div>
    </div>
    <div
      class="normal-member-right"
      :style="{ width: showType === 'mixTogether' ? '106px' : '' }"
      @click="jumpUrl('memberRewardDetail')"
    >
      <span>累计权益已省</span>
      <div class="amount" :style="{ fontSize: showType === 'mixTogether' ? '22px' : '26px' }">
        {{ memberInfo.saveMoney }}<span>元</span>
      </div>
    </div>
  </div>
</template>

<script>
import config from '@/config';
import localStorageService from '@/service/localStorage.service';

export default {
  props: {
    showType: {
      type: String,
      default: 'normalMember'
    },
    memberInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  watch: {
    memberInfo(val) {
      this.memberInfo = val;
    }
  },
  mounted() {
    const { memberSwiper } = this.$refs;
    memberSwiper.addEventListener('touchstart', event => {
      event.stopPropagation();
    });
  },
  methods: {
    jumpUrl(path) {
      const vccToken = this.$route.query.vccToken || localStorageService.get('vccToken');
      const jumpLink = `${config.vipHost}/${path}?vccToken=${vccToken}`;
      window.location.href = jumpLink;
    }
  }
};
</script>

<style lang="less" scoped>
.normal-member {
  display: flex;
  background: linear-gradient(to right, #d8c5ac, #a2835e);
  width: 100%;
  border-radius: @border-radius-md;
  align-items: center;
  justify-content: space-between;
  &-left {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    padding-top: 4px;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      display: none;
      width: 0px;
    }
    .equities-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 80px;
      width: max-content;
      overflow: hidden;
      img {
        width: 36px;
        height: 36px;
        box-sizing: border-box;
      }
      span {
        .text-size(12);
        color: @white;
        margin-top: 2px;
        width: max-content;
      }
    }
  }
  &-left:last-child {
    margin-right: 16px;
  }
  &-left:first-child {
    margin-left: 6px;
  }
  &-right {
    flex-shrink: 0;
    width: 177px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    color: @white;
    span:first-child {
      .text-size(12);
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
    }
    .amount {
      .text-size(26);
      span {
        .text-size(18);
      }
    }
  }
  &-right::before {
    content: '';
    height: 38px;
    width: 2px;
    border-left: 1px #773e1d dashed;
    position: absolute;
    left: 0;
    top: 4px;
  }
}
</style>
