<template>
    <div class="info-wrap">
        <el-card class="text-center">
            <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/user')">
            <img class="avator" :src="avatar">
            <div style="padding: 14px;">
                <span>{{UserInfoName || nickname}}</span>
            </div>
        </el-card>
        <ul class="list-group list-group-flush">
            <!-- v-on:click="item.canEdit && edit(item,key)" -->
            <li v-for="(item,key) in data"
                v-on:click="item.canEdit && edit(key)"
                class="list-group-item d-flex justify-content-between align-items-center">
                <label class="control-label">{{item.label}}</label>
                <div class="badge">
                    <span style="font-size: 1.3rem;font-weight: 500;color:#999999">{{item.value}}</span>
                    <span v-if="item.canEdit" class="ml-2"  style="background: white">
                        <img class="jiantou" src="../../assets/image/myarrow.png" alt="">
                    </span>
                    <span v-else="item.canEdit" class="ml-2"></span>
                </div>
            </li>
        </ul>

        <edit ref="refEdit"
            :keyVal="keyVal"
            :dialogVisible="dialogVisible"
            :keyData="keyData"
            @close="close"
            @getUserList="getUserList"></edit>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Http from "../../extend/Http";
    import Utils from "../../extend/Utils";
    import wx from "weixin-jsapi";
    import router from "../../router";
import login from "@/store/module/login";
    import {Message} from "element-ui";
    // 组件
    import Edit from "./edit.vue";

    @Component({
        components: {Edit}
    })
    export default class UserIndex extends Vue {

        public data: any = {};

        public avatar: string = "";
        public nickname: string = "";
        public UserInfoName: string = "";
        public keyVal: String = "";
        public dialogVisible: Boolean = false;
        public keyData: Object = {};

        async created() {
            let res = await Http.getInstance().userinfo();
            // this.data.inviter_code = {
            //     label: "邀请码", value: res.data.inviter_code, canEdit: false
            // };
            this.data.realname = {
                label: "真实姓名", value: res.data.realname, canEdit: true
            };
            this.data.gender = {
                label: "用户性别", value: res.data.gender == 1 ? "男" : "女", canEdit: true
            };
            this.data.city = {
                // label: "代缴城市", value: '北京'
                label: "代缴城市", value: res.data.city_name, canEdit: true
            };
            this.data.social_type = {
                label: "社保户别", value: res.data.social_name,
                canEdit: true
            };
            this.data.id_card = {
                label: "身份证号", value: res.data.id_card, canEdit: true
            };
            this.data.mobile = {
                label: "手机号码", value: res.data.mobile, canEdit: true
            };
            this.data.email = {
                label: "用户邮箱", value: res.data.email, canEdit: true
            };

            this.data.addr = {
                label: "联系地址", value: res.data.addr, canEdit: true
            };
            this.UserInfoName = this.data.realname.value;
            this.avatar = res.data.avatar;
            this.nickname = res.data.nickname;
            localStorage.setItem("avatar", res.data.avatar);
            localStorage.setItem("nickname", res.data.nickname);
            localStorage.setItem("realname", res.data.realname);
            localStorage.setItem("is_town", res.data.is_town);
            localStorage.setItem("id_card", res.data.id_card);
            this.ShowCity();
            this.showSocialType();
            this.wShowUserInfo();
            this.showIdCard()

        }

        mounted() {
        }
        public showUserInfo () {
            return this.data.realname.value == null || this.data.social_type.value == null || this.data.id_card.value == ''
        }

        wShowUserInfo() {
            let path = window.location.href
            console.log('this.showUserInfo()', this.showUserInfo());
            
            if (path.indexOf('/user/info') > -1  && this.showUserInfo()) {
                Message({
                    message: '真实姓名/社保户别/身份证号不能为空',
                    type: 'warning'
                });
            }
            
        }

        // 代缴城市不能修改
        ShowCity() {
            if (this.data.city.value) {
                console.log('城市', this.data.city);
                this.data.city.canEdit = false
            }
        }
        // 社保户别不能修改
        showSocialType() {
            if (this.data.social_type.value) {
                console.log('社保', this.data.social_type);
                this.data.social_type.canEdit = false
            }
        }

        // 判断是否有代缴完成订单
        async showIdCard() {
            // 获取代缴完成列表
            let res = await Http.getInstance().getOrderList({
                page: 1,
                status: 5
            });
            console.log('代缴完成', res.data.length);
            if (res.data.length > 0) {
                this.data.id_card.canEdit = false
            }
        }
        

        // edit(params: any, key: string) {
        //     router.push({
        //         name: "uedit", params: Object.assign(params, {key: key})
        //     });
            
        // }

        // 点击显示弹层
        edit(key: any) {
            // this.$refs.refEdit.dialogVisible = true
            this.dialogVisible = true
            console.log('key', key);
            
            this.keyVal = key
            this.keyData = this.data[key]
            console.log('keyData', this.data[key]);
            
            // this.$refs.refEdit.getCurEditItem(this.data[key])
        }

        private async wxInit() {
            let url = location.href.split("#")[0]; // 获取锚点之前的链接
            let links = "m.wercf.com";
            let title = "河马代缴";
            let desc = "了解更多知识，请关注“河马代缴”公众号";
            let imgUrl = "";
            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));
            });
        }
        // 关闭弹层
        close(event) {
            console.log('event', event);
            this.dialogVisible = event
        }

        // 子组件获取用户列表
        getUserList() {
            this.userList()
        }
        async userList() {
             let res = await Http.getInstance().userinfo();
             console.log('子组件', res);
             
            // this.data.inviter_code = {
            //     label: "邀请码", value: res.data.inviter_code, canEdit: false
            // };
            this.data.email.value = res.data.email
            this.data.realname.value = res.data.realname
            this.data.gender = {
                label: "用户性别", value: res.data.gender == 1 ? "男" : "女", canEdit: true
            };
            this.data.city.value = res.data.city_name
            this.data.social_type.value = res.data.social_name
            this.data.id_card.value = res.data.id_card
            this.data.mobile.value = res.data.mobile

            this.data.addr.value = res.data.addr
            this.UserInfoName = this.data.realname.value;
            this.avatar = res.data.avatar;
            this.nickname = res.data.nickname;
            localStorage.setItem("avatar", res.data.avatar);
            localStorage.setItem("nickname", res.data.nickname);
            localStorage.setItem("realname", res.data.realname);
            localStorage.setItem("is_town", res.data.is_town);
            localStorage.setItem("id_card", res.data.id_card);
            this.ShowCity();
            this.showSocialType();
            this.wShowUserInfo();
        }

    }
</script>

<style lang="scss" scoped>
    // 真实姓名
    .text-center span {
        font-size: 1.3rem;
    }
    // 去掉卡片阴影
    .el-card.is-always-shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .el-card {
        border: 0;
    }
    .leftIcon {
        width: 0.667rem;
        position: absolute;
        top: 4rem;
        left: 2rem;
    }
    .avator {
        width: 6rem;
        height: 6rem;
        border-radius: 3.5rem;
    }

    .list-group-item {
        border-color: #eee;
        padding-top: 1rem;
    }

    .list-group-item a {
        color: #212529;
    }
    .align-items-center{
        font-size: 1.3rem;
    }
    // 第一个最后一个li去掉边框
    .list-group-item:first-child {
        border: 0;
    }
    .list-group-item:last-child {
        border-bottom: 0;
    }

    .tuichu{

    }
    .jiantou{
        width: 0.5rem;
        vertical-align: middle;
        margin-top: -0.4rem;
    }
</style>
