<template>
  <view class="page-container">
	  <view class="exchange-header-bg">
	  		<view class="header-bg-upper"></view>
	  </view>
	  <view class="status-bar"></view>
	  <view class="page-header">推广中心</view>
	<!-- /pages/user/share -->
    <navigator url="" open-type="switchTab" hover-class="none" class="user-info">
      <!-- <image src="/static/images/share-user-bg.png" class="user-info-bg" /> -->
      <view class="align-center">
        <image :src="user.user_portrait || '/static/avatar/noavatar.png'" mode="aspectFill" class="user-avatar" />
        <view class="user-info-box">
			
			<navigator url="/pages/user/share-record" class="user-info-btn">我的推广</navigator>
          <view class="user-name align-center">
             <text class="name">{{user.user_nick_name || user.user_name}}</text>
           <!-- <image v-if="user.user_vip === 1" src="/static/icon/icon-vip.png" class="icon-grade" />
            <template v-else-if="user.group_id">
              <image src="/static/icon/icon-grade.png" class="icon-grade" />
              <text class="grade">{{user.group_id || 0}}</text>
            </template> -->
          </view>
          <view v-if="user.user_invite_code" class="user-extend">邀请码:{{user.user_invite_code}}</view>
          <progress v-if="user.user_invite_num >= 0" :percent="user.user_invite_progress" stroke-width="4" backgroundColor="#dbdbdb" activeColor="#09a96a" class="share-progress progress" />
          <view v-if="user.group" class="user-grade-num justify-between">
            <text>{{user.group.group_name}}</text>
            <text>{{group[user.group_id+1] ? group[user.group_id+1].group_name : ''}}</text>
          </view>
        </view>
        <!-- <image src="/static/images/share-code.png" class="share-code" /> -->
      </view>
    </navigator>
    <view class="user-upgrade">
		<view class="user-upgrade-header">
			<image src="/static/images/upgrade-bg.png"   />
		</view>
      <view class="user-upgrade-box">
        <view class="upgrade-item align-center">
		  <view class="upgrade-icon align-center">
			  <text class="upgrade-name">游客</text>
		  </view>
          
          <view class="upgrade-info">
            <view class="upgrade-info-text">享受日看片数<text>{{guest.points}}</text>次，下载次数<text>{{guest.down_points}}</text>次</view>
          </view>
        </view>
        <view v-for="(item, index) in group" :key="index" class="upgrade-item align-center">
		  <view class="upgrade-icon align-center">
		  	 <text class="upgrade-name">VIP{{index}}</text>
		  </view>
          <!-- <text class="upgrade-name">{{item.group_name}}</text> -->
          <view class="upgrade-info">
            <view v-if="item.group_number" class="upgrade-info-title">推广{{item.group_number}}人</view>
            <view class="upgrade-info-text">享受日看片数<text>{{item.group_points}}</text>次，下载次数<text>{{item.group_down_points}}</text>次</view>
          </view>
        </view>
        <view class="upgrade-item align-center">
          <view class="upgrade-icon align-center">
          	 <text class="upgrade-name">皇冠</text>
          </view>
          <view class="upgrade-info">
            <view class="upgrade-info-text">尊享无限观影次数和无限下载次数</view>
          </view>
        </view>
      </view>
    </view>
    <navigator url="/pages/user/share" class="share-button">
      立即推广
    </navigator>
  </view>
</template>

<script>
import { user } from '@/utils/api'

