<template>
  <div v-if="maxMemberInfo.title" class="good__maxMemberInfo">
    <div class="maxMemberInfo__container" :style="style">
      <cr-image
        :src="maxMemberInfo.icon | imogr({ h: 16 })"
        width="auto"
        height="0.426rem"
        class="maxMemberInfo__icon"
      />
      <div class="maxMemberInfo__text">
        <span
          v-for="(item, key) in maxMemberInfo.titles"
          :key="'text' + key"
          class="maxMemberInfo__text__item"
          :style="{ fontWeight: item.isBold ? 600 : 400 }"
        >
          <span>
            {{ item.title }}
          </span>
          <em v-if="key < maxMemberInfo.titles.length - 1">|</em>
        </span>
      </div>

      <div class="maxMemberInfo__right" @click="jump">
        <span class="maxMemberInfo__rightText">{{ maxMemberInfo.rightText }}</span>
        <cr-icon class="maxMemberInfo__rightIcon" :type="maxMemberInfo.rightIcon" size="0.23rem" />
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from '../store';
import { locationHrefPatch } from '@/service/utils.service';
export default {
  name: 'MaxMemberBar',
  computed: {
    ...mapGetters(['maxMemberInfo']),
    style() {
      const { backgroundImg, fontColor: color } = this.maxMemberInfo;
      return {
        backgroundImage: `url(${backgroundImg})`,
        color
      };
    }
  },
  methods: {
    jump() {
      locationHrefPatch(this.maxMemberInfo.jumpUrl);
    }
  }
};
</script>
<style lang="less" scoped>
.good__maxMemberInfo {
  padding: @padding-unit @padding-sm;
}
.maxMemberInfo {
  &__container {
    .text-size(12);
    display: flex;
    align-items: center;
    padding: @padding-x @padding-xs;
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  &__text {
    &__item {
      span {
        font-weight: inherit;
      }
      em {
        font-weight: inherit;
        font-style: normal;
        vertical-align: 1px;
      }
    }
  }
  &__icon {
    margin-right: @padding-unit;
  }
  &__right {
    margin-left: auto;
    &Icon {
      vertical-align: -1px;
      margin-left: 2px;
    }
  }
}
</style>
