<template>
    <el-dialog
        title="编辑资料"
        :visible.sync="visible"
        width="500px"
        top="15px"
        :before-close="handleClose"
    >
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
            <el-form-item label="姓名：" prop="REALNAME">
                <el-input v-model="form.REALNAME" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别：" prop="GENDER">
                <el-select v-model="form.GENDER" placeholder="性别" style="width: 100%">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机号码：" prop="MOBILE">
                <el-input v-model="form.MOBILE" placeholder="手机号码" disabled></el-input>
                <p style="font-size: 12px; color: #909399">修改手机号请移步至移动端</p>
            </el-form-item>
            <el-form-item label="出生日期：" prop="BIRTHDAY">
                <el-date-picker
                    v-model="form.BIRTHDAY"
                    type="date"
                    placeholder="出生日期"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="邮箱地址：" prop="EMAIL">
                <el-input v-model="form.EMAIL" placeholder="邮箱地址"></el-input>
            </el-form-item>
            <el-form-item label="QQ号码：" prop="QICQ">
                <el-input v-model="form.QICQ" placeholder="QQ号码"></el-input>
            </el-form-item>
            <el-form-item label="家庭地址：" prop="HOMEADDRESS">
                <el-input v-model="form.HOMEADDRESS" type="textarea" :rows="3" placeholder="家庭地址"></el-input>
            </el-form-item>
            <!-- <el-form-item label="微信解绑：">
                <div>
                    <span class="tx-danger">未绑定</span>
                </div>
            </el-form-item>
            <el-form-item label="扫码登录绑定：" prop="codeBind">
                <div>
                    <span class="tx-success">已绑定</span>&nbsp;&nbsp;
                    <el-checkbox v-model="form.codeBind">备选项</el-checkbox>
                </div>
            </el-form-item>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" :loading="confrimLoading" @click="handleConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'EditDialog',
    props: {
        visible: Boolean,
        userInfo: Object
    },
    data () {
        return {
            form: {
                REALNAME: '',
                GENDER: '',
                MOBILE: '',
                BIRTHDAY: '',
                QICQ: '',
                EMAIL: '',
                HOMEADDRESS: '',
                MyProperty: '',
                COMPANYNAME: '',
                TITLE: '',
                DUTY: '',
                Photo: ''
            },
            rules: {
                REALNAME: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                GENDER: [{ required: true, message: '请选择性别', trigger: 'change' }]
            },
            confrimLoading: false
        }
    },
    watch: {
        visible (newVal) {
            if (newVal) {
                const { form, userInfo } = this
                for (let key in userInfo) {
                    form[key] = userInfo[key]
                }
            }
        }
    },
    methods: {
        handleClose () {
            this.$refs.form.resetFields()
            this.$emit('update:visible', false)
        },
        handleConfirm () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.confrimLoading = true
                    const { form } = this
                    this.$api.commonApi.UpdateTeacherSelfInfo({ ...form }).then(res => {
                        this.$handleResponse(res).then(() => {
                            this.$message({
                                type: 'success',
                                message: '更新成功'
                            })
                            this.$refs.form.resetFields()
                            this.$emit('update')
                        })
                    }).finally(() => {
                        this.confrimLoading = false
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped></style>