export default {
  data() {
    return {
      user: {},
      group: {},
      guest: {
        points: 0,
        down_points: 0
      }
    }
  },
  onNavigationBarButtonTap() {
    uni.navigateTo({
      url: '/pages/user/share-record'
    })
  },
  async onLoad() {
    await this.$onLaunched
    const token = getApp().globalData.userToken
    if (!token) {
      uni.redirectTo({
        url: '/pages/user/login'
      })
    } else {
      this.getInfo()
    }
  },
  methods: {
	  goto(){
		uni.navigateTo({
		  url: ''
		})  
	  },
    getInfo() {
      user.shareInfo().then(res => {
        if (res.code == 1) {
          this.user = res.data.user
          this.group = res.data.group
          this.guest = res.data.guest
          if (this.user.user_invite_num > 0) {
            if (this.user.group_id === 1) {
              this.user.user_invite_progress = Math.ceil(this.user.user_invite_num / this.user.group.group_number * 100)
            } else if (this.group[this.user.group_id+1]) {
              const finish_num = this.group[this.user.group_id-1].group_number
              this.user.user_invite_progress = Math.ceil((this.user.user_invite_num - finish_num) / (this.user.group.group_number - finish_num) * 100)
            } else {
              this.user.user_invite_progress = 100
            }
          } else {
            this.user.user_invite_progress = 0
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.page-container {
  background-color: $uni-bg-color;
  position: relative;
  .page-header {
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    font-weight: 700;
	color: #FFF;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .exchange-header-bg {
  	width: 100%;
  	text-align: right;
  	background: linear-gradient(90deg, #F99248 0%, #DA2538 100%);
	position: absolute;
  	left: 0;
  	top: 0;
  	height: 347px;
  	
  }
  
  .user-info {
    margin: 0 15px;
    position: relative;
	color: #FFF;
    .user-info-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    > .align-center {
      padding: 15px;
      position: relative;
      z-index: 1;
      .user-avatar {
        width: 60px;
        height: 60px;
        margin-right: 15px;
        border-radius: 50%;
      }
      .user-info-box {
        flex: 1 1 0%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
		.user-info-btn{
			padding:5px 10px;
			background: #FFFFFF;
			position: absolute;
			right: -15px;
			
			color: #FB5965;
			font-size: 13px;
			border-bottom-left-radius: 13px;
			border-top-left-radius: 13px;
		}
        .user-name {
          .name {
            max-width: 100%;
            margin-right: 10px;
            color: #ffffff;
            font-size: 17px;
            font-weight: 700;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .icon-grade {
            width: 16px;
            height: 15px;
          }
          .grade {
            color: #fb5b14;
            font-size: 10px;
            font-weight: 700;
            line-height: 10px;
            margin-top: 7px;
            margin-left: -4px;
          }
        }
        .user-extend {
          margin-top: 2px;
          color: #ffffff;
          font-size: 11px;
        }
        .share-progress {
          margin-top: 8px;
        }
        .user-grade-num {
          margin-top: 2px;
          font-size: 11px;
          font-weight: 400;
          color: #ffffff;
        }
      }
      .share-code {
        width: 60px;
        height: 60px;
        margin-left: 15px;
      }
    }
  }
  .user-upgrade {
    margin: 15px 15px 0;
	position: relative;
    border-radius: 8px;
    overflow: hidden;
    .user-upgrade-header {
		text-align: center;
      width: 100%;
	  // max-width: 330px;
	  padding: 7px 10px;
	  margin: 0 auto;
	  background: linear-gradient(116deg, #F8ECD7 0%, #F2D3B3 100%);
      display: block;
	  border-top-left-radius: 10px;
	  border-top-right-radius: 10px;
	  uni-image{
		  width: 220px;
		  height: 34px;
	  }
    }
    .user-upgrade-box {
      // margin: 0px 15px 10px 15px;
      padding: 0 15px;
      background-color: #fff;
	  border-bottom-left-radius: 10px;
	  border-bottom-right-radius: 10px;
      .upgrade-item {
        padding: 15px 0;
        font-size: 14px;
        font-weight: 500;
        color: #1a1a2a;
        border-bottom: 1px solid #e8eefb;
        &:last-child {
          border: none;
        }
        .upgrade-icon {
          width: 36px;
          height: 36px;
          margin-right: 10px;
		  background: #F6D398 linear-gradient(151deg, #FFE9BA 0%, #DFB164 100%);
		  border-radius: 50%;
		  display: flex;
		  
        }
        .upgrade-name {
		  margin: auto;
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #8D6323;
          line-height: 17px;
        }
        .upgrade-info {
          margin-left: 10px;
          .upgrade-info-text {
            margin-top: 2px;
            font-size: 12px;
            font-weight: 400;
            color: #8b8b96;
            uni-text {
              color: #fc9155;
            }
          }
        }
      }
    }
  }
  .share-button {
    margin: 30px 15px 0;
    height: 44px;
    line-height: 44px;
    background-color: $uni-color-primary;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    text-align: center;
  }
}
</style>