<template>
    <div class="form-container bdr-box">
        <el-form
            ref="clerk_info"
            :model="clerkInfo"
            :rules="rules"
            class="add-clerk-form"
            label-width="80px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="clerkInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phoneNumber">
                <el-input v-model="clerkInfo.phoneNumber"></el-input>
            </el-form-item>
            <el-form-item label="门店">
                <el-input v-model="clerkInfo.storeName"></el-input>
            </el-form-item>
            <el-form-item label="code" prop="code">
                <el-input v-model="clerkInfo.code"></el-input>
            </el-form-item>
            <el-form-item label="职位" prop="positionName">
                <el-input v-model="clerkInfo.positionName"></el-input>
            </el-form-item>
        </el-form>
        <div class="btn-box">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" @click="save(true)">保存并继续添加</el-button>
            <el-button>取消</el-button> 
        </div>
    </div>
</template>
<script>
export default {
    name: "clerk-info-form",
    props: {
        clerkInfo: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        let validatePhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入手机号'));
            } else {
                let reg = /^1[34578]\d{9}$/;
                if (!reg.test(value)) {
                    return callback(new Error("手机号格式不正确"));
                }
            }
        }
        return {
            rules: {
                name: [
                    { required: true, message: "请输入店员姓名", trigger: "blur" },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                phoneNumber: [
                    { required:true, validator: validatePhone, trigger: "blur"}
                ],
                code: [
                    { required: true, message: "请输入code", trigger: "blur" },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                positionName: [
                    { required: true, message: "请输入店员职位", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        save(goahead) {
            this.$refs.clerk_info.validate((valid) => {
                console.log(valid, "valid");
                if (valid) {

                }
            });
        }
    }
};
</script>
<style lang="scss">
.form-container {
    flex: 1;
    padding: 24px 35px 48px;
    background: #fff;
    .el-input {
        width: 380px;
    }
    .btn-box {
        padding-left: 80px;
    }
}
</style>


