<template>
    <div style="margin-left:30px;padding-bottom:50px">
        <div style="display:flex;align-items:center">   
            <div class="dvied"></div>
            <div style="font-weight: bold;color: #333333;font-size:18px;margin-left:10px">个人中心</div>
        </div>
        <div style="display:flex;width:80%">   
            <div class="userclass" style="border: 1px solid #DCDFE6;margin-top:30px">
                <div style="background:#f5f7fa;height:45px;color:#909399;line-height:45px;border-bottom:1px solid #DCDFE6;margin-bottom:30px">   
                    <p class="userclassp">个人资料</p>
                </div>
                <!-- <el-divider></el-divider> -->
                <div style="padding:0 20px;font-size:14px;margin-bottom:30px" class="baseinfo">
                    <div style="text-align:center">  
                        <userAvatar :user="userinform" /> 
                        <!-- <img style="width:122px;object-fit:contain" src="/assets/personal/poto.png" alt=""> -->
                    </div>
                    <el-divider></el-divider>
                    <div style="display:flex;justify-content:space-between;margin:0 10px;height:35px;align-items:center">
                        <div style="display:flex;align-items:center">
                            <img src="/assets/personal/yonghu.png" alt="">
                            <p style="color: #1A1A1A;margin-left:10px;">用户ID</p>
                        </div>
                        <p style="color:#666666;">{{ userinform.userName }}</p>
                    </div>
                    <el-divider></el-divider>
                    <div style="display:flex;justify-content:space-between;margin:0 10px;height:35px;align-items:center">
                        <div style="display:flex;align-items:center">
                            <img src="/assets/personal/shoujitianchong.png" alt="">
                            <p style="color: #1A1A1A;margin-left:10px;">手机号码</p>
                        </div>
                        <p style="color:#666666;">{{ userinform.phonenumber }}</p>
                    </div>
                    <el-divider></el-divider>
                    <div style="display:flex;justify-content:space-between;margin:0 10px;height:35px;align-items:center">
                        <div style="display:flex;align-items:center">
                            <img src="/assets/personal/youxiang.png" alt="">
                            <p style="color: #1A1A1A;margin-left:10px;">用户邮箱</p>
                        </div>
                        <p style="color:#666666;">{{ userinform.email }}</p>
                    </div>
                    <el-divider></el-divider>
                    <div style="display:flex;justify-content:space-between;margin:0 10px;height:35px;align-items:center">
                        <div style="display:flex;align-items:center">
                            <img src="/assets/personal/fuwuleixing.png" alt="">
                            <p style="color: #1A1A1A;margin-left:10px;">用户类型</p>
                        </div>
                        <p style="color:#666666;"> {{ userType }}</p>
                    </div>
                    <el-divider></el-divider>
                    <div style="display:flex;justify-content:space-between;margin:0 10px;height:35px;align-items:center">
                        <div style="display:flex;align-items:center">
                            <img src="/assets/personal/rili.png" alt="">
                            <p style="color: #1A1A1A;margin-left:10px;">创建日期</p>
                        </div>
                        <p style="color:#666666;">{{ userinform.createTime }}</p>
                    </div>
                    <el-divider></el-divider>
                </div>
            </div>

            <!-- <div class="userclass">
                <p>用户信息</p>
                <el-divider></el-divider>
                <el-form ref="form" :model="userinform" :rules="rules"  label-width="80px" style="padding:0 20px;">
                    <el-form-item label="用户昵称" prop="nickName">
                        <el-input v-model="userinform.nickName" size='mini'/>
                    </el-form-item> 
                    <el-form-item label="手机号码" prop="phonenumber">
                        <el-input v-model="userinform.phonenumber" maxlength="11"  size='mini'/>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="userinform.email" maxlength="50"  size='mini'/>
                    </el-form-item>
                    <el-form-item label="性别">
                    <el-radio-group v-model="userinform.sex">
                        <el-radio label="0">男</el-radio>
                        <el-radio label="1">女</el-radio>
                    </el-radio-group>
                    </el-form-item>
                    <el-form-item class="inforbtn" style="text-align:right">
                        <el-button size="mini" @click="submit">保存</el-button>
                        <el-button style="background: #EBEDF0;color: #808080;border:none"  size="mini" @click="close">关闭</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="userclass" style="margin-right:0">
                <p>修改密码</p>
                <el-divider></el-divider>
                <el-form ref="passform" :model="passform" :rules="passrules" label-width="80px" style="padding:0 20px;">
                    <el-form-item label="旧密码" prop="oldPassword">
                        <el-input v-model="passform.oldPassword" placeholder="请输入旧密码" type="password"  size='mini'/>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input v-model="passform.newPassword" placeholder="请输入新密码" type="password"  size='mini'/>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input v-model="passform.confirmPassword" placeholder="请确认密码" type="password"  size='mini'/>
                    </el-form-item>
                    <el-form-item class="inforbtn" style="text-align:right" label-width="100px" >
                        <el-button  size="mini" @click="passsubmit">保存</el-button>
                        <el-button style="background: #EBEDF0;color: #808080;border:none" size="mini" @click="passclose">关闭</el-button>
                    </el-form-item>
                </el-form>
            </div> -->
            <div class="basedata" style="border: 1px solid #DCDFE6;margin-top:30px;width:688px;height:430px;">
                <div style="background:#f5f7fa;height:45px;color:#909399;line-height:45px;border-bottom:1px solid #DCDFE6;margin-bottom:30px">   
                    <p class="userclassp">基本资料</p>
                </div>
                <el-tabs type="card" style="">
                    <el-tab-pane label="用户信息">
                        <el-form ref="form" :model="userinform" :rules="rules"  label-width="80px" style="padding:0 20px;">
                            <el-form-item label="用户昵称" prop="nickName">
                                <el-input v-model="userinform.nickName" size='mini'/>
                            </el-form-item> 
                            <el-form-item label="手机号码" prop="phonenumber">
                                <el-input v-model="userinform.phonenumber" maxlength="11"  size='mini'/>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="userinform.email" maxlength="50"  size='mini'/>
                            </el-form-item>
                            <el-form-item label="性别">
                            <el-radio-group v-model="userinform.sex">
                                <el-radio label="0">男</el-radio>
                                <el-radio label="1">女</el-radio>
                            </el-radio-group>
                            </el-form-item>
                            <el-form-item class="inforbtn" style="text-align:right">
                                <el-button size="mini" @click="submit">保存</el-button>
                                <el-button style="background: #EBEDF0;color: #808080;border:none"  size="mini" @click="close">关闭</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="修改密码">
                        <el-form ref="passform" :model="passform" :rules="passrules" label-width="80px" style="padding:0 20px;">
                            <el-form-item label="旧密码" prop="oldPassword">
                                <el-input v-model="passform.oldPassword" placeholder="请输入旧密码" type="password"  size='mini'/>
                            </el-form-item>
                            <el-form-item label="新密码" prop="newPassword">
                                <el-input v-model="passform.newPassword" placeholder="请输入新密码" type="password"  size='mini'/>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="confirmPassword">
                                <el-input v-model="passform.confirmPassword" placeholder="请确认密码" type="password"  size='mini'/>
                            </el-form-item>
                            <el-form-item class="inforbtn" style="text-align:right" label-width="100px" >
                                <el-button  size="mini" @click="passsubmit">保存</el-button>
                                <el-button style="background: #EBEDF0;color: #808080;border:none" size="mini" @click="passclose">关闭</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div style="width:80%;padding:1px;margin-top:0">   
            <p style="font-weight: bold;font-size:18px;">升级认证</p>
            <el-divider></el-divider>
            <div style="margin:-15px 0 0 0px;padding-right:20px"> 
                <userUpgrade :user="userinform"  v-if="userGetFlag" />   
                <!-- <el-tag color='#F7F7F7'>您【更新测试公司】的申请已提交，平台审核后会站内消息通知您。</el-tag>
                <el-tag color='#F2A51A' style="color:#FFFFFF;margin-left:17px">更新测试公司信息</el-tag>             -->
                <!-- <div style="border: 1px solid #DCDCDC;border-radius:5px;padding:0 20px;margin:20px 0;width:80%">
                    <p style="font-weight: bold;color:#0066EB;margin-bottom:0px">认证公司用户</p>
                    <div style="display:flex;align-items:center;justify-content:space-between;">    
                        <div style="color:#808080;font-size:14px;line-height:15px;">
                            <p>普通用户可提交公司信息和认证所需材料，经通过平台审核后升级为认证公司用户。</p>
                            <p>认证公司用户可在测试众包市场中发布测试任务。</p>
                        </div>              
                        <el-tag color='#F2A51A' style="color:#FFFFFF;margin-left:50px" >升级为认证公司用户</el-tag>
                    </div>
                </div>
                <div style="border: 1px solid #DCDCDC;border-radius:5px;padding:0 20px;margin:20px 0;width:80%">
                    <p style="font-weight: bold;color:#0066EB;margin-bottom:0px">认证测试公司</p>
                    <div style="display:flex;align-items:center;justify-content:space-between;">                  
                        <div style="color:#808080;font-size:14px;line-height:15px;">   
                            <p >普通用户可提交公司信息和公司测试者认证所需材料，并通过平台审核后，升级为公司测试者。</p>
                            <p>认证公司用户也可以补充提交公司测试者认证所需材料，并通过平台审核后，升级为认证测试公司。 </p>
                            <p>认证测试公司可在测试任务众包市场中应征和承接测试项目，完成任务可获取赏金。</p>
                        </div>
                        <el-tag color='#F2A51A' style="color:#FFFFFF;margin-left:50px" >升级为认证测试公司</el-tag>
                    </div>
                </div>
                <div style="border: 1px solid #DCDCDC;border-radius:5px;padding:0 20px;margin:20px 0;width:80%">
                    <p style="font-weight: bold;color:#0066EB;margin-bottom:0px">个人测试者</p>
                    <div style="display:flex;align-items:center;justify-content:space-between;">     
                        <div style="color:#808080;font-size:14px;line-height:15px;">
                            <p >普通用户可提交个人身份信息和资历升级为个人测试者。</p>
                            <p>个人测试者可在测试任务众包市场中应征和承接测试项目，完成任务可获取赏金。</p>
                        </div>             
                        <el-tag color='#F2A51A' style="color:#FFFFFF;margin-left:50px" >升级为个人测试者</el-tag>
                    </div>
                </div> -->
            </div>
        </div>  
    </div>
