<template>
    <el-form
        :model="formData"
        :rules="rules"
        ref="form"
        label-width="110px"
        label-position="right"
        size="small"
        style="max-width: 620px;"
        inline
        class="input1"
    >
        <el-form-item prop="name" label="姓名">
            <el-input @change="changeForm" v-model="formData.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="jobTitle" label="职务">
            <el-input @change="changeForm" v-model="formData.jobTitle" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="电话">
            <el-input @change="changeForm" v-model="formData.phone" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
            <el-input @change="changeForm" v-model="formData.email" placeholder="请输入"></el-input>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    name: 'DockingEdit',
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            saving: false,
            formData: {},
            rules: {
                phone: [
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }
                ],
                email: [
                    {
                        type: 'email',
                        message: '请输入正确的邮箱地址',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.formData = { ...this.info };
        });
    },
    methods: {
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            let data = { ...this.formData };

            this.saving = true;
            this.$http
                .post('/docking/save', data, { body: 'json' })
                .then(res => {
                    this.saving = false;
                    this.$message.success('成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
                .then(() => {
                    return this.$http.post(`/docking/del/${this.formData.id}`);
                })
                .then(() => {
                    this.$message.success('删除成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    if (e !== 'cancel') {
                        console.log(e);
                        this.$message.error((e || {}).error || '删除失败');
                    }
                });
        },
        changeForm() {
            console.log(this.formData);
            this.$emit('update:info', this.formData);
        }
    }
};
</script>
<style lang="less" scoped></style>
