<template>
  <view class="invite">
    <view class="invite-header-wrap">
      <view class="invite-header">
        <image
          src="@/assets/my/icon-help.png"
          class="invite-icon"
          @tap="$refs.popup_info.open()"
        ></image>
        <view class="invite-title">邀请好友累计获得</view>
        <view class="invite-number"
          >{{
            !info || !info.unit || info.unit === "￥" || info.unit === "元"
              ? "&yen;"
              : ""
          }}
          <text class="big">{{ info.total_price || 0 }}</text>
          {{
            info && info.unit && info.unit !== "￥" && info.unit !== "元"
              ? info.unit
              : ""
          }}</view
        >
        <button
          v-if="userInfo && userInfo.id"
          open-type="share"
          class="invite-button"
        >
          去邀请
        </button>
        <button v-else class="invite-button" @click="handleLogin">
          去邀请
        </button>
      </view>
    </view>
    <image class="invite-header-mask" src="@/assets/my/mask-gray.png"></image>
    <view class="invite-main">
      <view class="invite-labels">
        <view class="invite-label">
          <text class="invite-label-title">{{ info.count || 0 }}</text>
          <text class="invite-label-desc">邀请人数</text>
        </view>
        <view class="invite-label">
          <text class="invite-label-title"
            >{{ info.rate || 0 }}{{ info.rate_unit || "%" }}</text
          >
          <text class="invite-label-desc">奖励比例</text>
        </view>
      </view>
      <view class="invite-list">
        <text class="invite-list-title">邀请记录</text>
        <view class="invite-list-item">
          <view class="invite-list-name gray">用户</view>
          <view class="invite-list-price gray">奖励(金额)</view>
          <view class="invite-list-time gray">时间</view>
        </view>
        <template v-if="Array.isArray(info.records)">
          <view
            v-for="item in info.records"
            :key="item.id"
            class="invite-list-item"
          >
            <view class="invite-list-name">
              <image class="avatar" :src="item.img"></image>
              <text class="name">{{ item.name }}</text>
            </view>
            <view class="invite-list-price"
              >{{ item.price }}{{ item.unit }}</view
            >
            <view class="invite-list-time">{{ item.date }}</view>
          </view>
        </template>
      </view>
    </view>
    <uni-popup
      ref="popup_info"
      type="center"
      mask-background-color="rgba(0,0,0,0.8)"
      :is-mask-click="true"
    >
      <view class="popup-wrap">
        <view class="popup-content">
          <view class="h1"><text>邀请好友规则</text></view>
          <view class="p" v-html="info.rule || ''"></view>
        </view>
        <image
          class="popup_close"
          :src="require('@/assets/icon/icon-close.png')"
          @click="$refs.popup_info.close()"
        ></image>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import login from "@/lib/utils/login";
import api from "@/lib/api/api";
export default {
  name: "PageMyInvite",
  data() {
    return {
      userInfo: {},
      info: {},
    };
  },
  onShow() {
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
      this.initData();
    } else {
      this.userInfo = {};
    }
  },
  onShareAppMessage() {
    return {
      title: "@你，0元抽爆款+优惠券立减，快来和我一起抽福袋啦",
      imageUrl:
        "https://chujianchaowan.oss-cn-beijing.aliyuncs.com/images/0249cbaf35f9176ceb2a6ab5f8c30dd9.jpeg",
      path: "/pages/index/index?fuid=" + this.userInfo.id,
    };
  },
  onShareTimeline() {
    return {
      title: "@你，0元抽爆款+优惠券立减，快来和我一起抽福袋啦",
      imageUrl:
        "https://chujianchaowan.oss-cn-beijing.aliyuncs.com/images/0249cbaf35f9176ceb2a6ab5f8c30dd9.jpeg",
      path: "/pages/index/index?fuid=" + this.userInfo.id,
    };
  },
  methods: {
    handleLogin() {
      login.wxLogin((userInfo) => {
        this.userInfo = userInfo;
        uni.showToast({
          icon: "none",
          title: "登录成功",
          duration: 3000,
        });
      });
    },
    async initData() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      try {
        const data = await api.getFriendsList(this.userInfo.session);

        if (data.errno === 10000) {
          this.info = data.data;
        } else {
          throw new Error(data.errmsg);
        }
      } catch (e) {
        uni.showToast({
          icon: "none",
          title: e.message || "请求失败，请重试",
          duration: 2e3,
        });
      }
      uni.hideLoading();
    },
  },
};
</script>

