<script src="../index/index.ts"></script>
<template>
    <div class="user-wrap">
        <div class="tuichu" @click="exit">
            <img src="../../assets/image/exit_03.png" alt="" >
            退出
        </div>
        <div class="jumbotron jumbotron-fluid">
            <div class="avator-top">
                <router-link   to="/user/info">
                   <img class="avator" :src="avatar">
                   <span class="nicheng">{{nickname}}</span><br>
                   <span class="phone">{{data.phone}}  </span>
                    <b class="bbb"><img src="../../assets/image/arrow_03.png" alt=""></b>
                </router-link>
<!--                <div class="canbao">-->
<!--                    已参保  到期时间2019-02-->
<!--                </div>-->
                <!--<div class="bottom clearfix">-->
                    <!--<el-button type="text" class="button">操作按钮</el-button>-->
                <!--</div>-->
            </div>
            <div class="avator-bottom">
               <div class="avator-bottom-one">
                   <p class="yue">余额: <span>{{data.balance}}</span></p>
                   <el-button class="liji" @click="open">立即提现</el-button>
               </div>
            </div>
        </div>
        <div class="info">
            <div class="list-group  ">
                <router-link class="list-group-item" to="/order/list">
                    我的订单
                </router-link>
                <router-link class="list-group-item" to="/user/discount">
                    我的优惠券
                </router-link>
                <router-link class="list-group-item text-center" to="/user/share">
                    邀请好友
                </router-link>
                <router-link class="list-group-item text-center" to="/user/inviter">
                    好友列表
                </router-link>
                <div class="list-group-item" to="" @click="opentwo">
                    联系客服
                </div>
            </div>
        </div>
        <div class="query bottom-user">
            <a class="col-6 text-center" href="http://fuwu.rsj.beijing.gov.cn/csibiz/indinfo/login.jsp">
                <img src="../../assets/image/ico_07.png" alt="">
            </a>
            <a class="col-6 text-center" href="https://grwsyw.gjj.beijing.gov.cn/ish/">
                <img src="../../assets/image/ico_08.png" alt="">
            </a>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Http from "../../extend/Http";
    import Utils from "../../extend/Utils";
    import wx from "weixin-jsapi";
    import router from '@/router';
    import {MessageBox} from 'element-ui';

    @Component({
        components: {}
    })
    export default class UserIndex extends Vue {
        public data: any = {
            phone:'',
            balance:'',
            appid:'wx98622dc60a8a6abb'
        };
        private avatar = localStorage.getItem("avatar");
        private nickname = localStorage.getItem("nickname");
        private citycode = localStorage.getItem("citycode");
        private cityname = localStorage.getItem("cityname");

        async created() {
            if(!localStorage.getItem('access_token')){
                router.replace('/login')
            }
            let res = await Http.getInstance().userinfo();
            this.avatar = res.data.avatar as string;
            this.nickname = res.data.realname as string;
            this.citycode = res.data.social_city  as string;
            this.cityname = res.data.city_name as string;
            this.data.phone = res.data.mobile
            this.data.balance = res.data.balance
            localStorage.setItem("avatar", this.avatar);
            localStorage.setItem("nickname", this.nickname);
            localStorage.setItem("citycode", this.citycode);
            localStorage.setItem("cityname", this.cityname);
            localStorage.setItem("social_type", res.data.social_type);
            localStorage.setItem("social_name", res.data.social_name);
            let isWeiXin = () => { return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1 }
            if (isWeiXin()) {
                console.log(res.data.openid)
                if(res.data.openid == null || res.data.openid.length == 0){
                    if(!localStorage.getItem('openid')){
                        let url = Utils.getInstance().getParams(location.href);
                        if(url.code){
                            let ress = await Http.getInstance().getWeixinpay({
                                code: url.code,
                            });
                            if(ress.data.openid){
                                let rer = await Http.getInstance().setUserOpenid({
                                    openid: ress.data.openid
                                });
                                localStorage.setItem("openid", ress.data.openid);
                            }
                        }else{
                            this.getcode();
                        }
                    }
                }else{
                    localStorage.setItem("openid", res.data.openid);
                }

            }
        }
        async getcode(){
            let redirectURI='https://hr.hemadj.com/user';
            window.location.replace(
                 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.data.appid + '&redirect_uri=' + redirectURI + '&response_type=code&scope=snsapi_base&state=WXPaySTATE#wechat_redirect'
            )
        }
        async exit(){
            let  storage = window.localStorage;
            storage.clear()
            this.$router.push('/login')
        }
        open() {
            // @ts-ignore
            this.$router.push('/user/Withdraw')
        }
        opentwo() {
            // @ts-ignore
            MessageBox.alert('<a href="tel:' + Http.PHONE + '">' + Http.PHONE + '</a><p>手机号同步微信</p>', '请联系客服', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: "拨打" ,
            }).then(action =>{
                window.location.href = 'tel://' +Http.PHONE;
            });
        }
        private async wxInit() {
            let url = location.href.split("#")[0] + '?inviter_code=' + localStorage.getItem('inviter_code'); // 获取锚点之前的链接
            let links = "m.wercf.com";
            let title = "河马代缴";
            let desc = "了解更多知识，请关注“河马代缴”公众号";
            let imgUrl = "https://hr.hemadj.com/favicon.ico";
            let res = await Http.getInstance().getConfig({
                platform: "weixin", url: url,
            });
            res.jsApiList = ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone"];
            wx.config(res);
            wx.ready(() => {
                wx.onMenuShareTimeline({
                    title: title, // 分享标题
                    link: links, // 分享链接
                    imgUrl: imgUrl, // 分享图标
                    success: () => {
                    }, cancel: () => {
                    }
                });
                // 微信分享菜单测试
                wx.onMenuShareAppMessage({
                    title: title, // 分享标题
                    link: links, // 分享链接
                    desc: title, // 分享链接
                    type: "", // 分享链接
                    dataUrl: "", imgUrl: imgUrl, // 分享图标
                    success: () => {
                    }, cancel: () => {
                    }
                });
                wx.onMenuShareQQ({
                    title: title, // 分享标题
                    link: links, // 分享链接
                    desc: title, // 分享链接
                    type: "", // 分享链接
                    dataUrl: "", imgUrl: imgUrl, // 分享图标
                    success: () => {
                    }, cancel: () => {
                    }
                });
                wx.onMenuShareWeibo({
                    title: title, // 分享标题
                    desc: desc, // 分享描述
                    link: links, // 分享链接
                    imgUrl: imgUrl, // 分享图标
                    success: () => {
                    }, cancel: () => {
                    }
                });
            });
            wx.error((err: any) => {
                alert(JSON.stringify(err));
            });
        }
    }
