<template>
    <view class="content">
          <page-head text="个人中心" brF="true"></page-head>
        <view class="centerTop">
            <view class="imgCon">
                <image class="img" :src="userInfo.headimgurl" mode="aspectFill"></image>
            </view>
            <view class="name">
                {{userInfo.nickname}}
            </view>
            <view class="Id" v-if="userInfo.vip_code">
                （尊贵会员：{{userInfo.vip_code}}）
            </view>
        </view>

        <view class="list">
            <navigator url="/pages/personalCenter/changeInformation" class="con">
                <view class="listName">
                    <image class="img" src="../../static/grzl.png" mode="widthFix"></image>
                    <view class="text">
                        个人资料
                    </view>
                </view>
                <view class="">
                    <image class="arrows" src="../../static/jt.png" mode=""></image>
                </view>
            </navigator>
            <view class="con">
                <view class="listName">
                    <image class="img" src="../../static/hy.png" mode="widthFix"></image>
                    <view class="text" v-if="!userInfo.vip_code" >
                        会员码输入
                    </view>
                    <view class="text" v-else>
                        会员码
                    </view>
                </view>
                <view class="hint"  v-if="!userInfo.vip_code"  @click="vipAoolyState()"> 
                    <view class="text">
                        输入会员码成为会员
                    </view>
                    <image class="arrows" src="../../static/jt.png" mode=""></image>
                </view>
                <view class="hint" v-if="userInfo.vip_code" >
                    <view class="text" v-if="userInfo.vip_code" >
                        {{userInfo.vip_code}}
                    </view>
                </view>
            </view>
            <view class="con" v-if="!userInfo.vip_code">
                <view class="listName">
                    <image class="img" src="../../static/sq.png" mode="widthFix"></image>
                    <view class="text">
                        会员申请
                    </view>
                </view>
                <view class="hint" @click="vipAooly()">
                    <view class="text">
                        申请成为会员可查看低价
                    </view>
                    <image class="arrows" src="../../static/jt.png" mode=""></image>
                </view>
            </view>
            <navigator url="../aboutUs/aboutUs" class="con">
                <view class="listName">
                    <image class="img" src="../../static/gy.png" mode="widthFix"></image>
                    <view class="text">
                        关于我们
                    </view>
                </view>
                <view class="">
                    <image class="arrows" src="../../static/jt.png" mode=""></image>
                </view>
            </navigator>
            <navigator url="../disclaimer/disclaimer"  class="con">
                <view class="listName">
                    <image class="img" src="../../static/nz.png" mode="widthFix"></image>
                    <view class="text">
                        免责声明
                    </view>
                </view>
                <view class="">
                    <image class="arrows" src="../../static/jt.png" mode=""></image>
                </view>
            </navigator>
        </view>
        <view class="make" v-if="memberState">
            <view class="member">
                <image class="memberGb" @click="canceVipState()" src="../../static/gb.png" mode=""></image>
                <view class="title">
                    会员码
                </view>

                <view class="name">
                    会员码
                </view>
                <input class="input" v-model="invitee_vip_code" placeholder="请输入6位会员邀请码" placeholder-class="inpal" type="text" value="" />

                <view class="button" @click="SubmitValidation()">
                    提交验证
                </view>
            </view>
        </view>
        <view class="make" v-if="memberStateApply">

            <view class="member">

                <image class="memberGb" @click="canceVip()" src="../../static/gb.png" mode=""></image>
                <view class="title">
                    会员申请
                </view>

                <view class="name">
                    姓名
                </view>
                <input class="input"  v-model="MembershipApplication.username" placeholder="请输入姓名" placeholder-class="inpal" type="text" value="" />
                <view class="name">
                    联系电话
                </view>
                <input class="input"   v-model="MembershipApplication.phone" placeholder="请输入联系电话" placeholder-class="inpal" type="text" value="" />

                <view class="name">
                    邀请人
                </view>
                <input class="input" v-model="MembershipApplication.invitee" placeholder="请输入邀请人姓名" placeholder-class="inpal" type="text" value="" />

                <view class="name">
                    推荐码
                </view>
                <input class="input" v-model="MembershipApplication.invitee_vip_code"  placeholder="请输入邀请人会员码" placeholder-class="inpal" type="text" value="" />

                <view class="button" @click="applyMembership()">
                    提交验证
                </view>
            </view>
        </view>

        <tab stateTab="center"></tab>
    </view>
</template>

