<template>
  <div class="ttyf-conatainer">
    <img class="header-bg" src="./image/header@2x.png" alt="">
    <!--邀请记录-头像区-->
    <div class="invite-list">
      <div class="avatar-list">
        <ul>
          <!--头像-->
          <li v-for="(item, index) in recommendedUser.slice(0, 5)"
              :key="'a' + index">
            <div class="avatar">
              <img :src="item.userImgUrl" alt="">
            </div>
            <p class="name">{{ item.userName }}</p>
          </li>
          <!--占位: 最多显示5个头像-->
          <li v-for="i in (5 - recommendedUser.slice(0, 5).length)"
              :key="'b' + i">
            <div class="avatar">
              <img src="./image/bitmap@2x.png" alt="">
            </div>
          </li>
        </ul>
      </div>
      <a class="btn"
         href="javascript:;"
         @click="funShowDialog">去推荐</a>
      <p class="my-value">我的积分：{{ point }}</p>
    </div>
    <!--奖励说明-->
    <div class="award-explain">
      <img class="title"
           src="./image/jianglishuoming@2x.png"
           alt="">
      <p class="explain">每邀请1位好友成功放款15万及以上，得1个积分，最多可以累计5个积分</p>
      <p class="subtitle">
        <span class="circle"></span>
        <span>奖品兑换所需积分如下：</span>
      </p>
      <ul>
        <li v-for="(item, index) in rewardList"
            :key="index">
          <div class="gift-cover">
            <img :src="item.recommendRewardUrl"
                 alt="">
          </div>
          <p class="name">{{ item.recommendRewardName }}</p>
          <p class="number">{{ item.recommendRewardPoint }}个积分</p>
        </li>
      </ul>
      <a class="tel"
         :href="'tel:' + userInfo.privatePhone">
        <img src="./image/btn_phone@2x.png" alt="">
        <span>联系客服兑换奖励</span>
      </a>
    </div>
    <!--邀请记录-列表-->
    <div class="user-list"
         v-if="recommendedUser.length">
      <p class="title">邀请记录</p>
      <ul>
        <li v-for="(item, index) in recommendedUser"
            :key="index">
          <div class="left avatar">
            <img :src="item.userImgUrl" alt="">
          </div>
          <div class="right">
            <p class="top">
              <span>{{ item.userName }}</span>
              <span>申请贷款“{{ item.orderProduceName }}”</span>
            </p>
            <p class="bottom">{{ item.createdAt }}</p>
          </div>
          <p class="status">放款成功</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant'
import { getReward, getRecommendUser } from './api'