</script>

<style lang="scss" scoped>
    @import '@/assets/scss/variables.scss';
    .user-wrap {
        width: 100%;
        overflow-x: hidden;
        position: relative;
    }

    .jumbotron {
        text-align: left;
        background: #20b452;
        padding: 2rem 0 0;
    }
    .avator-top{
        position:relative ;
        padding-left: 1.5rem;
        .bbb{
            position: absolute;
            top: 3.7rem;
            right: 1.5rem;
            color: #ffffff;
            img{
                width: 0.7rem;
            }
        }
        .canbao{
            background: rgba(23,130,59,0.5);
            position: absolute;
            top: 6.5rem;
            right: 1.5rem;
            color: #ffffff;
            font-size: 1rem;
            text-align: center;
            padding: 0 1.2rem;
            border-radius: 1rem;

        }
    }


    .avator {
        width: 5rem;
        height: 5rem;
        border-radius: 6rem;
        margin-top: 1rem;
    }
    .nicheng{
        font-size: 1.6rem;
        padding-left: 1rem;
        color: white;
    }
    .phone{
        font-size: 1.4rem;
        position: absolute;
        top: 4rem;
        left: 7.5rem;
        color: white;
    }

    .info .list-group-item {
        margin: 0.6rem 1.25rem;
        font-size: 1.3rem;
        height: 5rem;
        line-height: 5rem;
        padding: 0;
        color: #ffffff;
        text-align: center;
        border-radius: 0.8rem;
    }

    .list-group-item {
        background: #20b452;
    }

    .list-group-item:last-child {
        background: $orange;
    }

    .invite {
        display: inline-block !important;
        line-height: normal;
    }

    .query img {
        width: 25%;
        margin-left: 12%;
        margin-top: 6%;
    }
    .bottom-user{
        margin-bottom: 6rem;
    }

    .list-group-flush {
        border-bottom: 0;
    }
    .tuichu{
        position: absolute;
        right: 1.5rem;
        top: 1rem;
        color: white;
        border: 1px solid white;
        border-radius: 20px;
        padding: 0.2rem 0.8rem;
        img{
            width: 1rem;
            vertical-align: middle;
        }
    }
    .avator-bottom{
        margin-top: 2.5rem;
        padding-left: 1.2rem;
        padding-top: 1.2rem;
        padding-bottom: 1px;
        background: #18a447;
    }
    .avator-bottom-one{
        display: flex;
        position: relative;
        height: 3.5rem;
        .yue{
            font-size: 1.4rem;
            color: #ffffff;
            position: absolute;
        }
        .tixian{
            position: absolute;
            right: 8rem;
            background: #108b39;
            color: #ffffff;
            border: none;
            margin-left: 8rem;
            height: 2rem;
            border-radius: 5rem;
        }
        .liji{
            position: absolute;
            right: 1.5rem;
           background: #ffffff;
            color: #18a447;
            border: none;
            height: 2rem;
            margin-left: 1.5rem;
            border-radius: 5rem;
            padding: 0 1.2rem;
        }

    }
    .p{
        font-size: 1rem;
        color: #ffffff;
    }

</style>

