<template>
    <div class="wrap">
        <div class="header">
            <el-avatar :size="80" :src="this.$store.state.avatar" class="Headtop"></el-avatar>
            <div style="color:#9278FF;font-size:14px;font-family:MicrosoftYaHei;margin-top:5px;">
                <el-upload
                    class="upload-demo"
                    :action="this.api.updateUserAvatars"
                    :data="{userId:this.userId}"
                    name="file"
                    :limit="1"
                    :on-success="getRes"
                >
                    <div>点击更改头像</div>
                </el-upload>
            </div>
        </div>

        <div class="card" style="margin-top: -65px">
            <p class="block-title" style="display: flex;justify-content: space-between;align-items: center;">
                <span><img src="../../assets/img/person/user.png" alt=""> 用户信息</span> 
                <el-button type="primary" size="small" v-preventReClick @click="save">更新资料</el-button>
            </p>
            <p class="meta-title">
                <span>个人信息</span>
            </p>
            <div class="information">
                <div class="line">
                    <div class="item">
                        <span>姓名</span>
                        <input id="username" class="username" placeholder="请输入姓名" type="text" v-model="form.userName"/>
                    </div>
                    <div class="item">
                        <span>所在国家</span>
                        <el-select
                            v-model="form.countries"
                            placeholder
                        >
                            <el-option
                                v-for="item in countryList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="line">
                    <div class="item">
                        <span>性别</span>
                        <div class="sexRadio">
                            <el-radio v-model="form.sex" :label="1">男</el-radio>
                            <el-radio v-model="form.sex" :label="2">女</el-radio>
                        </div>
                    </div>
                    <div class="item">
                        <span>所在地</span>
                        <div class="selects">
                            <el-select
                                v-model="form.countries"
                                placeholder
                            >
                                <el-option
                                    v-for="item in countryList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-model="form.provinceId"
                                placeholder
                                @change="id => getCity(id,1)"
                            >
                                <el-option
                                    v-for="item in provinceList"
                                    :key="item.provinceId"
                                    :label="item.provinceName"
                                    :value="item.provinceId"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-model="form.cityId"
                                placeholder
                                :disabled="form.provinceId ? false : true"
                            >
                                <el-option
                                    v-for="item in cityList"
                                    :key="item.cityId"
                                    :label="item.cityName"
                                    :value="item.cityId"
                                ></el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="item">
                        <span>出生年月日</span>
                        <el-date-picker
                            v-model="form.dateBirth"
                            :clearable="false"
                            class="block-right"
                            type="date">
                        </el-date-picker>
                    </div>
                    <div class="item">
                        <span>证件</span>
                        <input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" id="idnumber" class="idnumber" placeholder="请输入证件" type="text" v-model="form.idNumber"/>
                    </div>
                </div>
                <div class="line">
                    <div class="item">
                        <span>教育程度</span>
                        <el-select
                            v-model="form.educationDegree"
                            placeholder="请选择教育程度"
                        >
                            <el-option
                                v-for="(item,index) in educationDegreeList"
                                :key="index"
                                :label="item.name"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="item">
                        <span>所在学校</span>
                        <el-select
                            v-model="form.schoolId"
                            filterable
                            placeholder="请选择所在学校"
                        >
                            <el-option
                                v-for="item in schoolList"
                                :key="item.value"
                                :label="item.schoolName"
                                :value="item.schoolId"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="line">
                    <div class="item">
                        <span>手机号</span>
                        <div class="btns flex-between">
                            <span>{{form.phone}}</span>
                            <el-button v-if="form.phone" type="primary" size="small" @click="bindPhone">更换</el-button>
                            <el-button v-else type="primary" size="small" @click="bindPhone">绑定</el-button>
                        </div>
                    </div>
                    <div class="item">
                        <span>邮箱</span>
                        <div class="btns flex-between">
                            <span>{{form.email}}</span>
                            <el-button v-if="form.email" type="primary" size="small" @click="bindEmail">更换</el-button>
                            <el-button v-else type="primary" size="small" @click="bindEmail">绑定</el-button>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="item">
                        <span>微信号</span>
                        <input type="text" class="username" placeholder="请输入微信号" v-model="form.wechatId"/>
                    </div>
                </div>

                <p class="meta-title plus">
                    <span>个人档案</span>
                    <el-button type="text" icon="el-icon-plus" @click="addArch">新增</el-button>
                </p>
            </div>

            <div class="information" style="margin-top: 20px;">
                <div class="archives" v-for="(archive,index) in archivesList" :key="index" v-show="index == 0 || showArch">
                    <div class="line">
                        <div class="item">
                            <span>职业</span>
                            <el-select
                                v-model="archive.personalCareerId"
                                placeholder="选择职业"
                            >
                                <el-option
                                    v-for="item in occupationList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </div>
                        <div class="item">
                            <span>国家</span>
                            <el-select
                                v-model="form.countries"
                                placeholder
                            >
                                <el-option
                                    v-for="item in countryList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="line">
                        <div class="item">
                            <span>学校名称</span>
                            <el-select
                                v-model="archive.schoolId"
                                filterable
                                placeholder="选择学校"
                                @change="id => getSchoolName(id,index)"
                            >
                                <el-option
                                    v-for="item in schoolList"
                                    :key="item.value"
                                    :label="item.schoolName"
                                    :value="item.schoolId"
                                ></el-option>
                            </el-select>
                        </div>
                        <div class="item">
                            <span>专业学科</span>
                            <el-select
                                v-model="archive.disciplineId"
                                placeholder="选择专业学科"
                                @change="id => getItemProfessionalClass(id,index)"
                                @clear="() => clearItemClass(index)"
                            >
                                <el-option
                                    v-for="item in subjectList"
                                    :key="item.value"
                                    :label="item.disciplineName"
                                    :value="item.disciplineId"
                                ></el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="line">
                        <div class="item">
                            <span>专业类</span>
                            <el-select
                                v-model="archive.professionalClassId"
                                placeholder="选择专业类"
                                :disabled="archive.disciplineId ? false : true"
                                @change="id => getItemProfessional(id,index)"
                                @clear="() => clearItemProfess(index)"
                            >
                                <el-option
                                    v-for="item in archive.ProfessionalClassList"
                                    :key="item.professionalClassId"
                                    :label="item.professionalClassName"
                                    :value="item.professionalClassId"
                                ></el-option>
                            </el-select>
                        </div>
                        <div class="item">
                            <span>专业</span>
                            <el-select
                                v-model="archive.professionalId"
                                placeholder="选择专业"
                                :disabled="archive.professionalClassId ? false : true"
                                @change="getItemStuGrade"
                            >
                                <el-option
                                    v-for="item in archive.ProfessionalList"
                                    :key="item.professionalId"
                                    :label="item.professionalName"
                                    :value="item.professionalId"
                                ></el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="fold" v-if="archivesList.length > 1">
                <img :class="{ 'arrowTransform': showArch, 'arrowTransformReturn': !showArch}" style="width: 21px;height: 17px;" src="../../assets/img/person/open.png" alt="" @click="foldArch">
            </div>
        </div>

        <div class="card mgb20">
            <p class="block-title" style="margin-bottom: 15px">
                <span><img src="../../assets/img/person/manag.png" alt=""> 账号信息</span>
            </p>
            <div class="information">
                <div class="line">
                    <div class="item">
                        <span>用户账号</span>
                        <input
                            id="account"
                            type="text"
                            class="username" placeholder="请输入用户账号"
                            v-model="form.account"
                        />
                    </div>
                    <div class="item">
                        <span>密码</span>
                        <div class="btns flex-between">
                            <p>******</p>
                            <el-button type="primary" size="small" @click="bindPassword">更换</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog
        :title="form.email ? '更换邮箱' : '绑定邮箱'"
        :visible.sync="emailVisible"
        :close-on-click-modal="false"
        @close="closeEmail"
        width="30%">
            <el-form ref="form" :model="form" label-width="60px">
                <el-form-item label="邮箱">
                    <el-input placeholder="请输入邮箱" v-model="email"></el-input>
                </el-form-item>
                <el-form-item label="验证码">
                    <div class="flex-between">
                        <el-input v-model="emailCode" placeholder="请输入验证码" maxlength="6"></el-input>
                        <el-button style="margin-left: 10px" type="text" @click="sendEmailCode" :disabled="emailDisabled">{{emailBtnText}}</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="emailVisible = false">取 消</el-button>
                <el-button type="primary" @click="emailSubmit">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
        :title="form.phone ? '更换手机号' : '绑定手机号'"
        :visible.sync="phoneVisible"
        :close-on-click-modal="false"
        @close="closePhone"
        width="30%">
            <el-form ref="form" :model="form" label-width="60px">
                <el-form-item label="手机号">
                    <el-input placeholder="请输入手机号" v-model="phone" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="验证码">
                    <div class="flex-between">
                        <el-input v-model="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input>
                        <el-button style="margin-left: 10px" type="text" @click="sendPhoneCode" :disabled="phoneDisabled">{{phoneBtnText}}</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="phoneVisible = false">取 消</el-button>
                <el-button type="primary" @click="phoneSubmit">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
        title="更换密码"
        :visible.sync="passwordVisible"
        :close-on-click-modal="false"
        @close="closePassword"
        width="30%">
            <el-form ref="passwordForm" :model="form" label-width="60px">
                <el-form-item label="原密码">
                    <el-input type="password" v-model="passwordForm.password" placeholder="请输入原密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码" @keyup.enter.native="editPassword"></el-input>
                </el-form-item> 
                <el-form-item label="新密码">
                    <el-input type="password" v-model="passwordForm.reNewPassword" placeholder="请确认新密码" @keyup.enter.native="editPassword"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="passwordVisible = false">取 消</el-button>
                <el-button type="primary" @click="editPassword">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userId: this.$store.state.userLoginId,
            form: {
                name:'',
                workNumber:'',
                password:"",
                phone:'',
                email:'',
                provinceName:'',
                cityName:'',
                schoolName:'',
                professionalName:'',
                experimentName:'',
                sex: 1,
                dateBirth: '',
                educationDegree: ''
            },
            profession: [
                {
                    value: '1',
                    label: '学生'
                },
                {
                    value: '2',
                    label: '老师'
                }
            ],
            emailVisible: false,
            passwordVisible: false,
            phoneVisible: false,
            showArch: false,
            passwordForm: {
                password: '',
                newPassword: '',
                reNewPassword: ''
            },
            sexList: [
                {
                    name: '男',
                    value: 1
                },
                {
                    name: '女',
                    value: 2
                }
            ],
            countryList: [
                {
                    label: '中国'
                }
            ],
            form: {},
            occupationList: [{
                value: 1,
                label: '学生'
            },
            {
                value: 2,
                label: '老师'
            }],
            provinceList: this.$store.state.provinceList, //省份
            cityList: [], //城市
            // 教育程度
            educationDegreeList: [
                {
                    name: '专科',
                    value: 1
                },
                {
                    name: '本科',
                    value: 2
                },
                {
                    name: '硕士',
                    value: 3
                },
                {
                    name: '博士',
                    value: 4
                },
                {
                    name: '其他',
                    value: 5
                }
            ],
            subjectList: [], //专业学科
            ProfessionalClassList: [], //专业类
            ProfessionalList: [], //专业
            schoolList: [],

            archivesList: [],
            archivesForm: {
                //个人档案
                personalCareerId: '', //职业
                schoolId: '', //院校
                schoolName: '', //院校名称
                professionalClassId: '', //专业类
                professionalClassName: '', //专业类名称
                disciplineId: '', //专业学科
                disciplineName: '', //专业学科名称
                professionalId: '', //专业
                professionalName: '', //专业名称
                userId: this.userId
            },
            email: '',
            emailBtnText: '发送验证码',
            emailCode: '',
            emailDisabled: false,
            emailTimer: null,
            phone: '',
            phoneBtnText: '发送验证码',
            phoneCode: '',
            phoneDisabled: false,
            phoneTimer: null,
            originAccount: '',
            accountReapeat: false
        };
    },
    mounted() {
        this.getdata()
        this.getProvince()
        this.getSchoolData()
        this.getSubject()
    },
    methods: {
        getProvince(){
            this.$get(this.api.queryProvince).then(res => {
                this.provinceList = res.list
                this.$store.commit("provinceData", { provinceList : this.provinceList});
            }).catch(res => {});
        },
        // 获取城市
        getCity(id,type,index){
            if(type == 1){
                if(this.form.provinceId){
                    this.form.cityId = 1
                    this.getCityData(type,index)
                }
            }else{
                if(this.archivesList[index].provinceId){
                    this.archivesList[index].provinceName = this.provinceList[id-1].provinceName
                    this.archivesList[index].cityId = 1
                    this.getCityData(type,index)
                }
            }
        },
        getCityData(type,index){
            let provinceId = type == 1 ? this.form.provinceId : this.archivesList[index].provinceId
            this.$get(this.api.queryCity,{provinceId}).then(res => {
                if(type == 1){
                    this.cityList = res.list
                }else{
                    this.archivesList[index].cityList = res.list
                }
            }).catch(res => {});
        },
        getCityName(id,index){
            this.archivesList[index].cityName = this.archivesList[index].cityList[id-1].cityName
        },
        getSchoolName(id,index){
            this.archivesList[index].schoolName = this.schoolList[id-1].schoolName
        },
        // 获取学校名称
        getSchoolData(){
            this.$get(this.api.querySchoolData,{schoolName: '',provinceId: '',cityId: ''}).then(res => {
                this.schoolList = res.list
            }).catch(res => {});
        },
        async accountChange(){
            if(this.originAccount != this.form.account){
                let res = await this.$get(this.api.queryAccountIsExist, { 
                    account: this.form.account,
                    schoolId: this.form.schoolId
                });
                if(res.message.user.length){
                    this.$message.warning('该账号已存在');
                    this.accountReapeat = true
                }else{
                    this.accountReapeat = false
                }
            }else{
                this.accountReapeat = false
            }
        },
        //取得头像地址
        getRes(res) {
            this.$store.commit('userPhoto',{avatar:res.message})
        },
        getdata() {
            this.$get(this.api.queryUserInfoDetails,{ userId: this.userId }).then(res => {
                let userInfo = res.result.hrUserInfo
                let schoolId = userInfo.schoolId
                this.form = Object.assign(userInfo,res.result.userAccountList[0])
                this.form.schoolId = schoolId
                this.form.accountId = userInfo.id
                console.log(11,this.form)
                this.originAccount = this.form.account
                this.archivesList = res.result.personalFileList
                this.$nextTick(() => {
                    if(this.form.provinceId){
                        this.getCityData(1)
                    }
                    if(this.archivesList.length != 0){
                        this.archivesList.forEach((e,k) =>{
                            this.$set(e, 'subjectList', this.subjectList);
                            this.$set(e, 'disciplineId', e.disciplineId ? e.disciplineId : '');
                            this.$set(e, 'disciplineName', e.disciplineName ? e.disciplineName : '');
                            this.$set(e, 'professionalClassId', e.professionalClassId ? e.professionalClassId : '');
                            this.$set(e, 'professionalClassName', e.professionalClassName ? e.professionalClassName : '');
                            this.$set(e, 'professionalId', e.professionalId ? e.professionalId : '');
                            this.$set(e, 'professionalName', e.professionalName ? e.professionalName : '');
                            this.$set(e, 'schoolId', e.schoolId ? e.schoolId : '');
                            this.$set(e, 'schoolName', e.schoolName ? e.schoolName : '');

                            if(e.disciplineId){
                                this.$get(this.api.queryCourseProfessionalClass,{ disciplineId: e.disciplineId }).then(res => {
                                    this.$set(e, 'ProfessionalClassList', res.message);
                                }).catch(res => {});
                            }else{
                                this.$set(e, 'ProfessionalClassList', []);
                            }
                            if(e.professionalClassId){
                                this.$get(this.api.queryCourseProfessional,{ professionalClassId: e.professionalClassId }).then(res => {
                                    this.$set(e, 'ProfessionalList', res.message);
                                }).catch(res => {});
                            }else{
                                this.$set(e, 'ProfessionalList', []);
                            }
                            // if(e.provinceId){
                            //     this.$get(this.api.queryCity,{provinceId: e.provinceId}).then(res => {
                            //         this.$set(e, 'cityList', res.message);
                            //     }).catch(res => {});
                            // }else{
                            //     this.$set(e, 'cityList', []);
                            // }
                            console.log(11,window.scrollTo)
                        })
                    }else{
                        this.concatArch(1)
                    }
                })
            }).catch(err => {})
        },
        concatArch(isLoadData) {
            this.archivesList = this.archivesList.concat({
                isNew: true,
                personalCareerId: '',
                schoolId: '',
                schoolName: '',
                subjectList: this.subjectList,
                disciplineId: '',
                disciplineName: '',
                ProfessionalClassList: [],
                professionalClassId: '',
                professionalClassName: '',
                ProfessionalList: [],
                professionalId: '',
                professionalName: '',
                userId: this.userId,
                personalFileId: ''
            })
            // if(!isLoadData){
            //     this.$nextTick(() => {
            //         document.body.scrollTop = document.querySelector('.content-box').scrollHeight
            //         document.documentElement.scrollTop = document.querySelector('.content-box').scrollHeight
            //     })
            // }
        },
        addArch() {
            let isEmpty = false
            this.archivesList.forEach((n,k) => {
                if(!n.personalCareerId) isEmpty = true
            })
            if(isEmpty) return this.$message.warning('请选择职业')
            this.showArch = true
            this.concatArch()
        },
        bindEmail() {
            this.email = this.form.email
            this.emailVisible = true
        },
        bindPhone() {
            this.phone = this.form.phone
            this.phoneVisible = true
        },
        bindPassword() {
            this.passwordVisible = true
        },
        editPassword() {
            if(!this.passwordForm.password) return this.$message.warning('请输入原密码')
            if(!this.passwordForm.newPassword) return this.$message.warning('请输入新密码')
            if(!this.passwordForm.reNewPassword) return this.$message.warning('请确认新密码')
            if(this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return this.$message.warning('请输入6位数以上的密码')
            if(this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return this.$message.warning('输入的新密码不一致，请重新确认')
            if(this.passwordForm.password === this.passwordForm.newPassword) return this.$message.warning('原密码跟新密码不能一致')

            let data = this.passwordForm
            data.userid = this.userId
            this.$post(this.api.examinePassword,data).then(res => {
                if(res.errmessage == 'success'){
                    this.$message.success('更换成功')
                    this.passwordVisible = false
                }
            }).catch(err => {})
        },
        closePassword() {
            this.passwordForm = {
                password: '',
                newPassword: '',
                reNewPassword: ''
            }
        },
        foldArch() {
            this.showArch = !this.showArch
            // this.$nextTick(() => {
            //     document.body.scrollTop = document.querySelector('.content-box').scrollHeight
            //     document.documentElement.scrollTop = document.querySelector('.content-box').scrollHeight
            // })
        },
        // 获取学科类别
        getSubject(){
            this.$get(this.api.queryCourseDiscipline).then(res => {
                this.subjectList = res.message
            }).catch(res => {})
        },
        // 清除学科类别
        clearClass(){
            this.archivesForm.professionalClassId = '',
            this.archivesForm.professionalId = ''
        },
        // 获取专业类
        getProfessionalClass(val){
            this.clearClass()
            if(val){
                let obj = {}
                obj = this.subjectList.find((item)=>{
                    return item.disciplineId === val
                });
                this.archivesForm.disciplineName = obj.disciplineName
                this.getProfessionalClassData(val)
            }
        },
        clearItemClass(index){
            this.archivesList[index].professionalClassId = ''
            this.archivesList[index].professionalClassName = ''
            this.archivesList[index].professionalId = ''
            this.archivesList[index].professionalName = ''
            // this.archivesList.map(e =>{
            //     if(e.disciplineId == item){
            //         e.professionalClassId = '',
            //         e.professionalClassName = '',
            //         e.professionalId = '',
            //         e.professionalName = ''
            //     }
            // })
        },
        getItemProfessionalClass(item,index){
            this.clearItemClass(index)
            if(item){
                let obj = {}
                obj = this.subjectList.find(r =>{
                    return r.disciplineId === item
                });
                this.$get(this.api.queryCourseProfessionalClass,{ disciplineId: item }).then(res => {
                    this.archivesList.map(e =>{
                        if(e.disciplineId == item){
                            e.ProfessionalClassList = res.message
                            e.disciplineName = obj.disciplineName
                        }
                    })
                }).catch(res => {})
            }
        },
        getProfessionalClassData(value){
            this.$get(this.api.queryCourseProfessionalClass,{ disciplineId: value }).then(res => {
                this.ProfessionalClassList = res.message
            }).catch(res => {})
        },
        // 清除专业类
        clearProfess(){
            this.archivesForm.professionalId = ''
        },
        // 获取专业
        getProfessional(val){
            this.clearProfess()
            if(val){
                let obj = {}
                obj = this.ProfessionalClassList.find((item)=>{
                    return item.professionalClassId === val
                })
                this.archivesForm.professionalClassName = obj.professionalClassName
                this.getProfessionalData(val)
            }
        },
        clearItemProfess(index){
            this.archivesList[index].professionalId = ''
            this.archivesList[index].professionalName = ''
            // this.archivesList.map(e =>{
            //     if(e.professionalClassId == item){
            //         e.professionalId = '',
            //         e.professionalName = ''
            //     }
            // })
        },
        getItemProfessional(item,index){
            this.clearItemProfess(index)
            if(item){
                this.$get(this.api.queryCourseProfessional,{ professionalClassId: item }).then(res => {
                    this.archivesList.map(e =>{
                        if(e.professionalClassId == item){
                            let obj = {}
                            obj = e.ProfessionalClassList.find(r =>{
                                return r.professionalClassId === item
                            })
                            e.ProfessionalList = res.message
                            e.professionalClassName = obj.professionalClassName
                        }
                    })
                }).catch(res => {})
            }
        },
        getProfessionalData(value){
            this.$get(this.api.queryCourseProfessional,{professionalClassId: value}).then(res => {
                this.ProfessionalList = res.message
            }).catch(res => {})
        },
        // 获取专业名称
        getStuGrade(val){
            if(val){
                let obj = {}
                obj = this.ProfessionalList.find(r =>{
                    return r.professionalId === val;
                })
                this.archivesForm.professionalName = obj.professionalName
            }
        },
        getItemStuGrade(item){
            if(item){
                this.archivesList.map(e =>{
                    if(e.professionalId == item){
                        let obj = {}
                        obj = e.ProfessionalList.find(r =>{
                            return r.professionalId === item;
                        })
                        e.professionalName = obj.professionalName
                    }
                })
            }
        },
        save() {
            let isEmpty = false
            this.archivesList.forEach((n,k) => {
                if(!n.personalCareerId) isEmpty = true
                n.userId = this.userId
            })
            if(isEmpty) return this.$message.warning('请选择职业')
            if(this.accountReapeat) return this.$message.warning('该账号已存在')
            if(this.form.idNumber && !/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(this.form.idNumber)) return this.$message.warning('请输入正确的证件号码')
            // this.form.userId = this.userId
            let form = this.form
            let personalFileList = []
            this.archivesList.forEach((n,k) => {
                personalFileList.push({
                    disciplineId: n.disciplineId,
                    disciplineName: n.disciplineName,
                    personalCareerId: n.personalCareerId,
                    personalFileId: n.personalFileId,
                    professionalClassId: n.professionalClassId,
                    professionalClassName: n.professionalClassName,
                    professionalId: n.professionalId,
                    professionalName: n.professionalName,
                    provinceId: n.provinceId,
                    provinceName: n.provinceName,
                    schoolId: n.schoolId,
                    schoolName: n.schoolName,
                    userId: this.userId
                })
            })
            let data = {
                userId: this.userId,
                userAccountList: [{
                    id: form.accountId,
                    account: form.account,
                    userId: form.userId,
                }],
                hrUserInfo: {
                    provinceId: form.provinceId,
                    cityId: form.cityId,
                    countries: form.countries,
                    dateBirth: form.dateBirth,
                    educationDegree: form.educationDegree,
                    idNumber: form.idNumber,
                    schoolId: form.schoolId,
                    sex: form.sex,
                    userId: this.userId,
                    userName: form.userName,
                },
                personalFileList,
            }
            this.$post(this.api.updatePersonCenter,data).then(res => {
                this.$message.success('提交成功！')
            }).catch(res => {})
        },
        emailCountdown(){
            let count = 60
            if(!this.emailTimer){
                this.emailDisabled = true
                this.emailTimer = setInterval(() => {
                    console.log('倒计时中')
                    if(count > 0){
                        count--
                        this.emailBtnText = `${count}秒后重试`
                    }else{
                        this.emailDisabled = false
                        clearInterval(this.emailTimer)
                        this.emailTimer = null
                        this.emailBtnText = `发送验证码`
                    }
                },1000)
            }
        },
        phoneCountdown(){
            let count = 60
            if(!this.phoneTimer){
                this.phoneDisabled = true
                this.phoneTimer = setInterval(() => {
                    console.log('倒计时中')
                    if(count > 0){
                        count--
                        this.phoneBtnText = `${count}秒后重试`
                    }else{
                        this.phoneDisabled = false
                        clearInterval(this.phoneTimer)
                        this.phoneTimer = null
                        this.phoneBtnText = `发送验证码`
                    }
                },1000)
            }
        },
        closeEmail(){
            if(!this.emailDisabled){
                this.emailCode = ''
            }
        },
        sendEmailCode(){
            if(!this.email) return this.$message.warning('请输入邮箱')
            if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return this.$message.warning('请输入正确的邮箱')
            let data = {
                userId: this.userId,
                email: this.email,
                types: 1
            }
            this.$post(this.api.sendEmailCode,data).then(res => {
                if(res.errmessage == 'success'){
                    this.emailCountdown()
                    this.emailOpener = res.data
                }
            }).catch(res => {});
        },
        emailSubmit(){
            if(!this.email) return this.$message.warning('请输入邮箱')
            if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return this.$message.warning('请输入正确的邮箱')
            if(!this.emailCode) return this.$message.warning('请输入验证码')
            let data = {
                userId: this.userId,
                email: this.email,
                types: 1,
                code: this.emailCode,
                opener: this.emailOpener
            }
            this.$put(this.api.bingEmail,data).then(res => {
                if(res.errmessage == 'success'){
                    this.$message.success('绑定成功')
                    this.form.email = this.email
                    this.emailVisible = false
                }
            }).catch(res => {});
        },
        closePhone(){
            if(!this.emailDisabled){
                this.emailCode = ''
            }
        },
        sendPhoneCode(){
            if(!this.phone) return this.$message.warning('请输入手机号')
            if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号')
            this.$post(this.api.sendPhoneCode,{
                userId: this.userId,
                phone: this.phone,
                types: 2
            }).then(res => {
                if(res.status == 200){
                    this.phoneCountdown()
                    this.phoneOpener = res.data
                }
            }).catch(res => {})
        },
        phoneSubmit(){
            if(!this.phone) return this.$message.warning('请输入手机号')
            if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号')
            if(!this.phoneCode) return this.$message.warning('请输入验证码')
            let data = {
                userId: this.userId,
                phone: this.phone,
                types: 2,
                code: this.phoneCode,
                opener: this.phoneOpener
            }
            this.$put(this.api.bindPhone,data).then(res => {
                if(res.errmessage == 'success'){
                    this.$message.success('绑定成功')
                    this.form.phone = this.phone
                    this.phoneVisible = false
                }
            }).catch(res => {});
        },
    }
};
</script>

<style lang="scss" scoped>
.arrowTransform{
    transition: 0.5s;
    transform-origin: center;
    transform: rotateZ(180deg);
}
.arrowTransformReturn{
    transition: 0.5s;
    transform-origin: center;
    transform: rotateZ(0deg);
}
.wrap{
    padding-top: 170px;
    overflow: auto;
    display:flex;
    align-items: center;
    flex-direction:column;
    margin: -20px;
    background: #f6f6f6 url(../../assets/img/person/bg.png) 0 0/100% 500px no-repeat;
    box-sizing: border-box;
}
.header{
    z-index: 2;
    background-color: transparent;
}
.header /deep/.el-upload-list__item-name {
    display: none;
}

.header /deep/.el-icon-upload-success{
    display: none;
}

.header /deep/.el-upload-list__item-status-label{
    display: none;
}
.header /deep/ .el-upload-list{
    display: none;
}

/deep/.el-input__inner{
    height: 32px !important;
}
/deep/.el-select .el-input .el-select__caret{
    line-height: 32px;
}
input:focus {
    outline: 0;
}
.openfile {
    cursor: pointer;
}
.Headtop {
    margin-top: 10px;
    // width: 80px;
    // height: 80px;
    // background: url('../../assets/img/img.jpg');
    // border-radius: 50%;

    .head {
        width: 34px;
        height: 34px;
        background: rgba(255, 255, 255, 1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        position: relative;
        .eee {
            height: 10px;
            width: 16px;
            background-color: rgba(255, 255, 255, 1);
            margin-bottom: -10px;
            position: absolute;
            top: 8px;
            z-index: 2;
        }
        .Semicircle {
            width: 12px;
            height: 12px;
            border: 2px solid #9278ff;
            border-radius: 50px;
            margin-bottom: 10px;
            position: absolute;
        }
    }
    .body {
        color: #9278ff;
        width: 30px;
        height: 20px;
        border: 3px solid #f5f5f5;
        border-radius: 100%;
        margin-top: 5px;
        margin-bottom: -10px;
    }
    .body::after {
        content: '';
        width: 40px;
        height: 30px;
        display: inline-block;
        background-color: #9278ff;
        margin-top: 8px;
        margin-left: -6px;
    }
}

.card {
    width: 1000px;
    margin-top: 10px;
    padding: 60px 100px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1);
    border-radius: 4px;
    position: relative;
    box-sizing: border-box;
    .block-title{
        span{
            display: inline-flex;
            align-items: center;
            color: #444;
            font-size: 18px;
            img{
                width: 20px;
                margin-right: 5px;
            }
        }
        
    }
    .meta-title{
        padding-left: 6px;
        margin: 20px 0 10px 0;
        line-height: 1;
        border-left: 4px solid #9278ff;
        span{
            font-size: 16px;
            color: #9278ff;
        }
        /deep/ .el-button{
            padding: 0 0;
            font-size: 16px;
            color: #9278ff;
        }
    }
    .el-icon-document {
        color: #9278ff;
        font-size: 30px;
    }
    .el-icon-collection {
        color: #9278ff;
        position: absolute;
        left: 31px;
        top: 31px;
        font-size: 30px;
    }
    span {
        color: #333333;
        font-size: 20px;
    }
    .plus{
        display: flex;
        justify-content: space-between;
        i{
            font-size: 22px;
            color: #21d749;
            cursor: pointer;
        }
    }
    .information {
        .archives{
            padding: 15px;
            margin-bottom: 20px;
            border: 1px dashed #c9c9c9;
            border-radius: 8px;
        }
        .line {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .item{
                display: inline-flex;
                align-items: center;
                margin-bottom: 20px;
                span{
                    width: 90px;
                    margin-right: 15px;
                    text-align: right;
                    font-size: 15px;
                    color: #656565;
                    white-space: nowrap;
                }
                .username {
                    background:url('~@/assets/img/person/edit.png') no-repeat 10px center;  
                    background-size: 16px 15px;
                    background-position: 98% 50%;
                    box-sizing: border-box;
                }
                .idnumber {
                    background:url('~@/assets/img/person/idcard.png') no-repeat 10px center;  
                    background-size: 20px 16px;
                    background-position: 98% 50%;
                    box-sizing: border-box;
                }
                .school {
                    background: url('~@/assets/img/person/school.png') no-repeat;
                    background-size: 22px 17px;
                    background-position: 98% 50%;
                    box-sizing: border-box;
                }
                .weChat{
                    background: url('~@/assets/img/person/bind.png') no-repeat;
                    background-size: 19px 18px;
                    background-position: 98% 50%;
                    box-sizing: border-box;
                }
                input {
                    height: 36px;
                    width: 260px;
                    color: #727272;
                    border: 0;
                    border-bottom: 1px solid #b5b5b5;
                    outline: none;
                    padding-left: 15px;
                }
                .read{
                    width: 260px;
                    color: #727272;
                }
                .el-select,.btns{
                    width: 260px;
                }
                .btns{
                    display: inline-flex;
                    align-items: center;
                    border-bottom: 1px solid #b5b5b5;
                    padding: 5px 0;
                }
                .selects{
                    display: inline-flex;
                    align-items: center;
                    width: 260px;
                    .el-select{
                        width: 100px;
                        font-size: 12px;
                        &:first-child{
                            width: 82px;
                        }
                    }
                }
            }
            /deep/.el-date-editor{
                width: 260px;
            }
            /deep/.el-date-editor .el-input__prefix{
                line-height: 32px;
            }
            /deep/.el-input__prefix,/deep/.el-input__suffix{
                left: auto;
                right: 0;
            }
            /deep/.el-input__inner {
                color: #656565;
                font-size: 14px;
                border-radius: 0 !important;
                border: 0px;
                border-bottom: 1px solid #b5b5b5;
            }
            /deep/.el-input--prefix .el-input__inner{
                padding-left: 15px;
            }
            /deep/.el-input__icon {
                color: #9278ff;
                &.el-icon-date{
                    font-size: 14px;
                    &:before{
                        content: "";
                        background: url('~@/assets/img/person/date.png') center center no-repeat;
                        position: absolute;
                        width: 20px;
                        height: 18px;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }
            /deep/.el-icon-arrow-up:before {
                content: "";
                background: url('~@/assets/img/person/select.png') center center no-repeat;
                position: absolute;
                width: 12px;
                height: 7px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
    .fold{
        margin-top: 20px;
        text-align: center;
        i{
            font-size: 22px;
            color: #8e8e8e;
            cursor: pointer;
            &:hover{
                opacity: .8;
            }
        }
    }
    .sexRadio /deep/ .el-radio__input.is-checked .el-radio__inner{
        border-color: #9278ff;
        background: #9278ff;
    }
    .sexRadio /deep/ .el-radio__input.is-checked + .el-radio__label{
        color: #9278ff;
    }
    .sexRadio /deep/ .el-radio__inner:hover{
        border-color: #9278ff;
    }
    /deep/ input::-webkit-input-placeholder {
        color: #c0c0c0;
    }
    /deep/ input::-moz-input-placeholder {
        color: #c0c0c0;
    }
    /deep/ input::-ms-input-placeholder {
        color: #c0c0c0;
    }
}
</style>