</template>
<script>
    import {mapGetters} from "vuex";
    import store from "@/store";
    import userAvatar from "./userAvatar";
    import userUpgrade from "./userUpgrade";
    import { updateUserProfile,updateUserPwd,getUserProfile } from "@/api/system/user";
    import { encrypt, decrypt } from '@/util/encrypt'
    export default{
        data(){
            const equalToPassword = (rule, value, callback) => {
                if (this.passform.newPassword !== value) {
                    callback(new Error("两次输入的密码不一致"));
                } else {
                    callback();
                }
            };
            return{
                userGetFlag: false,
                userType: "普通用户",
                // userinform:{nickName:'',phonenumber:'',email:'',sex:''},
                passform:{oldPassword:'',newPassword:'',confirmPassword:''},
                // 修改信息表单校验
                rules: {
                    nickName: [ { required: true, message: "用户昵称不能为空", trigger: "blur" } ],
                    email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" },
                    {type: "email", message: "请输入正确的邮箱地址",trigger: ["blur", "change"]}],
                    phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" },
                    {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,message: "请输入正确的手机号码",trigger: "blur"}]
                },
                 // 修改密码表单校验
                passrules: {
                    oldPassword: [
                        { required: true, message: "旧密码不能为空", trigger: "blur" }
                    ],
                    newPassword: [
                        { required: true, message: "新密码不能为空", trigger: "blur" },
                        { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
                    ],
                    confirmPassword: [
                        { required: true, message: "确认密码不能为空", trigger: "blur" },
                        { required: true, validator: equalToPassword, trigger: "blur" }
                    ]
                },
            }
        },
        components: { userAvatar,userUpgrade},
        computed:{
            ...mapGetters(['userinform','token'])
        },
        mounted(){
            if(this.token){
                this.getUser();
            }
            // userinform:{nickName:'',phonenumber:'',email:'',sex:''},
            // let {nickName,phonenumber,email,sex}=this.userinform
            // this.userinform={nickName,phonenumber,email,sex}
        },
        methods:{
            getUser() {
                 this.userGetFlag = false;
                 this.userType = "普通用户";
                 getUserProfile().then((response) => {
                     this.user = response.data;
                     this.roleGroup = response.roleGroup;
                     this.postGroup = response.postGroup;
                     this.userGetFlag = true;
                     if (this.user.companyStatus == 2) {
                         if (this.user.testerStatus == 2) {
                             this.userType = "认证测试公司";
                         } else {
                             this.userType = "认证公司";
                         }
                     } else {
                         if (this.user.testerStatus == 2) {
                             this.userType = "个人测试者";
                         } else {
                             this.userType = "普通用户";
                         }
                     }
                 });
            },
            //提交修改信息
            submit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        updateUserProfile(this.userinform).then(response => {
                            this.$message.success("修改成功");
                            store.commit('SET_USERINFORM', this.userinform)
                        });
                    }
                });
            },
            close(){
                 this.$router.push({ path: "/console" });
            },
            //提交修改密码
            passsubmit() {
                this.$refs.passform.validate(valid => {
                    if (valid) {
                        // updateUserPwd(this.passform.oldPassword, this.passform.newPassword).then(response => {
                        updateUserPwd(encrypt(this.passform.oldPassword), encrypt(this.passform.newPassword)).then(response => {
                            this.$message.success("修改成功");
                        });
                    }
                });
            },
            passclose(){
                this.$router.push({ path: "/console" });
                // this.passform={}
            },
        },

    }
</script>
<style scoped>
    .dvied{
        width: 4px;
        height: 18px;
        background: #0066EB;
    }
    .userclass{
        width:380px;
        /* height: 510px; */
        background: #FFFFFF;
        border-radius: 4px;
        margin:20px 30px 20px 0;
        /* border: 1px solid rgb(220, 220, 220); */
        border-radius: 5px;
    }
    .userclassp{
        font-weight: bold;
        color: #5c5a5a;
        margin:0px 0 0 20px;
    }
    .el-divider--horizontal{
        margin:15px 0 30px 0;
    }
    .baseinfo>>>.el-divider--horizontal{
        margin:10px 0;
    }
    .inforbtn{
        width:300px
    }
    .inforbtn>>>.el-button{
        width: 90px;
        height: 34px;
        background: #0066EB;
        border-radius: 4px;
        color:#FFFFFF
    }
    .el-tag{
        border:none;
        cursor: pointer;
    }
    .basedata>>>.el-tabs--card>.el-tabs__header .el-tabs__nav{
        border-radius:0
    }
</style>