<template>
    <el-main>
        <div class="user-info">

            <el-upload
                    class="avatar-uploader"
                    :action="getuppicurl"
                    :show-file-list="false"
                    accept=".png , .jpg , .jpeg"
                    :headers="uploadconf.AuthHeaders"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

            <div class="name">
                <input v-model="userinfo.first_name" @focusout="update_name">
            </div>

            <div class="user_pro_tabs">

                <el-row :gutter="12" class="row">
                    <el-col :span="6" :offset="6">
                        <div class="col-4">
                            <a @click="$router.push({name:'FirUserProfileInfo'})" ref="userinfo" class="">
                        <span>
                            <i class="el-icon-user"></i>
                        </span>
                                个人资料
                            </a>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="col-4">
                            <a ref="changepwd" class="" @click="$router.push({name:'FirUserProfileChangePwd'})">
                                <span><i class="el-icon-lock"></i></span>
                                修改密码
                            </a>
                        </div>

                    </el-col>

                </el-row>

            </div>
            <div style="margin-top: 50px">
                <router-view></router-view>
            </div>

        </div>

    </el-main>
</template>

<script>
    import { userinfos,getuserpicurl} from '../restful';

    export default {
        name: "FirUserProfile",
        data() {
            return {
                imageUrl: '',
                userinfo:{},
                uploadconf:{},
            }
        },
        methods: {
            updateUserInfo(datainfo){
                userinfos(data=>{
                    if(data.code === 1000){
                        this.userinfo = data.data;
                        this.$store.dispatch("getUser",data.data);
                        this.$store.dispatch('doucurrentapp', {});
                        this.imageUrl = data.data.head_img;

                        if(datainfo.data){
                            this.$message.success("更新成功")
                        }
                    }else {
                        this.$message.error("更新失败")

                    }
                },datainfo)
            },
            update_name(){
                this.updateUserInfo({"methods":'PUT','data':{"first_name":this.userinfo.first_name}});

            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.$message({
                    message: '应用图标上传成功',
                    type: 'success'
                });
                this.updateUserInfo({"methods":false});

            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if(file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/jpg'){
                    if (isLt2M) {
                        return true;
                    }
                    else{
                        this.$message.error('上传头像图片大小不能超过 2MB!');

                    }
                }else {
                        this.$message.error('上传头像图片只能是 JPG/PNG/JPEG 格式!');

                }
                return false;

            },
            autoSetInfoIndex() {
                if (this.$store.state.userInfoIndex === 0) {
                    this.$refs.userinfo.classList.add('active');
                    this.$refs.changepwd.classList.remove('active');
                } else if (this.$store.state.userInfoIndex === 1) {
                    this.$refs.changepwd.classList.add('active');
                    this.$refs.userinfo.classList.remove('active');
                }
            }
        }, mounted() {
            this.autoSetInfoIndex();
            this.updateUserInfo({"methods":false});
            this.uploadconf = {
                "AuthHeaders": {"Authorization": this.$cookies.get("auth_token")}
            };

        }, watch: {
            '$store.state.userInfoIndex': function () {
                this.autoSetInfoIndex();
            },
        },filters:{

        },computed:{
            getuppicurl(){
                return getuserpicurl()
            }
        }
    }
</script>

<style scoped>
    .el-main {
        margin: 10px auto 100px;
        width: 1166px;
        position: relative;
        padding-bottom: 1px;
        background-color: #bfe7f9;
        color: #9b9b9b;
        -webkit-font-smoothing: antialiased;
        border-radius: 1%;
    }

    .user-info {
        position: relative;
        text-align: center;
        margin-bottom: 60px;
        margin-top: 46px;
    }

    .avatar {
        height: 100px;
        width: 100px;
        border-radius: 50%;
        display: block;
    }

    .name {
        text-align: center;
        padding-bottom: 20px;

    }

    .name input {
        text-align: center;
        color: #889eff;
        margin: 36px auto 0;
        width: 280px;
        padding: 0;
        border: none;
        background-color: transparent;
        font-size: 30px;
    }

    .user_pro_tabs a {
        width: 100%;
        font-size: 16px;
        text-align: center;
        display: inline-block;
        line-height: 48px;
        height: 48px;
        border-bottom: 1px solid #BABFC3;
        text-decoration: none;
        color: #BABFC3;

    }

    .user_pro_tabs a > span {
        margin-right: 16px;
        vertical-align: middle
    }

    .user_pro_tabs a.active {
        color: #e2644c;
        border-bottom-color: #e2644c
    }


</style>
