<template>
    <div>
        <div class="scroll">
            <div class="page">
                <h6 class="l-title"><img src="@/assets/img/info1.png" alt=""> 用户信息</h6>
                <div class="page-content">
                    <ul class="list">
                        <div class="line info">
                            <li>
                                <label>姓名：</label>
                                <el-input size="small" v-model="form.userName" clearable></el-input>
                            </li>
                            <li>
                                <label>所在国家：</label>
                                <el-select size="small" v-model="form.countries">
                                    <el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.label"></el-option>
                                </el-select>
                            </li>
                        </div>
                        <div class="line info">
                            <li>
                                <label>性别：</label>
                                <el-select size="small" v-model="form.sex">
                                    <el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"></el-option>
                                </el-select>
                            </li>
                            <li class="selects">
                                <label>所在地：</label>
                                <div class="mul">
                                    <div class="child">
                                        <el-select size="small" v-model="form.countries" placeholder>
                                            <el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.label"></el-option>
                                        </el-select>
                                    </div>
                                    <div class="child">
                                        <el-select size="small" 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>
                                    </div>
                                    <div class="child">
                                        <el-select size="small" 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>
                            </li>
                        </div>
                        <div class="line info">
                            <li>
                                <label>出生年月：</label>
                                <el-date-picker size="small" placeholder="请选择时间" v-model="form.dateBirth" :clearable="false" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                            </li>
                            <li>
                                <label>证件：</label>
                                <el-input size="small" placeholder="请输入证件" v-model="form.idNumber" clearable></el-input>
                            </li>
                        </div>
                        <div class="line info">
                            <li>
                                <label>教育程度：</label>
                                <el-select size="small" 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>
                            </li>
                            <li>
                                <label>当前所在学校：</label>
                                <el-input size="small" placeholder="请输入学校" v-model="form.schoolName" clearable></el-input>
                            </li>
                        </div>
                    </ul>
                </div>
                <div class="flex j-between a-center" style="width: 862px">
                    <h6 class="l-title"><img src="@/assets/img/info2.png" alt=""> 个人档案</h6>
                    <el-button type="text" icon="el-icon-plus" style="margin-left: 16px" @click="addArch">新增</el-button>
                </div>
                <div class="page-content">
                    <div class="archives" v-for="(archive,index) in archivesList" :key="index" v-show="index == 0 || showArch">
                        <ul class="list">
                            <div class="line">
                                <li>
                                    <label>职业：</label>
                                    <el-select size="small" 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>
                                </li>
                                <li>
                                    <label>所在国家：</label>
                                    <el-select size="small" v-model="form.countries" placeholder>
                                        <el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.label" ></el-option>
                                    </el-select>
                                </li>
                            </div>
                            <div class="line">
                                <li>
                                    <label>学校名称：</label>
                                    <el-select size="small" 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>
                                </li>
                                <li>
                                    <label>专业学科：</label>
                                    <el-select size="small" 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>
                                </li>
                            </div>
                            <div class="line" style="margin-bottom: 0">
                                <li>
                                    <label>专业类：</label>
                                    <el-select size="small" 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>
                                </li>
                                <li>
                                    <label>专业：</label>
                                    <el-select size="small" 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>
                                </li>
                            </div>
                        </ul>
                        <img class="del" src="@/assets/img/trash.png" alt="" v-if="index" @click="delArchive(index)">
                    </div>
                    <div class="fold" v-if="archivesList.length > 1">
                        <span :class="{active: showArch}" @click="showArch = !showArch">
                            展开更多
                            <i class="el-icon-arrow-down"></i>
                        </span>
                    </div>
                </div>
            </div>
            <div class="page">
                <h6 class="l-title"><img src="@/assets/img/info3.png" alt=""> 账号信息</h6>
                <div class="page-content">
                    <ul class="list">
                        <div class="line info imp">
                            <li>
                                <label>用户账号：</label>
                                <el-input class="m-r-10" size="small" v-model="form.account" clearable disabled></el-input>
                                <el-button type="text" size="small" @click="openAccount">编辑</el-button>
                            </li>
                            <li>
                                <label>手机号：</label>
                                <el-input class="m-r-10" type="text" size="small" v-model="form.phone" disabled></el-input>
                                <el-button type="text" size="small" @click="bindPhone">更换</el-button>
                            </li>
                        </div>
                        <div class="line info imp">
                            <li>
                                <label>邮箱：</label>
                                <el-input class="m-r-10" size="small" v-model="form.email" disabled></el-input>
                                <el-button v-if="form.email" type="text" size="small" @click="bindEmail">更换</el-button>
                                <el-button v-else type="text" size="small" @click="bindEmail">添加</el-button>
                            </li>
                            <li>
                                <label>密码：</label>
                                <el-input class="m-r-10" size="small" value="xxxxxxxx" disabled></el-input>
                                <el-button type="text" size="small" @click="bindPassword">更换</el-button>
                            </li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="btns">
            <el-button size="small" v-throttle @click="$router.back()">取消</el-button>
            <el-button type="primary" size="small" v-throttle @click="save">更新</el-button>
        </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 style="width: 394px;" placeholder="请输入邮箱" v-model="email"></el-input>
                </el-form-item>
                <el-form-item label="验证码">
                    <div class="flex">
                        <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 size="small" @click="emailVisible = false">取 消</el-button>
                <el-button size="small" 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 style="width: 394px;" placeholder="请输入手机号" v-model="phone" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="验证码">
                    <div class="flex">
                        <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 size="small" @click="phoneVisible = false">取 消</el-button>
                <el-button size="small" 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="82px">
                <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 size="small" @click="passwordVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="editPassword">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改用户账号" :visible.sync="accountVisible" :close-on-click-modal="false" width="30%">
            <el-form label-width="82px">
                <el-form-item label="用户账号">
                    <el-input v-model="account" placeholder="请输入用户账号"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="accountVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="confirmAccount">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapState,mapActions } from 'vuex'