<style lang="scss">
.invite {
  background: #f5f5f5;
  position: relative;
  min-height: 100vh;
  .invite-header-wrap {
    position: sticky;
    top: 0;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    padding: 58rpx 24rpx 0;
    z-index: 0;
    background: url(https://chujianchaowan.oss-cn-beijing.aliyuncs.com/images/2c14ce56792dc98f0e7e2fcf646eb127.png)
      no-repeat center top;
    background-size: cover;

    .bg {
      position: absolute;
      left: 0;
      top: -100rpx;
      width: 100%;
      pointer-events: none;
    }
    .invite-header {
      background: #ffffff;
      border-radius: 8rpx;
      padding: 24rpx 24rpx 34rpx;
      position: relative;
      text-align: center;
      font-weight: 500;
      color: #292d3b;
      .invite-icon {
        position: absolute;
        width: 36rpx;
        height: 36rpx;
        right: 24rpx;
        top: 24rpx;
        cursor: pointer;
      }
      .invite-title {
        font-size: 28rpx;
        line-height: 40rpx;
        margin-bottom: 24rpx;
      }
      .invite-number {
        font-size: 36rpx;
        line-height: 66rpx;
        .big {
          font-size: 48rpx;
          // font-family: unidreamledregular, Helvetica Neue, Helvetica, Arial,
          //   Hiragino Sans GB, Hiragino Sans GB W3, Microsoft YaHei UI,
          //   Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
        }
      }
      .invite-button {
        width: 100%;
        height: 96rpx;
        line-height: 96rpx;
        background: #08c2c3;
        border-radius: 0;
        margin-top: 24rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #292d3b;
        border-radius: 8rpx;
        &::after {
          display: none;
        }
      }
    }
  }
  .invite-header-mask {
    width: 100%;
    position: relative;
    margin-top: -29rpx;
    height: 39rpx;
    display: block;
    pointer-events: none;
  }
  .invite-main {
    background: #f5f5f5;
    position: relative;
    z-index: 10;
    padding: 14rpx 24rpx 24rpx;
  }
  .invite-labels {
    display: flex;
    background: #fff;
    font-weight: 500;
    text-align: center;
    padding: 32rpx 0;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    .invite-label {
      width: 50%;
      flex: 1;
      .invite-label-title {
        display: block;
        height: 66rpx;
        font-size: 48rpx;
        color: #292d3b;
        line-height: 66rpx;
      }
      .invite-label-desc {
        margin-top: 6rpx;
        height: 40rpx;
        font-size: 28rpx;
        color: #9496a5;
        line-height: 40rpx;
      }
    }
  }
  .invite-list {
    padding: 32rpx 24rpx;
    background: #fff;
    margin: 20rpx 0;
    text-align: center;
    font-weight: 500;
    color: #292d3b;
    border-radius: 8rpx;
    .invite-list-title {
      display: block;
      height: 44rpx;
      font-size: 32rpx;
      line-height: 44rpx;
      margin-bottom: 32rpx;
      color: #292d3b;
    }

    .invite-list-title + .invite-list-item {
      margin-bottom: 30rpx !important;
    }
    .invite-list-item {
      display: flex;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      margin-bottom: 40rpx;
      align-items: center;

      &:last-child {
        margin-bottom: 0;
      }
      .gray {
        color: #9496a5;
      }
      .invite-list-price {
        width: 20%;
      }
      .invite-list-name,
      .invite-list-time {
        width: 40%;
      }
      .avatar {
        width: 40rpx;
        height: 40rpx;
        display: block;
        margin-right: 6rpx;
        border-radius: 100%;
      }
      .invite-list-name {
        text-align: left;
        display: flex;
        align-items: center;
        .name {
          display: block;
          width: 0%;
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .invite-list-time {
        text-align: right;
      }
    }
  }
}
</style>
