<template>
  <div class="integral">
    <div class="header">
      <div />
      <div class="header-content">
        <div class="content-box">
          <div class="avatar">
            <img class="imgs" src="@/assets/integral/vip_avatar.png" alt="" />
          </div>
          <div class="content-text">
            <div class="text-vip">
              {{ $t("integral.headerTitle") }}{{ integralInfo.levelName }}
            </div>
            <div class="text-integral">
              {{ $t("integral.spend") }}{{ integralInfo.usedScore }}&ensp;{{
                $t("integral.available")
              }}{{ integralInfo.holdScore }}
            </div>
          </div>
          <div class="content-image">
            <img v-if="levelIcon" class="imgs" :src="levelIcon" alt="" />
            <img
              v-else
              class="imgs"
              src="@/assets/integral/vip_avatar.png"
              alt=""
            />
          </div>
        </div>
        <div class="content-divider">
          <div class="divider-vip">{{ integralInfo.levelName }}</div>
          <div class="divider-num">{{ integralInfo.totalScore }}</div>
          <div class="divider-active" :style="{ width: `${score}%` }" />
        </div>
      </div>
      <div class="header-menu">
        <div class="menu-item" @click="toJump(1)">
          {{ $t("integral.logPoints") }}&emsp;<i class="el-icon-arrow-right" />
        </div>
        <div class="menu-item" @click="toJump(2)">
          {{ $t("integral.logExchange") }}&emsp;<i
            class="el-icon-arrow-right"
          />
        </div>
      </div>
    </div>
    <div class="nav">
      <div
        class="nav-item"
        :class="{ 'nav-item-active1': count == 1 }"
        @click="count = 1"
      >
        {{ $t("integral.redeemGifts") }}
      </div>
      <div
        class="nav-item"
        :class="{ 'nav-item-active2': count == 2 }"
        @click="count = 2"
      >
        {{ $t("integral.pointsCampaign") }}
      </div>
    </div>
    <IntegralExchange v-show="count == 1" />
    <IntegralActivity v-show="count == 2" />
  </div>
</template>
<script>
import IntegralExchange from "./components/IntegralExchange.vue";
import IntegralActivity from "./components/IntegralActivity.vue";
import { getMemberInfo } from "@/api/integral";
export default {
  name: "JdIntegral",
  components: {
    IntegralExchange,
    IntegralActivity,
  },
  data() {
    return {
      count: 1,
      // 会员积分信息
      integralInfo: {},
      // 会员图标
      levelIcon: "",
    };
  },
  computed: {
    score() {
      if (this.integralInfo.totalScore) {
        return Math.min(
          Math.floor(
            (this.integralInfo.totalScore / this.integralInfo.upperCount) * 100
          ),
          100
        );
      }
      return 0;
    },
  },
  created() {
    this.getIntegralInfo();
    const { loginUser } = this.$store.state.user;
    if (loginUser) {
      const userScoreLevelInfo = loginUser.userScoreLevelInfo;
      this.levelIcon = userScoreLevelInfo.levelIcon;
      console.log(this.levelIcon);
    }
  },
  methods: {
    // 跳转 日志
    toJump(val) {
      const path =
        val === 1 ? "/jiedao/jd-integral-log" : "/jiedao/jd-exchange-log";
      this.$router.push({ path });
    },
    // 获取个人积分信息
    async getIntegralInfo() {
      try {
        const id = this.$store.getters.id;
        const { code, data } = await getMemberInfo({ id });
        if (code !== 0) return;
        this.integralInfo = data;
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.integral {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .header {
    width: 100%;
    height: 160px;
    color: #333;
    background: #b9bcc8;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-content {
      padding: 20px 0;
      width: 50%;
      height: inherit;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .content-box {
        width: 100%;
        display: flex;
        align-items: center;
      }
      .avatar {
        margin-right: 10px;
        width: 60px;
        height: 60px;
        overflow: hidden;
        .imgs {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .content-image {
        margin-left: auto;
        width: 60px;
        height: 60px;
        overflow: hidden;
        .imgs {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .content-text {
        .text-vip {
          font-size: 16px;
        }
      }
    }
    .header-menu {
      .menu-item {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
        i {
          font-weight: 700;
        }
      }
    }
  }
  .content-divider {
    position: relative;
    width: 100%;
    height: 4px;
    background: #ccc;
    margin: 20px 0;
    border-radius: 2px;
  }
  .divider-active {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: #3461d4;
    border-radius: 2px;
  }
  .divider-vip {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(120%, -50%);
    font-size: 16px;
    font-weight: 700;
    color: #333;
  }
  .divider-num {
    top: 0;
    right: 50%;
    transform: translate(-50%, -120%);
    position: absolute;
    font-size: 16px;
    color: #3461d4;
    font-weight: 700;
  }
  .content-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .text-vip {
    font-size: 24px !important;
    font-weight: 700;
    color: #2a426b;
  }
}
.nav {
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  background-color: #d1d5e1;
  border-bottom: 1px solid #e9e9e9;
  .nav-item {
    display: flex;
    width: 50%;
    height: 60px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    &:hover {
      color: #3461d4;
    }
  }
  .nav-item-active1 {
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 80% 0%);
    font-weight: 600;
    background-color: #fff !important;
    color: #000 !important;
    overflow: hidden;
  }

  .nav-item-active2 {
    clip-path: polygon(20% 0%, 0% 100%, 100% 100%, 100% 0%);
    font-weight: 600;
    background-color: #fff !important;
    color: #000 !important;
    overflow: hidden;
  }
}
</style>
