<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" />
                    </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="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"
                            class="changePassword"
                        >
                            <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="性别" v-if="userinform.companyStatus != 2">
                                <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="企业简介" v-if="userinform.companyStatus == 2">
                        <el-form
                            ref="companyInfoForm"
                            :model="companyInfoForm"
                            :rules="companyInfoFormRules"
                            label-width="80px"
                            style="padding: 0 20px"
                        >
                            <el-form-item label="公司简介" prop="companyDesc">
                                <el-input :rows="8" type="textarea" v-model="companyInfoForm.companyDesc" size="mini" />
                            </el-form-item>

                            <el-form-item class="inforbtn" style="text-align: right">
                                <el-button size="mini" @click="saveCom">保存</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-tab-pane label="修改密码">
                        <el-form
                            ref="passform"
                            :model="passform"
                            :rules="passrules"
                            label-width="80px"
                            style="padding: 0 20px"
                            class="changePassword"
                        >
                            <!-- <el-form-item label="旧密码" prop="oldPassword">
                                <el-input
                                    v-model="passform.oldPassword"
                                    placeholder="请输入旧密码"
                                    type="password"
                                    size="mini"
                                />
                            </el-form-item> -->
                            <!-- uuid字段sex -->
                            <el-form-item label="手机号" prop="phonenumber">
                                <el-input v-model="passform.phonenumber" disabled placeholder="请输入手机号" size="mini" />
                            </el-form-item>
                            <el-form-item label="验证码" prop="remark" class="passphone">
                                <el-input
                                    style="width: 390px; margin-right: 10px"
                                    v-model="passform.remark"
                                    placeholder="请输入验证码"
                                    size="mini"
                                ></el-input>
                                <el-button size="mini" @click="sendCode" :disabled="isSending || countdown > 0">
                                    {{
                                        isSending ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '发送验证码'
                                    }}
                                </el-button>
                            </el-form-item>
                            <el-form-item label="新密码" prop="password">
                                <el-input
                                    v-model="passform.password"
                                    placeholder="请输入新密码"
                                    type="password"
                                    size="mini"
                                    show-password
                                />
                            </el-form-item>

                            <el-form-item label="确认密码" prop="checkPass">
                                <el-input
                                    v-model="passform.checkPass"
                                    placeholder="请确认密码"
                                    type="password"
                                    size="mini"
                                    show-password
                                />
                            </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 class="basedata" style="border: 1px solid #dcdfe6; margin-top: 30px; width: 95%">
            <div
                style="
                    background: #f5f7fa;
                    height: 45px;
                    color: #909399;
                    line-height: 45px;
                    border-bottom: 1px solid #dcdfe6;
                "
            >
                <p class="userclassp">升级认证</p>
            </div>
            <div style="padding: 33px 48px">
                <userUpgrade :user="userinform" v-if="userGetFlag" @setTip="setTip" />
            </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, saveCompanyInfo } from '@/api/system/user'
import { encrypt, decrypt } from '@/util/encrypt'
import { getCodeUserLogin } from '@/api/system/login'
import { changePasswd } from '@/api/system/user'
export default {
    data() {
        const equalToPassword = (rule, value, callback) => {
            if (this.passform.password !== value) {
                callback(new Error('两次输入的密码不一致'))
            } else {
                callback()
            }
        }
        return {
            isSending: false,
            countdown: 0,
            companyInfoForm: {
                companyDesc: '',
                applyId: '',
            },
            companyInfoFormRules: {
                companyDesc: [{ required: true, message: '公司简介', trigger: 'blur' }],
            },
            userGetFlag: false,
            userType: '普通用户',
            // userinform:{nickName:'',phonenumber:'',email:'',sex:''},
            passform: {},
            // 修改信息表单校验
            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: {
                phonenumber: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
                remark: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
                // oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
                password: [
                    { required: true, message: '新密码不能为空', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
                ],
                checkPass: [
                    { 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}
        this.passform.phonenumber = this.$store.getters.userinform.phonenumber
    },
    methods: {
        setTip(val) {
            this.companyInfoForm.companyDesc = val.dec
            this.companyInfoForm.applyId = val.applyId
        },
        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) {
                    const data = {
                        userId: this.userinform.userId,
                        email: this.userinform.email,
                        nickName: this.userinform.nickName,
                        phonenumber: this.userinform.phonenumber,
                    }
                    const userInfo = JSON.parse(JSON.stringify(this.userinform))
                    userInfo.email = this.userinform.email
                    userInfo.nickName = this.userinform.nickName
                    userInfo.phonenumber = this.userinform.phonenumber
                    updateUserProfile(data).then((response) => {
                        this.$message.success('修改成功')
                        store.commit('SET_USERINFORM', userInfo)
                    })
                }
            })
        },
        close() {
            this.$router.push({ path: '/console' })
        },
        //提交修改密码
        passsubmit() {
            this.$refs.passform.validate((valid) => {
                if (valid) {
                    // updateUserPwd(this.passform.oldPassword, this.passform.newPassword).then(response => {
                    const data = {
                        phonenumber: this.passform.phonenumber,
                        remark: this.passform.remark,
                        password: encrypt(this.passform.password),
                        checkPass: encrypt(this.passform.checkPass),
                        sex: this.passform.sex,
                        nickName: this.$store.getters.userinform.nickName,
                        userName: this.$store.getters.userinform.userName,
                    }
                    changePasswd(data).then((response) => {
                        if (response.code == 200) {
                            this.$message.success('修改成功')
                            this.passform = {}
                        }
                    })
                }
            })
        },
        passclose() {
            this.$router.push({ path: '/console' })
            // this.passform={}
        },
        saveCom() {
            this.$refs['companyInfoForm'].validate((valid) => {
                if (valid) {
                    this.companyInfoForm.userId = this.$store.getters.userId
                    saveCompanyInfo(this.companyInfoForm).then((res) => {
                        if (res.code == 200) {
                            this.$message.success('修改成功')
                        }
                    })
                }
            })
        },
        sendCode() {
            if (!/^1[34578]\d{9}$/.test(this.passform.phonenumber)) {
                return this.$message.error('请输入正确的手机号码')
            }
            if (this.countdown > 0 || this.isSending) {
                return // 防止重复点击发送
            }
            this.isSending = true
            this.startCountdown()

            setTimeout(() => {
                // 假设发送成功后将isSending重置为false
                this.isSending = false
            }, 100) // 这里使用2秒的延迟来模拟发送过程，你需要替换为实际的发送逻辑
            // 验证码接口
            getCodeUserLogin(this.passform.phonenumber).then((res) => {
                this.isSending = false
                if (res.code == 200) {
                    this.passform.sex = res.uuid
                    this.$message.success('短信发送成功，请注意查收')
                }
            })
        },
        startCountdown() {
            this.countdown = 60
            const timer = setInterval(() => {
                this.countdown--
                if (this.countdown <= 0) {
                    clearInterval(timer)
                }
            }, 1000)
        },
    },
}
</script>
<style scoped>
.changePassword >>> .el-input--mini .el-input__inner {
    height: 40px;
}
.passphone >>> .el-input {
    margin-right: 0 !important;
    width: 476px !important;
}
.passphone >>> .el-button {
    height: 40px;
    border: none;
    background: #0066eb;
    border-radius: 0px 2px 2px 0px !important;
    color: #FFFFFF;
}
.dvied {
    width: 4px;
    height: 18px;
    background: #0054a7;
}
.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>
