<script src="../index/index.ts"></script>
<template>
    <div class="user-wrap">
        <div class="jumbotron jumbotron-fluid">
            <div class="avator-top">
                   <img class="avator" :src="avatar">
                   <!-- <span class="nicheng">{{nickname}}</span><br> -->
                   <span class="phone">{{data.phone}}  </span><br>
                   <span class="userInfo" @click="$router.push('/user/info')">
                       <img src="../../assets/image/userInfo@2x.png" class="userInfo_icon" alt="">
                        <span class="editInfo">编辑资料</span>
                   </span>
                    <b class="bbb" @click="$router.push('/user/info')"><img src="../../assets/image/arrow_03_2@2x.png" alt=""></b>
<!--                <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="invitation">
                <img src="../../assets/image/invitation@2x.png" alt="">
                <span>
                    邀请奖励： {{data.balance}}
                </span>
            </div> -->
            <van-cell-group >
                <van-cell title="个人信息" icon="user-o" is-link @click="$router.push('/user/info')" />
                <van-cell title="我的订单" icon="orders-o" is-link @click="$router.push('/order/list')" />
                <van-cell title="充值订单" icon="label-o" is-link @click="$router.push('/recharge/list')" />
                <van-cell title="我的优惠劵" icon="coupon-o" is-link  @click="$router.push('/user/discount')"/>
                <van-cell title="邀请好友" is-link icon="user-circle-o" @click="$router.push('/user/share')"></van-cell>
                <van-cell title="好友列表" icon="friends-o" is-link @click="$router.push('/user/inviter')" />
                <van-cell title="联系客服" icon="service-o" is-link @click="opentwo" />
                <van-cell title="退出登录" icon="setting-o" is-link @click="exit" />
            </van-cell-group>
        </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/shebao@2x.png" alt="">
            </a>
            <a class="col-6 text-center" href="https://grwsyw.gjj.beijing.gov.cn/ish/">
                <img src="../../assets/image/accumulation@2x.png" alt="">
            </a>
        </div> -->
        <div class="query bottom-user">
            <el-row :gutter="20">
                <el-col :span="12">
                    <a class="col-6  text-center " href="http://fuwu.rsj.beijing.gov.cn/csibiz/indinfo/login.jsp">
                        <img src="../../assets/image/shebao@2x.png" alt="">
                    </a>
                </el-col>
                <el-col :span="12">
                    <a class="col-6 text-center" href="https://grwsyw.gjj.beijing.gov.cn/ish/">
                        <img src="../../assets/image/accumulation@2x.png" alt="">
                    </a>
                </el-col>
            </el-row>
        </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';
    const userFriend = require("../../assets/image/use_friend@2x.png")

    @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(){
            // 询问
             MessageBox.alert('您确定要退出吗?', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                customClass: 'messageClass'
            }).then(() => {
                let  storage = window.localStorage;
                storage.clear()
                this.$router.push('/login')
            }).catch(() => {
                        
            });
        }
        // 提现功能-去掉
        // open() {
        //     // @ts-ignore
        //     this.$router.push('/user/Withdraw')
        // }
        opentwo() {
            // @ts-ignore
            // MessageBox.alert('<a  href="tel:' + Http.PHONE + '">' + Http.PHONE + '</a><p>手机号同步微信</p>', '请联系客服', {
            MessageBox.alert('<a style="color:#4FDCA2;font-size:20px;margin-left:75px" href="tel:' + Http.PHONE + '">' + Http.PHONE + '</a><p style="margin-left:77px;font-size:15px;margin-top:10px">(手机号同步微信)</p>', '请联系客服', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: "拨打" ,
                customClass: 'messageTel'
            }).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 {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        // position: relative;
        background-color: #edf0f5;
        overflow: auto;
    }

    .jumbotron {
        text-align: left;
        background: #fff;
        padding: 2rem 0 0;
        margin-bottom: 1.25rem;
    }
    .avator-top{
        position:relative ;
        padding-left: 1.5rem;
        padding-bottom: 3rem;
        .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.6rem;
        padding-left: 1rem;
        color: #666;
    }
    .userInfo{
        font-size: 1.4rem;
        position: absolute;
        top: 4rem;
        left: 7.5rem;
        color: white;
    }
    .userInfo_icon {
        display: inline-block;
        width: 1rem;
        height: 1rem;
    }
    .editInfo {
        display: inline-block;
        font-size: 1.25rem;
        padding-left: 1rem;
        color: #19BC53;
        vertical-align: middle;
    }

    .info {
        width: 100%;
        // height: 22.875rem;
        // background: red;
        margin: 0 auto;
        border-radius: 0.8rem;
        padding: 0 1.25rem;
    }

    // 邀请
    .invitation {
        width: 100%;
        height: 4.167rem;
        border-radius: 0.8rem;
        background-color: #fff;
        margin-bottom: 1rem;
        padding: 0.833rem 1.625rem;
        img {
            display: inline-block;
            width: 2.208rem;
            margin-right: 1.25rem;
        }
        span {
            vertical-align: middle;
        }
    }

    .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;
        border: 0;
    }

    .van-cell-group {
        border-radius: 0.8rem;
    }
    .van-cell:last-child {
        border-radius: 0 0 0.8rem 0.8rem;
    }
    .van-cell:first-child {
        border-radius: 0.8rem 0.8rem 0 0;
    }
    .van-cell__title {
        font-size: 1.417rem;
        color: #666;
    }
    .van-cell {
        padding: 15px 16px;
    }

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

    .query {
        // width: 100%;
        margin: 1.25rem 1.25rem;
        img {
            display: inline-block;
            width: 100%;
            height: 100%;
            // margin-left: 12%;
            // margin-top: 6%;
        }
        .col-6 {
            display: inline-block;
            width: 100%;
            height: 100%;
            padding-right: 0;
            padding-left: 0;
            max-width: 100%;
        }
    }
    
    .bottom-user{
        margin-bottom: 6rem;
    }
    .userBtn {
        display: inline-block;
        width: 7.625rem;
        height: 13.75rem;
        background-color:red;
        color: #666;
        font-size: 1.417rem;
        display: flex;
        flex-direction:column;
        align-items: center;
        img {
            display: inline-block;
            width: 2.083rem;
            height: 1.792rem;
        }
    }

    .list-group-flush {
        border-bottom: 0;
    }
    .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;
            font-size: 1.575rem;
            margin-left: 1.5rem;
            border-radius: 0.5rem;
            padding: 0 1.2rem;
        }

    }
    .p{
        font-size: 1rem;
        color: #ffffff;
    }
</style>
<style lang="scss">
    .messageTel,
    .messageClass {
        padding-bottom: 20px;
        border-radius: 10px;
        .el-message-box__header{
            text-align: center;
        }
        .el-button--primary {
            background-color: #4FDCA2;
            border-color: #4FDCA2;
        }
        .el-message-box__btns {
            text-align: center;
        }
        .el-message-box__title {
            font-size: 1.6rem;
        }
        .el-button--small {
            padding: 9px 45px;
            font-size: 1.2rem;
        }
    }
    .messageClass {
        .el-message-box__content {
            padding: 10px 66px;
            font-size: 1.2rem;
        }
    }
</style>
