<template>
  <view>
    <view class="banner">
      <view class="d-b-c">
        <view class="banner-name">{{ memberAwardsUnderVO.memberName }}</view>
        <view class="banner-position">
          <image
            class="banner-logo"
            v-if="memberAwardsUnderVO.image"
            :src="memberAwardsUnderVO.image"
            mode="widthFix"
          ></image>
          <image
            class="banner-logo"
            v-else
            src="/static/default.png"
            mode="widthFix"
          ></image>
          <view class="banner-txt">{{
            memberAwardsUnderVO.pkTransactionVal
          }}</view>
        </view>
      </view>
    </view>

    <view class="department-wrap">
      <view class="department-item" v-for="(v, idx) in awardsList" :key="idx">
        <view class="department-data d-b-c">
          <view v-if="v.placeDept >= 4">
            {{ v.placeDept }}<span v-if="languages === 'en-US'">th</span>
            {{ "" }} {{ $t("fn_011") }}:
          </view>
          <view v-else> {{ v.placeDept }}{{ $t("fn_011") }}: </view>
          <!-- <view class="">{{ $t('fn_010') }}{{ v.placeDept }}{{ $t('fn_011') }}：</view> -->
          <view class="gray9">{{ v.pkTransactionVal }}</view>
        </view>
        <view class="department-progress d-b-c mb10">
          <view class="progress-bg flex-1">
            <view
              class="progress-active"
              :style="{
                width: `${
                  v.asumRealPv > '0.00'
                    ? GetPercent(v.asumRealPv, v.targetPv) >= 100
                      ? '100%'
                      : GetPercent(v.asumRealPv, v.targetPv) + '%'
                    : '0%'
                }`,
              }"
            >
              <image
                class="progress-active-img"
                src="/static/icon/award-slider.png"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
        <view class="d-b-c">
          <view class="department-data">
            {{ getsum(v.asumRealPv) }}
            {{ $t(v.asumRealPv >= 1000 ? "fn_312" : "fn_136") }}
          </view>
          <view class="gray9">{{ v.targetPv }}</view>
        </view>
      </view>
    </view>

    <view class="total-wrap">
      <view class="top-tabbar-box">
        <!-- <template v-for="(v, idx) in labelList">
					<view class="tab-item" :key="idx" :class="{ active: placeDept == idx + 1 }" @click="stateFunc(idx + 1)">{{$t('fn_010')}}{{ idx + 1 }}{{$t('fn_011')}}</view>
				</template> -->
        <u-tabs
          :list="labelList"
          @click="stateFunc"
          lineColor="#e85346"
        ></u-tabs>
      </view>

      <view class="user-list">
        <view class="user-item" v-for="(v, idx) in awardsFiveList" :key="idx">
          <view class="d-b-c">
            <view class="d-c-s">
              <image
                class="user-avatar"
                v-if="v.memberPath"
                :src="v.memberPath"
                mode="widthFix"
              ></image>
              <image
                class="user-avatar"
                v-else
                src="/static/default.png"
                mode="widthFix"
              ></image>
              <view>
                <view class="user-level">NO.0{{ idx + 1 }}</view>
                <view class="user-name">{{ v.memberName }}</view>
              </view>
            </view>
            <view>
              <image
                :src="v.image"
                v-if="v.pkAwards != 1 && v.image"
                mode="widthFix"
              />
              <!-- <image src="/static/define-po.png" v-else mode="widthFix" /> -->
              <view class="user-position">{{ v.pkTransactionVal }}</view>
            </view>
          </view>

          <view class="mt40">
            <view
              v-for="(awardsFive, avindex) in v.awardsFiveList"
              :key="avindex"
              class="mb20"
            >
              <view class="d-s-c">
                <view class="f24 mr20 user-deplement" v-if="avindex + 1 >= 4">
                  {{ avindex + 1 }}<span v-if="languages === 'en-US'">th</span>
                  {{ "" }} {{ $t("fn_011") }}
                </view>
                <view class="f24 mr20 user-deplement" v-else>
                  {{ avindex + 1 }}{{ $t("fn_011") }}
                </view>
                <!-- <view class="f24 mr20 user-deplement">{{ $t('fn_010') }}{{ avindex + 1 }}{{ $t('fn_011') }}</view> -->
                <view class="department-progress flex-1">
                  <view class="progress-bg">
                    <view
                      class="progress-active"
                      :style="{
                        width: `${
                          awardsFive.asumRealPv > '0.00'
                            ? GetPercent(
                                awardsFive.asumRealPv,
                                awardsFive.targetPv
                              ) >= 100
                              ? '100%'
                              : GetPercent(
                                  awardsFive.asumRealPv,
                                  awardsFive.targetPv
                                ) + '%'
                            : '0%'
                        }`,
                      }"
                    >
                      <image
                        class="progress-active-img"
                        src="/static/icon/award-slider.png"
                        mode="widthFix"
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      memberAwardsUnderVO: "",
      awardsList: [],
      awardsFiveList: [],
      labelList: [],
      languages: "",
      placeDept: 1,
    };
  },
  onLoad() {
    // this.getMember();
    this.awardsIndex();
    this.getPlaceDept();
    this.languages = uni.getLocale();
  },
  methods: {
    getsum(num) {
      if (num >= 1000) {
        let result = Math.floor((num / 1000) * 100) / 100;
        return result.toFixed(2);
      } else {
        let result = Math.floor(num * 100) / 100;
        return result.toFixed(2);
      }
    },
    GetPercent(num, total) {
      /// <summary>
      /// 求百分比
      /// </summary>
      /// <param name="num">当前数</param>
      /// <param name="total">总数</param>

      num = parseFloat(num);
      total = parseFloat(total);
      // if(isNaN(total) >= isNaN(num)){
      //     return 100+'%'
      // }
      if (total < 0) {
        return 100 + "%";
      }
      if (isNaN(num) || isNaN(total)) {
        return "-";
      }
      return total <= 0 ? 0 : (num / total) * 100;
    },
    getMember() {
      // let self = this;
      // self._get('member/api/member/index-member-awards', {}, res => {
      // 	const { data } = res;
      // 	self.memberAwardsUnderVO = Object.assign({}, data);
      // });
    },
    awardsIndex() {
      let self = this;
      self._get("member/api/member/index-awards", {}, (res) => {
        const { data } = res;
        self.awardsList = res.data.memberAwardsList;
        self.memberAwardsUnderVO = res.data.memberAwardsUnderVO;
      });
    },
    getPlaceDept() {
      let self = this;
      self._get("member/api/member/place-dept", {}, (res) => {
        const { data } = res;
        self.labelList = data;
        self.labelList.forEach((item) => {
          if (item.placeDept >= 4 && this.languages === "en-US") {
            item.name = item.placeDept + "th" + " " + self.$t("fn_011");
          } else {
            item.name = item.placeDept + self.$t("fn_011");
          }
        });
        if (self.labelList && self.labelList.length > 0) {
          self.getAwardsList();
        }
      });
    },
    stateFunc(e) {
      let index = e.placeDept;
      console.log(index);
      if (index == this.placeDept) {
        return;
      }
      this.placeDept = index;
      this.getAwardsList();
    },
    getAwardsList() {
      let self = this;
      self._get(
        "member/api/member/index-awards-five",
        {
          placeDept: self.placeDept,
        },
        (res) => {
          res.data.forEach((v) => {
            let yuanAwardsFiveList = v.awardsFiveList || [];
            let awardsFiveLen =
              (v.awardsFiveList && v.awardsFiveList.length) || 0;
            let awardsFiveList = [];
            let minLen = 3;
            if (awardsFiveLen < minLen) {
              for (let i = 0; i < minLen - awardsFiveLen; i++) {
                awardsFiveList.push({});
              }
            }
            v.awardsFiveList = yuanAwardsFiveList.concat(awardsFiveList);
          });
          self.awardsFiveList = res.data;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  height: 287rpx;
  background: #e85346;
  color: #fff;
  padding: 0 40rpx;
  padding-top: 54rpx;
  box-sizing: border-box;
  .banner-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
    // padding: 56rpx 0;
  }
  .banner-logo {
    width: 72rpx;
    height: 66rpx;
    margin: 0 auto;
  }
  .banner-txt {
    font-size: 24rpx;
    margin-top: 12rpx;
  }
}

.department-wrap {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 28rpx 25rpx;
  position: relative;
  top: -90rpx;
  margin: 0 20rpx;
  .department-item {
    margin-bottom: 33rpx;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.department-progress {
  margin-top: 21rpx;
  .progress-bg {
    height: 18rpx;
    background: #eeeeee;
    border-radius: 9rpx;
    position: relative;
  }
  .progress-active {
    width: 20%;
    height: 100%;
    background: #fb3024;
    position: relative;
    border-radius: 9rpx;
    .progress-active-img {
      width: 79rpx;
      height: 62rpx;
      position: absolute;
      right: -21rpx;
      top: -23rpx;
    }
  }
}

.total-wrap {
  margin: 0 20rpx;
  margin-top: -25rpx;
  border-radius: 20rpx;
}
.total-wrap {
  background: #fff;
  padding: 0 20rpx;
}
.top-tabbar-box {
  height: 94rpx;
  border-bottom: 1px solid #eeeeee;
  padding: 0;
}
.top-tabbar {
  height: 94rpx;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 1px solid #eeeeee;
  padding: 0;
}
.tab-item {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 42rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: 10rpx;
    width: 30%;
    height: 5rpx;
    background: #fb3024;
    opacity: 0;
  }
}

.tab-item.active {
  &::after {
    opacity: 1;
  }
}
.user-list {
  padding: 20rpx 0;
}
.user-item {
  background: #f2f2f2;
  padding: 30rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  .user-avatar {
    width: 75rpx;
    height: 75rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  .user-level {
    font-weight: bold;
    color: #fb3024;
    font-size: 20rpx;
  }
  .user-name {
    font-size: 28rpx;
    color: #030219;
  }
  .user-level-img {
    width: 65rpx;
    height: 60rpx;
    margin: 0 auto;
  }
  .user-position {
    font-size: 20rpx;
    color: #666666;
    margin-top: 9rpx;
  }
  .user-deplement {
    position: relative;
    top: 6rpx;
  }
}
</style>