<script>
    import tab from "../../component/tab.vue";
    export default {
        components: {
            tab
        },
        data() {
            return {
                memberState: false,
                memberStateApply: false,
                userData: {},
                userInfo:{},
                invitee_vip_code:"",
                MembershipApplication: {
                    username: "",
                    phone: "",
                    invitee: "",
                    invitee_vip_code: ""
                }

            }
        },
        created() {
            if (uni.getStorageSync('userData')) {
                this.userData = uni.getStorageSync('userData')
                if (uni.getStorageSync('userData').is_write_vip_code== 0) {
                    this.userData.is_write_vip_code=1
                    uni.setStorageSync('userData',this.userData);
                    this.memberState = true
                }
            } else {
                uni.redirectTo({
                    url: '/pages/index/login'
                });
            }
        },
        mounted() {

            console.log(uni.getStorageSync('userData'))
             this.getUserData()

        },
        methods: {
            getUserData(){
                this.requestToken({
                    url: this.host + "/api/user/info",
                    type: "post",
                    success: (res) => {
                        
                 this.userInfo = res.data.data
                 
                    }
                
                })
            },
            changeInformation(key, value) {
                this.makeState = false
                console.log(key, value)
                this.requestToken({
                    url: this.host + "/api/user/editInfo",
                    type: "post",
                    data: {
                        field: key,
                        value: value
                    },
                    success: (res) => {
                        this.getUserData()
                    }
            
                })
            
            },
            SubmitValidation(){
                if(this.invitee_vip_code){
                       this.memberState = false
                         this.changeInformation("vip_code",this.invitee_vip_code)
                         
                }else{
                    uni.showToast({
                    	title: '请填写会员码',
                        icon:"error",
                    	duration: 2000
                    });
                }
                
               
            },
            applyMembership(){
                
           
                if(!this.MembershipApplication.username){
                    uni.showToast({
                    	title: '请填写姓名',
                        icon:"error",
                    	duration: 2000
                    });
                    return
                }
                	var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;    //11位手机号码正则

                if( !reg_tel.test(this.MembershipApplication.phone)){
                    uni.showToast({
                    	title: '请正确填写手机号',
                             icon:"error",
                    	duration: 2000
                    });
                        return
                }
          
                this.requestToken({
                    url:this.host+"/api/user/apply-vip",
                    type:"post",
                    data:this.MembershipApplication,
                    success:(res)=>{
                        console.log(res)
                        uni.showToast({
                        	title: res.data.msg,
                                 icon:"success",
                        	duration: 2000
                        });
                            this.memberStateApply = false
                    }
                    
                })
            },
            vipAooly() {
                this.memberStateApply = true
            },
            canceVip() {
                this.memberStateApply = false
            },
            vipAoolyState() {
                this.memberState = true
            },
            canceVipState() {
                this.memberState = false
            },
            
        }
    }
</script>

<style>
    .centerTop {
        text-align: center;
        background-color: #FFFFFF;
        padding-top: 33rpx;
        padding-bottom: 44rpx;

    }

    .imgCon {
        width: 224rpx;
        height: 224rpx;
        border-radius: 50rpx;
        display: flex;

        align-items: center;
        justify-content: center;
        margin: auto;
        margin-bottom: 30rpx;
    }

    .imgCon .img {
        width: 100%;
        max-height: 100%;
        border-radius: 50rpx;
    }

    .name {
        color: #000000;
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 24rpx;

    }

    .Id {
        font-size: 24rpx;
        color: #d33333;
        font-weight: bold;
    }

    .list {
        margin-top: 13rpx;
        padding-bottom: 32rpx;
        background-color: #FFFFFF;
        padding: 40rpx 40rpx 40rpx;
    }

    .list .con {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24rpx;

        padding: 15rpx 0rpx;
    }

    .listName {
        display: flex;
        align-items: center;
    }

    .listName .img {
        width: 43rpx;
        margin-right: 15rpx;
    }

    .listName .text {
        font-size: 30rpx;
        font-weight: bold;
    }

    .arrows {
        width: 14rpx;
        height: 26rpx;
    }

    .hint {
        display: flex;
        align-items: center;

    }

    .hint .text {
        font-size: 24rpx;
        color: #8c8c9b;
        margin-right: 20rpx;
    }

    .make {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0rpx;
        top: 0rpx;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;


    }

    .member {
        width: 658rpx;
        height: auto;
        box-sizing: border-box;
        background-color: #FFFFFF;
        border-radius: 25rpx;
        position: relative;
        padding: 58rpx;
    }

    .memberGb {
        width: 77rpx;
        height: 77rpx;
        position: absolute;
        right: -38rpx;
        top: -38rpx;
    }

    .member .title {
        font-size: 30rpx;
        text-align: center;
        font-weight: bold;
    }

    .member .name {
        color: #999999;
        font-size: 30rpx;
        font-weight: 300;
        margin-top: 50rpx;
    }

    .member .input {
        border-bottom: 1px #e6e6e6 solid;
        padding: 0rpx 0rpx 20rpx 0rpx;
    }

    .inpal {
        color: #000000;
        font-size: 30rpx
    }

    .member .button {
        width: 559rpx;
        height: 98rpx;
        background-color: #D33333;
        text-align: center;
        line-height: 98rpx;
        border-radius: 25rpx;
        margin-top: 73rpx;
        color: #FFFFFF;
        font-weight: bold;
    }
</style>
