<template>
	<view class="page-content">
    <!--主要内容-->
    <view class="main-content">
      <!--顶部内容-->
      <view class="top">
        <view class="left">
          <view class="title">领取奖励</view>
          <view class="sub-title">领取你的<text class="sub-text">专属</text>奖励</view>
        </view>
        <image class="top-img" :src="use_invite_top_icon" mode="heightFix"></image>
      </view>
      <!--具体内容-->
      <view class="main-box">
        <!--邀请人信息-->
        <view class="invite" v-if="info.activateUser">
          <view class="title">我的邀请人</view>
          <view class="user">
            <image class="avatar" :src="info.activateUser.avatar"></image>
            <view class="nickname">{{ info.activateUser.nickname || '' }}</view>
            <view class="user-id">ID:{{ info.activateUser.uid }}</view>
          </view>
        </view>
        <!--奖励列表-->
        <view class="give-content" v-if="svip_info">
          <view class="title">领取奖励</view>
          <view class="give-list">
            <view class="give-item" v-if="svip_info.vegetable_quota > 0">
              <view class="left">
                <image class="top-img" :src="use_invite_1" mode="heightFix"></image>
                <view class="give-title">菜卡额度</view>
              </view>
              <view class="right">{{ svip_info.vegetable_quota }}</view>
            </view>
            <view class="give-item" v-if="svip_info.quota > 0">
              <view class="left">
                <image class="top-img" :src="use_invite_2" mode="heightFix"></image>
                <view class="give-title">酒卡额度</view>
              </view>
              <view class="right">{{ svip_info.quota }}</view>
            </view>
            <view class="give-item" v-if="Object.values(svip_info.coupon || {}).length > 0">
              <view class="left">
                <image class="top-img" :src="use_invite_3" mode="heightFix"></image>
                <view class="give-title">会员礼包</view>
              </view>
              <view class="right">{{ Object.values(svip_info.coupon || {}).length }}</view>
            </view>
          </view>
        </view>
      </view>
      <!--领取按钮-->
      <view class="confirm-btn" @click="confirmGet">确认领取</view>
    </view>
    <!-- 授权登录 -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
  </view>
</template>

<script>
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import { HTTP_REQUEST_URL } from '@/config/app.js';
import { inviteCodeInfo,inviteCodeConfirmUse } from "@/api/user";

export default {
  name: 'business',
  components: {
    authorize,
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      code: '',
      info: {},
      svip_info: {},
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      // 图标
      use_invite_1: '',
      use_invite_2: '',
      use_invite_3: '',
      use_invite_top_icon: '',
    }
  },
  onReady() {
    this.use_invite_1 = `${HTTP_REQUEST_URL}/static/images/icon/use_invite_1.png`;
    this.use_invite_2 = `${HTTP_REQUEST_URL}/static/images/icon/use_invite_2.png`;
    this.use_invite_3 = `${HTTP_REQUEST_URL}/static/images/icon/use_invite_3.png`;
    this.use_invite_top_icon = `${HTTP_REQUEST_URL}/static/images/icon/use_invite_top_icon.png`;
  },
  onLoad(options) {
    this.code = options.code || '';
    // 判断：如果不存在邀请码  返回个人中心
    if(this.code.length <= 0){
      this.errorAndBack('无有效邀请码！');
      return false;
    }
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init();
    }
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      let _this = this;
      _this.getInviteCodeInfo();
    },
    // 错误提示 并且返回个人中心
    errorAndBack(tips){
      this.$util.Tips({
        title: tips,
      },{tab:1,url:'/pages/user/index'});
    },
    // 获取邀请码信息
    getInviteCodeInfo(){
      let _this = this;
      inviteCodeInfo({
        exchange_code: _this.code
      }).then(res => {
        if (res.status == 200) {
          let data = res.data || {};
          let status = Number(data.status);
          // 状态：0=未激活，1=已激活，2=已使用，3=作废
          switch (status){
            case 0:
              this.errorAndBack('邀请码未激活！');
              break;
            case 1:
              _this.info = data || {};
              _this.svip_info = data.svip_info || {};
              break;
            case 2:
              this.errorAndBack('邀请码已使用！');
              break;
            case 3:
              this.errorAndBack('邀请码已作废！');
              break;
            default:
              this.errorAndBack('无有效邀请码！');
          }
        }
      }).catch(err => {
        _this.$util.Tips({title: err});
      });
    },
    // 确认领取
    confirmGet(){
      let _this = this;
      inviteCodeConfirmUse({
        exchange_code: _this.code
      }).then(res => {
        if (res.status == 200) {
          uni.showModal({
            title: '领取成功',
            success: (res) => {
              uni.navigateTo({
                url: '/pages/annex/vip_center/index'
              });
            }
          });
        }
      }).catch(err => {
        _this.$util.Tips({title: err});
      });
    }


  }
}
</script>