export default {
  name: 'index',
  data () {
    return {
      point: 0, // 用户积分
      rewardList: [], // 推荐奖品
      recommendedUser: [] // 推荐成功用户
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.loan.userInfo
    }
  },
  created () {
    this.fetchReward()
    this.fetchRecommendUser()
  },
  async mounted () {
    await this.$nextTick()
    this.$refreshTitle('推荐有礼')
  },
  methods: {
    funShowDialog () {
      Dialog.alert({
        message: '去贷款产品首页，选择产品并推荐',
        confirmButtonText: '前往',
        confirmButtonColor: '#333333',
        closeOnClickOverlay: true
      }).then(() => {
        this.$router.replace({ name: 'loanIndex' })
      })
    },
    // 推荐奖品
    fetchReward () {
      getReward().then(res => {
        if (res.status) {
          const { point, datas } = res.data
          this.point = point
          this.rewardList = datas
        } else {
          Toast(res.msg)
        }
      }).catch(err => {
        Toast(err)
      })
    },
    // 推荐成功用户
    fetchRecommendUser () {
      getRecommendUser().then(res => {
        if (res.status && Array.isArray(res.data)) {
          this.recommendedUser = res.data
        } else {
          Toast(res.msg)
        }
      }).catch(err => {
        Toast(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ttyf-conatainer {
  position: relative;
  left: 0;
  top: 0;
  padding: 493px 0 52px;
}

.header-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 885px;
}

.invite-list {
  position: relative;
  left: 0;
  top: 0;
  z-index: 1;

  .avatar-list {
    width: 330px;
    height: 236px;
    padding-top: 34px;
    margin: 0 auto;
    background: rgba(56, 22, 54, 0.1);
    border-radius: 16px;

    ul {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      width: 238px;
      margin: 0 auto;
    }

    li {
      margin-left: 35px;
      margin-top: 15px;

      &:nth-of-type(1),
      &:nth-of-type(2),
      &:nth-of-type(3) {
        margin-top: 0;
      }

      &:nth-of-type(1),
      &:nth-of-type(4) {
        margin-left: 0;
      }
    }

    .avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 1px solid #FFFFFF;
      overflow: hidden;

      img {
        display: block;
        width: 100%;
      }
    }

    .name {
      width: 100%;
      margin-top: 10px;
      font-size: 13px;
      color: #FFFFFF;
      line-height: 18px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .btn {
    display: block;
    width: 326px;
    height: 45px;
    margin: 13px auto 0;
    background: #FE9400;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
  }

  .my-value {
    width: 100%;
    margin-top: 10px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 22px;
    text-align: center;
  }
}

.award-explain {
  position: relative;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 351px;
  background: #FFFFFF;
  box-shadow: 0 1px 8px 0 rgba(209, 219, 236, 0.7);
  border-radius: 8px;
  padding-top: 18px;
  margin: 24px auto 0;

  .title {
    width: 125px;
    height: 22px;
  }

  .explain {
    width: 307px;
    height: 42px;
    margin-top: 13px;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 21px;
  }

  .subtitle {
    display: flex;
    align-items: center;
    width: 307px;
    margin-top: 23px;

    span:nth-of-type(1) {
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
      box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
    }

    span:nth-of-type(2) {
      width: 309px;
      height: 22px;
      margin-left: 5px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 22px;
    }
  }

  ul {
    display: flex;
    flex-flow: row wrap;
    width: 307px;
    margin-top: 11px;
  }

  li {
    padding-bottom: 16px;
    margin-left: 11px;

    &:nth-of-type(3n+1) {
      margin-left: 0;
    }
  }

  .gift-cover {
    width: 95px;
    height: 95px;
    background: #F3F3F3;
    border-radius: 4px;
    overflow: hidden;

    img {
      display: block;
      width: 100%;
    }
  }

  .name {
    width: 95px;
    margin-top: 8px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
    word-break: break-all;
  }

  .number {
    width: 100%;
    margin-top: 4px;
    font-size: 12px;
    color: #666666;
    line-height: 17px;
  }

  .tel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 63px;
    background: #F7F6F9;

    img {
      width: 40px;
      height: 40px;
    }

    span {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
    }
  }
}

.user-list {
  width: 351px;
  margin: 24px auto 0;

  .title {
    height: 22px;
    font-size: 16px;
    color: #666666;
    line-height: 22px;
  }

  ul {
    width: 351px;
    background: #FFFFFF;
    box-shadow: 0 1px 8px 0 rgba(209, 219, 236, 0.7);
    border-radius: 8px;
    margin-top: 15px;
  }

  li {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    padding: 18px 0 12px 12px;
  }

  .avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;

    img {
      display: block;
      width: 100%;
    }
  }

  .right {
    margin-left: 2px;
  }

  .top {
    display: flex;
    padding-left: 3px;
    max-width: 247px;

    span:nth-of-type(1) {
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      white-space: nowrap;
    }

    span:nth-of-type(2) {
      margin-left: 5px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
    }
  }

  .bottom {
    margin-top: 14px;
    font-size: 12px;
    color: #999999;
    line-height: 17px;
  }

  .status {
    position: absolute;
    right: 12px;
    top: 9px;
    z-index: 1;
    font-size: 14px;
    color: #2FA543;
    line-height: 20px;
  }
}
</style>