import util from '@/libs/util'
export default {
    data() {
        return {
            form: {
                name:'',
                workNumber:'',
                password:"",
                phone:'',
                email:'',
                provinceName:'',
                cityName:'',
                schoolName:'',
                professionalName:'',
                experimentName:'',
                sex: 1,
                dateBirth: '',
                educationDegree: ''
            },
            emailVisible: false,
            passwordVisible: false,
            phoneVisible: false,
            showArch: false,
            passwordForm: {
                password: '',
                newPassword: '',
                reNewPassword: ''
            },
            sexList: [
                {
                    name: '男',
                    value: 1
                },
                {
                    name: '女',
                    value: 2
                }
            ],
            countryList: [
                {
                    label: '中国'
                }
            ],
            occupationList: [{
                value: 1,
                label: '学生'
            },{
                value: 2,
                label: '老师'
            }],
            provinceList:[],
            cityList: [],
            educationDegreeList: [
                {
                    name: '专科',
                    value: 1
                },
                {
                    name: '本科',
                    value: 2
                },
                {
                    name: '硕士',
                    value: 3
                },
                {
                    name: '博士',
                    value: 4
                },
                {
                    name: '其他',
                    value: 5
                }
            ],
            subjectList: [], //专业学科
            ProfessionalClassList: [], //专业类
            ProfessionalList: [], //专业
            schoolList: [],
            curPassword: '',
            accountRepeat: false,

            archivesList: [],
            archivesForm: {
                personalCareerId: '',
                schoolId: '',
                schoolName: '',
                professionalClassId: '',
                professionalClassName: '',
                disciplineId: '',
                disciplineName: '',
                professionalId: '',
                professionalName: '',
            },
            email: '',
            emailBtnText: '发送验证码',
            emailCode: '',
            emailDisabled: false,
            emailTimer: null,
            phone: '',
            phoneBtnText: '发送验证码',
            phoneCode: '',
            phoneDisabled: false,
            phoneTimer: null,
            updateTime: 0,
            account: '',
            accountVisible: false
        };
    },
    watch: {
        // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
        form: {
            handler(){
                this.updateTime++
                if(this.updateTime > 1) this.$emit('updateStatus',this.updateTime > 1)
            },
            deep:true
        }
    },
    mounted() {
        this.getdata()
        this.getProvince()
        this.getSchoolData()
        this.getSubject()
        if (!this.archivesList.length) this.archivesList = [JSON.parse(JSON.stringify(this.archivesForm))]
    },
    methods: {
        ...mapActions('user', [
            'setAvatar','setUserName'
        ]),
        getdata() {
            this.$get(this.api.queryUserInfoDetails).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
                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.list)
                                }).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.list)
                                }).catch(res => {})
                            }else{
                                this.$set(e, 'ProfessionalList', [])
                            }
                        })
                    }else{
                        this.concatArch()
                    }
                })
            }).catch(err => {})
        },
        getProvince(){
            this.$get(this.api.queryProvince).then(res => {
                this.provinceList = res.list
            }).catch(res => {})
        },
        getCity(id,type){
            this.form.cityId = 1
            this.getCityData()
        },
        getCityData(index){
            let provinceId = this.form.provinceId
            this.$get(this.api.queryCity,{provinceId}).then(res => {
                this.cityList = res.list
            }).catch(res => {})
        },
        getCityName(id,index){
            this.archivesList[index].cityName = this.archivesList[index].cityList[id-1].cityName
        },
        getSchoolName(id,index){
            const school = this.schoolList.find(e => e.schoolId == id)
            if (school) this.archivesList[index].schoolName = school.schoolName
        },
        getSchoolData(){
            this.$get(this.api.querySchool,{schoolName: '',provinceId: this.provinceId,cityId: this.cityId}).then(res => {
                this.schoolList = res.list
            }).catch(res => {})
        },
        accountChange(){
            this.$get(`${this.api.getAccount}?account=${this.form.account}`).then(res => {
                if(res.data.userInfo){
                    this.accountRepeat = true
                    util.warningMsg('该账号已存在')
                }else{
                    this.accountRepeat = false
                }
            }).catch(res => {})
        },
        save() {
            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 util.warningMsg("请输入正确的证件号码");
            let form = this.form;
            let personalFileList = []
            this.archivesList.forEach((n,k) => {
                n.personalCareerId && 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: form.userId
                })
            })
            let data = {
                userId: form.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: form.userId,
                    userName: form.userName,
                    wechatId: form.wechatId
                },
                personalFileList,
            }
            this.$post(this.api.updatePersonCenter,data).then(res => {
                this.setUserName(form.userName);
                this.$message.success('提交成功！')
            }).catch(res => {})
        },
        
        concatArch() {
            this.archivesList = this.archivesList.concat({
                countries: '中国',
                personalCareerId: '',
                schoolId: '',
                schoolName: '',
                subjectList: this.subjectList,
                disciplineId: '',
                disciplineName: '',
                ProfessionalClassList: [],
                professionalClassId: '',
                professionalClassName: '',
                ProfessionalList: [],
                professionalId: '',
                professionalName: '',
                personalFileId: ''
            })
        },
        addArch() {
            let isEmpty = false
            this.archivesList.forEach((n,k) => {
                if(!n.personalCareerId) isEmpty = true
            })
            if(isEmpty) return util.warningMsg('请选择职业')
            this.showArch = true
            this.concatArch()
        },
        delArchive(i) {
            this.$confirm(`此操作不可逆，是否确认删除？`, '提示', {
                type: 'warning'
            }).then(() => {
                const id = this.archivesList[i].personalFileId
                this.archivesList.splice(i, 1)
                id && this.$post(`${this.api.deleteProfile}?personalFileIds=${id}`).then(res => {}).catch(err => {})
            }).catch(() => {})
        },
        bindEmail() {
            this.email = this.form.email
            this.emailVisible = true
        },
        bindPhone() {
            this.phoneVisible = true
        },
        bindPassword() {
            this.passwordVisible = true
        },
        editPassword() {
            if(!this.passwordForm.password) return util.warningMsg('请输入原密码')
            if(!this.passwordForm.newPassword) return util.warningMsg('请输入新密码')
            if(!this.passwordForm.reNewPassword) return util.warningMsg('请确认新密码')
            if(this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return util.warningMsg('请输入6位数以上的密码')
            if(this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return util.warningMsg('输入的新密码不一致，请重新确认')
            if(this.passwordForm.password === this.passwordForm.newPassword) return util.warningMsg('原密码跟新密码不能一致')

            let data = this.passwordForm
            data.accountId = this.form.id
            this.$post(this.api.examinePassword,data).then(res => {
                util.successMsg('更换成功')
                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.list
            }).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 = ''
        },
        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.list
                            e.disciplineName = obj.disciplineName
                        }
                    })
                }).catch(res => {})
            }
        },
        getProfessionalClassData(value){
            this.$get(this.api.queryCourseProfessionalClass, {
                disciplineId: value
            }).then(res => {
                this.ProfessionalClassList = res.list
            }).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 = ''
        },
        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.list
                            e.professionalClassName = obj.professionalClassName
                        }
                    })
                }).catch(res => {})
            }
        },
        getProfessionalData(value){
            this.$get(this.api.queryCourseProfessional,{professionalClassId: value}).then(res => {
                this.ProfessionalList = res.list
            }).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
                    }
                })
            }
        },
        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(){
            this.emailCode = ''
        },
        sendEmailCode(){
            if(!this.email) return util.warningMsg('请输入邮箱')
            if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return util.warningMsg('请输入正确的邮箱')
            let data = {
                userId: this.form.userId,
                email: this.email,
                types: 1
            }
            this.$post(this.api.sendPhoneOrEmailCode,data).then(res => {
                if(res.message.opener){
                    this.emailCountdown()
                this.emailOpener = res.message.opener
                }else{
                    util.errorMsg(res.message)
                }
            }).catch(res => {})
        },
        emailSubmit(){
            if(!this.email) return util.warningMsg('请输入邮箱')
            if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return util.warningMsg('请输入正确的邮箱')
            if(!this.emailCode) return util.warningMsg('请输入验证码')
            let data = {
                userId: this.form.userId,
                email: this.email,
                types: 1,
                code: this.emailCode,
                opener: this.emailOpener
            }
            this.$post(this.api.bindPhoneOrEmail,data).then(res => {
                util.successMsg('绑定成功')
                this.form.email = this.email
                this.emailVisible = false
            }).catch(res => {})
        },
        closePhone(){
            this.phoneCode = ''
        },
        sendPhoneCode(){
            if(!this.phone) return util.warningMsg('请输入手机号')
            if(!/^1[3456789]\d{9}$/.test(this.phone)) return util.warningMsg('请输入正确的手机号')
            let data = {
                userId: this.form.userId,
                phone: this.phone,
                types: 2
            }
            this.$post(this.api.sendPhoneOrEmailCode,data).then(res => {
                if(res.message.opener){
                    this.phoneCountdown()
                    this.phoneOpener = res.message.opener
                }else{
                    util.errorMsg(res.message)
                }
                
            }).catch(res => {})
        },
        phoneSubmit(){
            if(!this.phone) return util.warningMsg('请输入手机号')
            if(!/^1[3456789]\d{9}$/.test(this.phone)) return util.warningMsg('请输入正确的手机号')
            if(!this.phoneCode) return util.warningMsg('请输入验证码')
            let data = {
                userId: this.form.userId,
                phone: this.phone,
                types: 2,
                code: this.phoneCode,
                opener: this.phoneOpener
            }
            this.$post(this.api.bindPhoneOrEmail,data).then(res => {
                util.successMsg('绑定成功')
                this.form.phone = this.phone
                this.phoneVisible = false
            }).catch(res => {})
        },
        openAccount() {
            this.account = this.form.account
            this.accountVisible = true
        },
        confirmAccount() {
            if (this.account) {
                this.form.account = this.account
                this.accountVisible = false
            } else {
                util.errorMsg('请输入账号')
            }
        }
    }
};
</script>