<style scoped lang="scss">
.page-content{
  width: 100vw;
  min-height: 100vh;
  background-color: #f0f0f0;
  // 顶部信息
  .top{
    background: #c10100;
    width: 100%;
    height: 300rpx;
    border-bottom-left-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 60rpx 30rpx 60rpx;
    .left{
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: center;
      .title{
        font-size: 40rpx;
        font-weight: bold;
        color: #ffffff;
      }
      .sub-title{
        font-size: 26rpx;
        color: #fcfcfc;
        height: 50rpx;
        line-height: 60rpx;
        .sub-text{
          color: #f9e70b!important;
        }
      }
    }
    .top-img{
      height: 180rpx;
    }
  }
  // 具体内容
  .main-box{
    padding: 0 30rpx;
    position: relative;
    top: -75rpx;

    // 邀请人信息
    .invite{
      padding: 20rpx;
      background: #ffffff;
      border-radius: 15rpx;
      margin-bottom: 30rpx;
      .title{
        width: 100%;
        height: 70rpx;
        line-height: 50rpx;
        font-size: 30rpx;
        font-weight: bold;
      }
      .user{
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 20rpx;
        border-radius: 10rpx;
        background: #efbdbe;
        .avatar{
          width: 80rpx!important;
          height: 80rpx!important;
          border-radius: 50%;
          border: 3rpx solid #ffffff;
        }
        .nickname{
          width: calc(100% - (80rpx + 150rpx));
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-left: 20rpx;
          font-size: 28rpx;
          font-weight: bold;
        }
        .user-id{
          background: #c10100;
          color: #f8efee;
          height: 50rpx;
          line-height: 50rpx;
          border-radius: 10rpx;
          font-size: 26rpx;
          width: 150rpx;
          text-align: center;
        }
      }
    }
    // 奖励信息
    .give-content{
      padding: 20rpx;
      background: #ffffff;
      border-radius: 15rpx;
      .title{
        width: 100%;
        height: 70rpx;
        line-height: 50rpx;
        font-size: 30rpx;
        font-weight: bold;
      }
      .give-list{
        width: 100%;
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        .give-item{
          width: 100%;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          .left{
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            .top-img{
              width: 60rpx;
              height: 60rpx;
              border-radius: 50%;
            }
            .give-title{
              font-size: 28rpx;
              padding-left: 30rpx;
            }
          }
          .right{
            color: #c40000;
            width: 150rpx;
            text-align: right;
          }
        }
        .give-item:not(:last-child){
          margin-bottom: 30rpx;
        }
      }
    }
  }
  // 提交按钮
  .confirm-btn{
    width: calc(100% - (30rpx * 2));
    background: #c10100;
    color: #FFFFFF;
    border-radius: 15rpx;
    font-size: 30rpx;
    text-align: center;
    height: 70rpx;
    line-height: 70rpx;
    position: fixed;
    left: 20rpx;
    bottom: 150rpx;
  }
}
</style>
