<template>
  <view class="cashback">
    <template v-if="login">
      <view v-if="amountList.length >= 2" class="cashback-content">
        <view
          class="item"
          :style="{
            backgroundImage: `url(${amountList[0].pic})`
          }"
          @click="toCashBackDetail"
        >
          <text class="desc">{{ amountList[0].title || "" }}</text>
          <view class="amount">
            <text class="number">{{ amountList[0].amount || "" }}</text>
            <text class="word">元</text>
          </view>
        </view>
        <view
          class="item"
          :style="{
            backgroundImage: `url(${amountList[1].pic})`
          }"
          @click="toGiftCard"
        >
          <text class="desc">{{ amountList[1].title || "" }}</text>
          <view class="amount">
            <text class="number">{{ amountList[1].amount || "" }}</text>
            <view class="word">元</view>
          </view>
        </view>
      </view>
      <!-- 登录态，展示返现金额 -->
    </template>
    <template v-else>
      <!-- 非登录态，展示返现系数 -->
      <view v-if="Object.keys(ratioInfo).length" class="cashback-introduce">
        <view class="title">
          <text class="big">{{ ratioInfo.title }}</text>
          <text class="point">·</text>
          <text class="small">{{ ratioInfo.desc }}</text>
        </view>
        <view class="content">
          <view v-for="(item, index) in ratioInfo.levelRatioList" :key="index" class="item">
            <view class="icon">
              <image :src="item.levelPic" mode="widthFix" style="width: 100%; height: auto" />
            </view>
            <text class="name">{{ item.levelName }}</text>
            <circleProgress
              :x="item.colorFillRatio"
              :color="item.color"
              :percent="item.levelRatio"
            />
          </view>
        </view>
      </view>
    </template>
  </view>
</template>
<script>
import circleProgress from "./circleProgress.vue";
export default {
  components: {
    circleProgress
  },
  props: {
    login: {
      type: Boolean,
      default: false
    },
    amountList: {
      // 累积权益已省 & 礼品卡余额
      type: Array,
      default: () => []
    },
    levelGiftCardRatioModule: {
      // 支付返礼品卡系数
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ratioInfo: {}
    };
  },
  watch: {
    levelGiftCardRatioModule(val) {
      try {
        const obj = JSON.parse(JSON.stringify(val));
        const ratioList = [];
        for (let i = 0; i < obj.levelRatioList.length; i++) {
          obj.levelRatioList[i].color = `#${obj.levelRatioList[i].color}`;
          obj.levelRatioList[i].colorFillRatio = Math.floor(
            obj.levelRatioList[i].colorFillRatio * 100
          );
          ratioList.push(obj.levelRatioList[i]);
        }
        obj.levelRatioList = ratioList;
        this.ratioInfo = obj;
        console.log(obj);
      } catch (e) {
        this.ratioInfo = {};
      }
    }
  },
  methods: {
    toCashBackDetail() {
      uni.navigateTo({
        url: `/subPackages/common/member/detail`
      });
    },
    toGiftCard() {
      uni.navigateTo({
        url: "/pages/giftCardList/index"
      });
    }
  }
};
</script>
<style scoped lang="scss">
@import "@/style/var.scss";
.cashback {
  padding-top: 26rpx;
  background: $gray-1;
  display: flex;
  justify-content: center;
  // .
  &-introduce {
    width: 702rpx;
    padding: 24rpx;
    box-sizing: border-box;
    background: $white;
    border-radius: 24rpx;
    .title {
      display: flex;
      align-items: center;
      color: $black;
      .big {
        font-weight: $font-weight-bold;
        @include text-size(32);
      }
      .point {
        font-weight: $font-weight-bold;
        @include text-size(36);
        margin: 0 $padding-unit;
      }
      .small {
        @include text-size(24);
      }
    }
    .content {
      margin-top: $padding-xs;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 96rpx;
        // height: 180rpx;
        .icon {
          width: 52rpx;
          height: 52rpx;
        }
        .name {
          color: $black;
          @include text-size(24);
          margin-bottom: $padding-unit;
        }
      }
    }
  }
  &-content {
    width: 702rpx;
    padding: 24rpx;
    box-sizing: border-box;
    background: $white;
    border-radius: 24rpx;
    display: flex;
    justify-content: space-between;
    .item {
      width: 320rpx;
      height: 130rpx;
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .desc {
        @include text-size(24);
        color: $white;
        font-weight: $font-weight-bold;
      }
      .amount {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: baseline;
        margin-top: $padding-unit;
        padding: 0 $padding-xs;
        color: $white;
        text-shadow: 0 2rpx 4rpx rgba(205, 76, 14, 0.43);
        .number {
          // flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          @include text-size(36);
          font-weight: $font-weight-bold;
        }
        .word {
          flex-shrink: 0;
          @include text-size(22);
        }
      }
    }
  }
}
</style>