<style lang="scss" scoped>
    .scroll{
        height: calc(100vh - 202px);
        overflow: auto;
    }
    .page{
        margin-bottom: 12px;
        /deep/.el-input__inner{
            border-color: #CACFDB;
        }
        .list{
            .line{
                display: flex;
                margin-bottom: 24px;
                &.info li:not(.selects){
                    width: 30%;
                    .el-input{
                        flex: 1;
                    }
                    &:first-child{
                        margin-right: 16%;
                    }
                }
                &.imp li{
                    width: calc(30% + 36px) !important;
                }
            }
            li{
                display: inline-flex;
                align-items: center;
                &>label{
                    width: 100px;
                    margin-right: 5px;
                    text-align: right;
                    font-size: 14px;
                    color: #4c4c4c;
                }
                .el-input{
                    width: 220px;
                    .el-input__inner{
                        border-color: #CACFDB;
                    }
                }
                .el-select .el-input.is-disabled .el-input__inner{
                    border-color: #ddd;
                }
                .val{
                    margin-right: 15px;
                    color: #606266;
                    font-size: 14px;
                }
                .mul{
                    display: inline-flex;
                    .child{
                        display: inline-flex;
                        width: 132px;
                        margin-right: 10px;
                        &>span{
                            margin-bottom: 5px;
                            font-size: 14px;
                            color: #575757;
                        }
                    }
                }
            }
        }
        .archives{
            position: relative;
            width: 862px;
            padding: 16px 0;
            margin-bottom: 6px;
            border-radius: 4px;
            background-color: #FAFAFA;
            .del{
                position: absolute;
                top: 80px;
                right: 19px;
                cursor: pointer;
            }
            .line {
                justify-content: space-between;
            }
            li{
                margin-right: 60px;
            }
            .el-select{
                flex: 1;
            }
        }
        .fold{
            margin-top: 20px;
            text-align: center;
            font-size: 12px;
            color: #006EFF;
            span{
                cursor: pointer;
                i{
                    transition: .5s;
                }
                &.active i{
                    transform: rotate(180deg);
                }
            }
        }
    }
    .btns{
        width: 100%;
        padding: 12px 0;
        text-align: center;
        background-color: #fff;
        box-shadow: 0px 0px 10px 0px rgba(188, 201, 218, 0.4);
        .el-button{
            width: 80px;
        }
    }
</style>