<!-- 权益说明 -->
<template>
  <view
    class="introduce-container"
    :class="{
      login: login
    }"
  >
    <view class="introduce">
      <template v-if="login">
        <view v-if="Object.keys(introduceTitle).length" class="introduce-operation">
          <text class="title">{{ introduceTitle.title }}</text>
          <view class="operation" @click="toIntroduceDetail(introduceTitle.jumpUrl || '')">
            <text class="text">{{ introduceTitle.desc }}</text>
            <text class="iconfont icon-arrow" />
          </view>
        </view>
      </template>
      <template v-else>
        <view v-if="titleModule.length" class="introduce-normal">
          <swiper vertical autoplay circular interval="5000" class="swiper-content">
            <swiper-item
              v-for="(item, index) in titleModule"
              :key="index"
              class="swiper-content-item"
            >
              <text>{{ item.title }}</text>
              <text>{{ item.desc }}</text>
            </swiper-item>
          </swiper>
        </view>
      </template>
      <view class="introduce-benefits">
        <view
          v-for="(item, index) in benefitsInfoList"
          :key="index"
          :class="{
            mainful:
              (index <= 1 && benefitsInfoList.length > 3) ||
              benefitsInfoList.length === 4 ||
              benefitsInfoList.length < 3,
            normal: (index > 1 && benefitsInfoList.length === 5) || benefitsInfoList.length === 3
          }"
        >
          <view class="icon">
            <image :src="item.pic" class="iconImg" mode="widthFix" />
          </view>
          <view class="content">
            <text class="title">{{ item.title }}</text>
            <text class="subtitle">{{ item.desc }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { jumpToUrl } from "@/mixins/common";
export default {
  props: {
    level: {
      // 实际的等级
      type: [String, Number],
      default: "" || 0
    },
    login: {
      type: Boolean,
      default: false
    },
    titleModule: {
      type: Array,
      default: () => []
    },
    benefitsInfoList: {
      type: Array,
      default: () => []
    },
    introduceTitle: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    toIntroduceDetail(url) {
      if (!url) return;
      url = url.replace("{level}", this.level);
      jumpToUrl(url);
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/style/var.scss";
@mixin textFormat {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.introduce-container {
  background: $gray-1;
  display: flex;
  justify-content: center;
  &.login {
    padding-top: 10rpx;
  }
  .introduce {
    width: 702rpx;
    padding: $padding-sm;
    box-sizing: border-box;
    background: $white;
    border-radius: 24rpx;
    &-operation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        color: $black;
        font-weight: $font-weight-bold;
        @include text-size(32);
      }
      .operation {
        display: flex;
        align-items: center;
        @include text-size(24);
        color: $gray-5;
        .iconfont {
          @include text-size(20);
        }
      }
    }
    &-normal {
      .swiper-content {
        height: 60rpx;
        &-item {
          display: flex;
          align-items: center;
          text {
            color: $black;
            @include text-size(28);
            &:first-child {
              font-weight: $font-weight-bold;
              @include text-size(32);
            }
          }
        }
      }
      // justify-content: center;
    }
    &-benefits {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .mainful {
        margin-top: $padding-md;
        width: 320rpx;
        height: 120rpx;
        background-image: url("https://img.lkbang.net/xcx/memberCenterIntro.9eb1b129.png");
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .icon {
          flex-shrink: 0;
          margin: 0 $padding-xs;
          width: 80rpx;
          height: 80rpx;
          .iconImg {
            width: 100%;
            height: auto;
          }
        }
        .content {
          padding-right: $padding-xs;
          flex: 1;
          display: flex;
          flex-direction: column;
          color: #ffc49e;
          align-items: center;
          .title {
            font-weight: $font-weight-bold;
            @include text-size(26);
            @include textFormat;
          }
          .subtitle {
            margin-top: $padding-unit;
            @include text-size(22);
            @include textFormat;
          }
        }
      }
      .normal {
        margin-top: $padding-md;
        width: 174rpx;
        height: 176rpx;
        // background: #000;
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon {
          flex-shrink: 0;
          margin: 0 $padding-xs;
          width: 80rpx;
          height: 80rpx;
          display: flex;
          align-items: center;
          .iconImg {
            width: 100%;
            height: auto;
          }
        }
        .content {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          .title {
            margin-top: $padding-unit;
            color: $black;
            @include text-size(26);
            @include textFormat;
          }
          .subtitle {
            color: #9b9b9b;
            @include text-size(22);
            @include textFormat;
          }
        }
      }
    }
  }
}
</style>
