<template>
  <view class="integral">
    <dHeader :title="$lang.lang.integral.info"></dHeader>
    <view class="container">
      <view class="header">
        <view class="avatar">
          <image src="../../static/img/vip_avatar.png" mode=""></image>
        </view>
        <view class="content">
          <view class="content-title"
            >{{ formattedLevelData(levelInfo.level) }}<image class="content-image" src="../../static/img/glodg.png"></image></view
          >

          <view class="content-text">
            <view class="text"
              >{{ $lang.lang.integral.spend }} {{ levelInfo.usedScore }}</view
            >
            <view class="text"
              >{{ $lang.lang.integral.available }}
              {{ levelInfo.holdScore }}</view
            >
          </view>
          <view class="divider">
            <image class="divider-image" src="../../static/img/goldBe.png"></image>
            <view class="divider-active" :style="{ width: `${score}%` }"></view>
            <view class="divider-unm">{{ levelInfo.totalScore }}</view>
            <view class="divider-level">{{ formattedLevelData(levelInfo.level) }}</view>
          </view>
        </view>
        <view class="classification">
          <image class="classification-image" :src="levelIcon"></image>
          <view class="log-menu">
            <view class="menu-item" @click="toLog(0)"
              >{{ $lang.lang.integral.logPoints }}&ensp;&gt;</view
            >
            <!--不显示兑换日志-->
            <view class="menu-item" @click="toLog(1)" v-if="false"
              >{{ $lang.lang.integral.logExchange }}&ensp;&gt;</view
            >
            <view class="menu-item" @click="toLog(2)"
              >{{ $lang.lang.integral.logLevel }}&ensp;&gt;</view
            >
          </view>
        </view>
      </view>
      <view class="main" v-if="false">
        <view class="main-nav">
          <view
            class="nav-item"
            :class="{ 'nav-active1': navIndex === 0 }"
            @click="navIndex = 0"
            >{{ $lang.lang.integral.redeemGifts }}</view
          >
          <view
            class="nav-item"
            :class="{ 'nav-active2': navIndex === 1 }"
            @click="navIndex = 1"
            >{{ $lang.lang.integral.pointsCampaign }}</view
          >
        </view>
        <view class="main-content">
          <gift v-show="navIndex === 0" :userInfo="userInfo"></gift>
          <points v-show="navIndex === 1"></points>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dHeader from "../../components/dHeader/index.vue";
import points from "./components/points.vue";
import gift from "./components/gift.vue";
export default {
  components: {
    dHeader,
    gift,
    points,
  },
  data() {
    return {
      navIndex: 0,
      // 会员信息
      levelInfo: {},
      // 会员图标
      levelIcon: "",
      userInfo: {},
      levelData:[]
    };
  },
  computed: {
    score() {
      if (this.levelInfo.totalScore) {
        return Math.min(
          Math.floor(
            (this.levelInfo.totalScore / this.levelInfo.upperCount) * 100
          ),
          100
        );
      }
      return 0;
    },
  },
  created() {
    this.getUserInfo();
    this.getLevels();
  },
  methods: {
    formattedLevelData(value) {
      if (value!=null){
        const item=this.levelData.filter(item => value==item.value)[0]
        return item[this.$lang.label];
      }
      return '';
    },
    getLevels () {
      this.$request.getConfig('membership_levels').then(res => {
        if(res.code==0&&res.data&&res.data.list&&res.data.list.length>0){
          this.levelData = res.data.list
        }
      })
    },
    toLog(val) {
      let url = "";
      switch (val) {
        case 0:
          url = "/pages/log/integral";
          break;
        case 1:
          url = "/pages/log/exchange";
          break;
        case 2:
          url = "/pages/log/level";
          break;
        default:
          // 可以添加默认处理逻辑
          break;
      }
      uni.navigateTo({ url });
    },
    // 获取个人信息
    async getUserInfo() {
      try {
        const { code, data } = await this.$request.get(
          "/app-api/member/user/get"
        );
        if (code === 0 && data) {
          const { userScoreLevelInfo, ...args } = data;
          this.userInfo = args;
          this.levelIcon = userScoreLevelInfo.levelIcon;
          this.getMemberScore(this.$store.getters.id);
        }
      } catch (err) {}
    },
    // 获取会员积分信息
    async getMemberScore(id) {
      try {
        const { code, data } = await this.$request.post(
          `/app-api/member/user-score/info?id=${id}`,
          { id }
        );
        if (code === 0 && data) {
          this.levelInfo = data;
        }
      } catch (err) {}
    },
  },
};
</script>

<style>
@import url(../../static/css/integral.css);
</style>
