<template>
    <div>
        <div class="page">
            <div class="tabs">
                <a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{item}}</a>
            </div>
            <div class="page-content">
                <div v-if="active == 'first'">
                    <el-form>
                        <ul class="list">
                            <li>
                                <label>头像</label>
                                <div class="avatar-wrap">
                                    <img :src="this.$store.state.avatar" class="avatar" />
                                    <el-upload :action="this.api.uploadUserAvatars" :data="{userId:this.userId}" name="file" :limit="3" :on-success="getRes">
                                        <el-button size="small"><img src="../assets/img/upload.png" alt=""> 上传头像</el-button>
                                    </el-upload>
                                </div>
                            </li>
                            <li>
                                <label>姓名</label>
                                <div>
                                    <el-input v-model="personalInformation.userName" clearable></el-input>
                                </div>
                            </li>
                            <li>
                                <label>性别</label>
                                <div>
                                    <el-select v-model="personalInformation.sex">
                                        <el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"></el-option>
                                    </el-select>
                                </div>
                            </li>
                            <li>
                                <label>所在国家</label>
                                <div>
                                    <el-select
                                        v-model="personalInformation.countries"
                                        placeholder
                                    >
                                        <el-option
                                            v-for="item in countryList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </div>
                            </li>
                            <li>
                                <label>所在省份</label>
                                <div>
                                    <el-select
                                        v-model="personalInformation.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>
                            </li>
                            <li>
                                <label>所在省市</label>
                                <div>
                                    <el-select
                                        v-model="personalInformation.cityId"
                                        placeholder
                                        :disabled="personalInformation.provinceId ? false : true"
                                    >
                                        <el-option
                                            v-for="item in cityList"
                                            :key="item.cityId"
                                            :label="item.cityName"
                                            :value="item.cityId"
                                        ></el-option>
                                    </el-select>
                                </div>
                            </li>
                            <li>
                                <label>出生年月日</label>
                                <div>
                                    <el-date-picker
                                        v-model="personalInformation.dateBirth"
                                        :clearable="false"
                                        class="block-right"
                                        type="date">
                                    </el-date-picker>
                                </div>
                            </li>
                            <li>
                                <label>证件</label>
                                <div>
                                    <el-input v-model="personalInformation.idnumber" clearable></el-input>
                                </div>
                            </li>
                            <li>
                                <label>教育程度</label>
                                <div>
                                    <el-select
                                        v-model="personalInformation.educationDegree"
                                        placeholder="请选择教育程度"
                                    >
                                        <el-option
                                            v-for="(item,index) in educationDegreeList"
                                            :key="index"
                                            :label="item.name"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </div>
                            </li>
                        </ul>
                    </el-form>
                </div>
                <div v-else>
                    <ul class="list">
                        <li>
                            <label>用户账号</label>
                            <div>
                                <el-input v-model="personalInformation.account" clearable></el-input>
                            </div>
                        </li>
                        <li>
                            <label>手机号</label>
                            <div>
                                <el-input v-model="personalInformation.phone" clearable></el-input>
                            </div>
                        </li>
                        <li>
                            <label>邮箱</label>
                            <div>
                                <el-input v-model="personalInformation.email" clearable></el-input>
                            </div>
                        </li>
                        <li>
                            <label>密码</label>
                            <div>
                                <el-button size="small" @click="bindPassword">更换密码</el-button>
                            </div>
                        </li>
                    </ul>
                </div>
                <div style="margin-top: 32px">
                    <el-button type="primary" size="small" v-throttle @click="save">更新</el-button>
                </div>
            </div>
        </div>

        <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>
