<template>
    <view>
        <view class="myqr" v-if="myqr_show">
            <view>
                <image class="cancel" src="/static/static/images/cancel.png" @touchstart="qrtouchstart"></image>
            </view>
            <view>
                <image class="img" :src="myqr_url" mode="widthFix" />
            </view>
            <view>
                <image class="btn" @tap="goSaveQrcode" src="/static/static/images/right.png" />
            </view>
        </view>

        <view class="container" :style="'filter:blur(' + myqr_blur + 'rpx)'">
            <view class="user">
                <!-- <image class='profile-info-backimg' src='/static/images/planet.png'/> -->

                <image class="profile-info-backimg" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/planet.jpg" mode="aspectFit" />
                <view class="profile">
                    <view class="profile-info">
                        <!-- bindtap="goLogin" -->
                        <view class="qr">
                            <image v-if="hasLogin" src="/static/static/images/qrcode.png" @tap="goCreateQrcode"></image>
                        </view>

                        <!-- <view class="info"> 
			<text class="level">行星级</text>
			<van-icon class="icon" name="question" />  
		</view>   -->

                        <!--<view class="stars">
			<text class="star">1/16</text>
			<van-icon class="icon" name="star" />
		</view>

		<view class="process">
      <progress percent="50" class="process" activeColor="white" backgroundColor="#808080" stroke-width="8rpx"></progress>
     <text class="cert">再积10★可获取好礼</text>
		 </view> -->
                    </view>

                    <view class="user_area">
                        <!--<view class='user_column'>
			<view class='user_column_item'>
				<view class="user_column_item_value">{{detail.total}}</view>
				<view class='user_column_item_text'>累计奖励</view>
			</view>

			<view class='user_column_item'>
				<view class="user_column_item_value">{{detail.canout}}</view>
				<view class='user_column_item_text'>可提现金额</view>
			</view>

			<view class='user_column_item'>
				<view class="user_column_item_value">{{detail.cashout}}</view>
				<view class='user_column_item_text'>已提现</view>
			</view>

			<view class='user_column_item'>
				<view class="user_column_item_value">{{detail.frozen}}</view>
				<view class='user_column_item_text'>冻结金额</view>
			</view>
		</view>-->
                    </view>
                </view>
            </view>

            <!-- <view class='separate'></view> -->

            <view class="user_tool">
                <!-- <view class='user_tool_row'>
			<view class='user_tool_row_title'>推广业绩</view>
		</view>  -->
                <view class="user_tool_column">
                    <!--<view class='user_tool_column_item' bindtap='goCashout'>
				<image class='user_tool_column_item_image' src='/static/images/money2.png'></image>
				<view class='user_tool_column_item_text'>提现申请</view>
			</view>-->
                    <view class="user_tool_column_item" @tap="goChild">
                        <image class="user_tool_column_item_image" src="/static/static/images/partner-01.png"></image>
                        <view class="user_tool_column_item_text">我的用户</view>
                    </view>
                    <view class="user_tool_column_item" @tap="goDetail">
                        <image class="user_tool_column_item_image" src="/static/static/images/partner-02.png"></image>
                        <view class="user_tool_column_item_text">下级订单</view>
                    </view>
                    <view class="user_tool_column_item" @tap="goFootprint">
                        <image class="user_tool_column_item_image" src="/static/static/images/partner-03.png"></image>
                        <view class="user_tool_column_item_text">分享记录</view>
                    </view>
                </view>
            </view>

            <view class="user_tool">
                <!-- <view class='user_tool_row'>
			<view class='user_tool_row_title'>推广工具</view>
		</view>  -->
                <view class="user_tool_column">
                    <view class="user_tool_column_item" @tap="goCreateQrcode">
                        <image class="user_tool_column_item_image" src="/static/static/images/partner-04.png"></image>
                        <view class="user_tool_column_item_text">专属海报</view>
                    </view>
                    <view class="user_tool_column_item" @tap="">
                        <image class="user_tool_column_item_image" src="/static/static/images/partner-05.png"></image>
                        <view class="user_tool_column_item_text">素材中心</view>
                    </view>
                    <!--<view class='user_tool_column_item' bindtap=''>
				<image class='user_tool_column_item_image' src='/static/images/email.png'></image>
				<view class='user_tool_column_item_text'>邀请行星</view>
			</view> -->
                    <view class="user_tool_column_item">
                        <image class="user_tool_column_item_image"></image>
                        <view class="user_tool_column_item_text"></view>
                    </view>
                </view>
            </view>

            <!-- <view class="logout" wx:if="{{hasLogin}}" bindtap="exitLogin">退出登录</view> -->
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var user = require('../../../utils/user.js');
var WxParse = require('../../../lib/wxParse/wxParse.vue');
var app = getApp();
export default {
    data() {
        return {
            userInfo: {
                nickName: '点击登录',
                avatarUrl: '/static/images/my.png'
            },
            detail: [],
            hasLogin: false,
            myqr_show: false,
            //我的分享二维码
            myqr_url: null,
            myqr_blur: 0 //背景模糊值
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
    },
    onReady: function () {},
    onShow: function () {
        //获取用户的登录信息
        if (app.globalData.hasLogin) {
            let userInfo = uni.getStorageSync('userInfo');
            this.setData({
                userInfo: userInfo,
                hasLogin: true
            });
            let that = this;
            util.request(api.DisCommission).then(function (res) {
                //console.log(res);
                if (res.errno === 0) {
                    let data = res.data;
                    data.canout = data.total - data.cashout - data.checking;
                    data.canout = that.toFixed(data.canout);
                    that.setData({
                        detail: data
                    });
                }
            });
        }
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        toFixed: function (num) {
            return num.toFixed(2);
        },

        goChild() {
            if (this.hasLogin) {
                uni.navigateTo({
                    url: '/pages/ucenter/parter/child/index'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        goDetail() {
            if (this.hasLogin) {
                uni.navigateTo({
                    url: '/pages/ucenter/parter/detail/detail'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        goCashout() {
            if (this.hasLogin) {
                let m = this.detail.total - this.detail.cashout - this.detail.checking;
                uni.navigateTo({
                    url: '/pages/ucenter/parter/cashout/index?m=' + m
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        goCreateQrcode: function () {
            //二维码生成
            let that = this;
            util.request(
                api.QrStarCodeCreate,
                {
                    path: '/pages/index/index'
                },
                'POST'
            ).then(function (res) {
                //console.log(res);
                if (res.errno == 0) {
                    that.setData({
                        myqr_url: res.data.imgUrl,
                        myqr_show: true,
                        myqr_blur: 5
                    });
                }
            });
        },

        goSaveQrcode: function () {
            //保存二维码图片
            let that = this;
            console.info(that.myqr_url);
            uni.downloadFile({
                url: that.myqr_url,
                success: function (res) {
                    if (res.statusCode === 200) {
                        let img = res.tempFilePath;
                        uni.saveImageToPhotosAlbum({
                            filePath: img,
                            success(res) {
                                that.goCloseMyqr('个人专属二维码图片已保存到您的相册');
                            },
                            fail(res) {
                                that.goCloseMyqr('网络或授权问题 图片保存失败 请重试');
                            }
                        });
                    } else {
                        that.goCloseMyqr('网络或授权问题 图片保存失败 请重试');
                    }
                },
                fail(res) {
                    that.goCloseMyqr('网络或授权问题 图片保存失败 请重试');
                }
            });
        },

        goCloseMyqr: function (msg) {
            //关闭分享图片的弹层

            this.setData({
                myqr_blur: 0,
                myqr_show: false
            });
            if (msg) {
                uni.showToast({
                    title: msg,
                    icon: 'none',
                    duration: 3000
                });
            }
        },

        qrtouchstart: function () {
            this.setData({
                myqr_blur: 0,
                myqr_show: false
            });
        },

        goFootprint() {
            if (this.hasLogin) {
                uni.navigateTo({
                    url: '/pages/ucenter/footprint/footprint'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}

.myqr {
    position: absolute;
    z-index: 999;
    width: 100%;
    text-align: center;
    height: auto;
}
.myqr .cancel {
    width: 60rpx;
    height: 60rpx;
    margin-top: 30rpx;
    margin-left: 480rpx;
}
.myqr .img {
    width: 480rpx;
    /* margin-top: 150rpx;  */
}
.myqr .btn {
    width: 120rpx;
    height: 120rpx;
    line-height: 120rpx;
    margin-top: 40rpx;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 60rpx;
}

.container {
    background: #f4f4f4;
    height: auto;
    overflow: hidden;
    width: 100%;
}
.question {
    width: 20rpx;
    height: 20rpx;
    margin-top: 5rpx;
}
.user {
    height: 480rpx;
    padding: 15rpx;
    width: auto;
    display: relative;
    background-color: #ffffff;
}

.profile-info-backimg {
    height: 450rpx;
    width: 100%;
    z-index: -1;
    border-radius: 10rpx;
}
.profile {
    margin-top: -450rpx;
    z-index: 100;
}
.profile-info {
    color: #242a48;
    /*padding: 30rpx;*/
    font-size: 28rpx;
    display: block;
    margin-left: 30rpx;
    /*border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx; */
}
.profile-info .info {
    height: 85rpx;
    margin-top: -50rpx;
}
.profile-info .info .txt {
    flex: 3;
}
.profile-info .info .level {
    height: 30rpx;
    line-height: 30rpx;
    font-size: 30rpx;
    font-weight: 600;
    margin-top: 20rpx;
}
.profile-info .qr {
    margin-top: 10rxp;
}
.profile-info .qr image {
    width: 80rpx;
    height: 80rpx;
    margin-left: 600rpx;
}

.profile-info .stars {
    height: 55rpx;
}

.profile-info .stars .star {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 40rpx;
    font-weight: 600;
}

.profile-info .process {
    height: 25rpx;
    width: 250rpx;
}

.profile-info .process .cert {
    height: 20rpx;
    line-height: 20rpx;
    font-size: 20rpx;
}

.profile-info .name {
    display: block;
    height: 45rpx;
    line-height: 45rpx;
    font-size: 37.5rpx;
    margin-bottom: 10rpx;
}

.user_area {
    height: 130rpx;
    margin-top: 200rpx;
    z-index: 999;
}

.user_column {
    /* border: 1px solid black; */
    height: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user_column_item {
    width: 25%;
    height: 120rpx;
    text-align: center;
    position: relative;
    margin-top: 5rpx;
    /*
  background: #fff;
   border-right: 1rpx #e0e3da solid;*/
}

.user_column_item_image {
    width: 50rpx;
    height: 50rpx;
    margin-top: 30rpx;
}

.user_column_item_value {
    margin-top: 20rpx;
    font-size: 32rpx;
    font-weight: 600;
}

.user_column_item_text {
    /* border: 1px solid black; */
    margin-top: 10rpx;
    font-size: 26rpx;
    color: #555;
}

.user_tool {
    height: 180rpx;
    background: #fff;
    border-radius: 16rpx;
    margin: 20rpx;
    padding: 20rpx;
}
.user_tool_row {
    /* border: 1px solid black; 
  border-bottom: 1px solid #fafafa;*/
    height: 86rpx;
    line-height: 86rpx;
}
.user_tool_row_title {
    height: 86rpx;
    font-weight: 550;
    line-height: 86rpx;
    margin-left: 35rpx;
    font-size: 32rpx;
}

.user_tool_column {
    height: 140rpx;
    display: flex;
    justify-content: left;
    align-items: center;
}
.user_tool_column_left {
    float: left;
}

.user_tool_column_item {
    width: 25%;
    height: 100rpx;
    background: #fff;
    text-align: center;
    position: relative;
    margin-top: 5rpx;
}
.user_tool_column_item_text {
    /* border: 1px solid black; */
    margin-top: 8rpx;
    font-size: 26rpx;
    color: #000;
}

.user_tool_column_item_image {
    width: 50rpx;
    height: 50rpx;
    margin-top: 5rpx;
}

.separate {
    background: #e0e3da;
    width: 100%;
    height: 1rpx;
}

.user_column_item_phone {
    width: 30%;
    height: 140rpx;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    float: left;
    background: #fff;
    border-radius: 0;
}

.user_column_item_phone::after {
    border: none;
    border-radius: 0;
}

.logout {
    margin-top: 30rpx;
    height: 100rpx;
    width: 100%;
    line-height: 100rpx;
    text-align: center;
    background: #fff;
    color: red;
    font-size: 30rpx;
}
</style>