import _ from 'lodash';
import bus from '@/libs/bus'
export default {
    data() {
        return {
            active: 'first',
            tabs: {
                first: '用户信息',
                second: '账号信息'
            },
            userId: this.$store.state.userId,
            personalInformation: {
                name:'',
                workNumber:'',
                password:"",
                phone:'',
                email:'',
                provinceName:'',
                cityName:'',
                schoolName:'',
                professionalName:'',
            },
            passwordVisible: false,
            passwordForm: {
                password: '',
                newPassword: '',
                reNewPassword: ''
            },
            sexList: [
                {
                    name: '男',
                    value: 1
                },
                {
                    name: '女',
                    value: 2
                }
            ],
            countryList: [
                {
                    label: '中国'
                }
            ],
            form: {},
            provinceList: this.$store.state.provinceList, //省份
            cityList: [], //城市
            // 教育程度
            educationDegreeList: [
                {
                    name: '专科',
                    value: 1
                },
                {
                    name: '本科',
                    value: 2
                },
                {
                    name: '硕士',
                    value: 3
                },
                {
                    name: '博士',
                    value: 4
                },
                {
                    name: '其他',
                    value: 5
                }
            ],
            schoolList: [],
            curPassword: '',
            accountRepeat: false
        };
    },
    mounted() {
        bus.$emit('setBg','course')
        this.getdata();
        this.getProvince()
        this.getSchoolData()
    },
    methods: {
        tabChange(index){
            this.active = index
        },
        getProvince(){
            this.$get(this.api.queryProvince).then(res => {
                this.provinceList = res.data.list
                this.$store.commit("provinceData", { provinceList : this.provinceList});
            }).catch(res => {});
        },
        // 获取城市
        getCity(){
            this.personalInformation.cityId = 1
            this.getCityData()
        },
        getCityData(){
            console.log(33,this.personalInformation.provinceId)
            let provinceId = this.personalInformation.provinceId
            this.$get(this.api.queryCity,{provinceId}).then(res => {
                this.cityList = res.data.list
            }).catch(res => {});
        },
        // 获取学校名称
        getSchoolData(){
            let data = {
                searchContent: '',
                provinceId: '',
                cityId: ''
            }
            this.$get(`${this.api.queryClient}/1/1000`,data).then(res => {
                this.schoolList = res.data.list
            }).catch(res => {});
        },
        accountChange(){
            this.$get(`${this.api.getAccount}?account=${this.form.account}`).then(res => {
                if(res.data.userInfo){
                    this.accountRepeat = true
                    this.$message.warning('该账号已存在')
                }else{
                    this.accountRepeat = false
                }
            }).catch(res => {});
        },
        //取得头像地址
        getRes(res) {
            this.$store.commit('setAvatarData',{avatar:res.message})
            bus.$emit('updateAvatar',res.message)
            let data = {
                userId: this.userId,
                userAvatars: res.message
            }
            this.$post(this.api.userinfoUpdate,data).then(res => {}).catch(res => {})
        },
        uploadHeadImg: function() {
            this.$el.querySelector('.hiddenInput').click();
        },
        getdata() {
            this.$get(`${this.api.userinfo}?userId=${this.userId}`)
                .then(res => {
                    this.personalInformation = res.data.userInfo
                    this.personalInformation.countries = '中国'
                    this.curPassword = this.personalInformation.password
                    this.$nextTick(() => {
                        if(this.personalInformation.provinceId){
                            this.getCityData()
                        }
                    })
                })
                .catch(err => {
                    console.log(err);
                });
        },
        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.curPassword === this.passwordForm.newPassword) return this.$message.warning('原密码跟新密码不能一致')

            let data = {
                userId: this.personalInformation.userId,
                password: this.passwordForm.password
            }
            this.$post(this.api.userinfoUpdate,data)
            .then(res => {
                if(res.success){
                    this.$message.success('更换成功')
                    this.curPassword = this.passwordForm.newPassword
                    this.passwordVisible = false
                }else{
                    this.$message.error('更换失败')
                }
            })
            .catch(err => {
                console.log(err);
            });
        },
        closePassword() {
            this.passwordForm = {
                password: '',
                newPassword: '',
                reNewPassword: ''
            }
        },
        save() {
            if(this.personalInformation.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.personalInformation.idnumber)) return this.$message.warning('请输入正确的证件号码')
            if(this.accountRepeat) return this.$message.warning('该账号已存在')
            if(this.personalInformation.phone && !/^1[3456789]\d{9}$/.test(this.personalInformation.phone)) return this.$message.warning('请输入正确的手机号')
            if(this.personalInformation.email && !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.personalInformation.email)) return this.$message.warning('请输入正确的邮箱')
            this.personalInformation.clientName = this.schoolList.find(n => n.id == this.personalInformation.clientId).clientName
            let personalInformation = this.personalInformation
            let userInfoEntity = {
                idnumber: personalInformation.idnumber,
                account: personalInformation.account,
                cityId: personalInformation.cityId,
                countries: personalInformation.countries,
                dateBirth: personalInformation.dateBirth,
                educationDegree: personalInformation.educationDegree,
                email: personalInformation.email,
                phone: personalInformation.phone,
                provinceId: personalInformation.provinceId,
                clientId: personalInformation.clientId,
                clientName: personalInformation.clientName,
                sex: personalInformation.sex,
                userId: personalInformation.userId,
                userName: personalInformation.userName,
            }
            let data = userInfoEntity
            this.$post(this.api.userinfoUpdate,data).then(res => {
                if(res.success){
                    this.$message.success('提交成功')
                    this.$router.back()
                }else{
                    this.$message.error('提交失败')
                }
            }).catch(res => {})
        }
    }
};
</script>

<style lang="scss" scoped>
    /deep/.page{
        width: 70%;
        margin: 50px auto 20px;
        .page-content{
            padding-top: 0;
            .list{
                li{
                    display: flex;
                    align-items: center;
                    padding: 16px 0;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
                    label{
                        width: 180px;
                        color: rgba(0, 0, 0, 0.85);
                        font-size: 16px;
                    }
                    .avatar-wrap{
                        display: inline-flex;
                        align-items: center;
                        .avatar{
                            width: 64px;
                            height: 64px;
                            margin-right: 24px;
                            border-radius: 100%;
                        }
                    }
                    .el-input{
                        width: 320px;
                    }
                }
            }
        }
    }
</style>