<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" :disabled="!isAddnew"></el-input>
            </el-form-item>
            <el-form-item label="门店" prop="storeName">
                <el-input v-model="clerkInfo.storeName" @focus="callSelector"></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="saveFn">保 存</el-button>
            <el-button type="primary" @click="saveFn(1)" v-if="isAddnew">保存并继续添加</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
        <vue-select-store ref="storeSelector" @handleSelectedList="handleSelectedList" :treeSet="treeSet" selectType="store"></vue-select-store>
    </div>
</template>
<script>
import vueSelectStore from "components/common/vueSelectStore";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
    name: "clerk-info-form",
    props: {
        isAddnew: {
            type: Boolean, // 判断是新增店员还是编辑店员
            default: false
        },
        perId: {
            type: [String, Number],
            default: ""
        }
    },
    components: {
        vueSelectStore
    },
    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("手机号格式不正确"));
                } else {
                    return callback();
                }
            }
        }
        return {
            rules: {
                name: [
                    { required: true, message: "请输入店员姓名", trigger: "blur" },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                phoneNumber: [
                    { required:true, validator: validatePhone, trigger: "blur"}
                ],
                storeName: [{required: true, message: "请选择门店", trigger: "blur"}],
                code: [
                    { required: true, message: "请输入code", trigger: "blur" },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                positionName: [
                    { required: true, message: "请输入店员职位", trigger: "blur" }
                ]
            },
            clerkInfo: {
                storeName: "",
                storeId: "",
                managerMode:false
            },
            treeSet: {
                isSelectPerson: false,
                dialogVisible: false,
                isSingle: true // 是否单选
            }
        };
    },
    methods: {
        saveFn(goahead) {
            let that = this;
            let ok = true;
            this.$refs["clerk_info"].validate((valid) => {
                if (!valid) {
                    ok = false;
                }
            });
            if (ok) {
                that.addEmployee(this.clerkInfo, goahead);
            }
        },
        callSelector() {
            this.treeSet.dialogVisible = true;
        },
        handleSelectedList(list) {
            this.clerkInfo.storeName = list[0].label;
            this.clerkInfo.storeId = list[0].id;
        },
        /**
         * 新增员工
         */
        addEmployee(info, contin) {
            let that = this;
            let params = {
                name: info.name,
                isClerk: 1,
                phoneNumber: info.phoneNumber,
                positionName: info.positionName,
                storeId: info.storeId,
                managerMode: info.managerMode*1,
                code: info.code
            };
            console.log(info, params);
            let url = that.isAddnew ? "/haoban-manage-web/emp/add" : "/haoban-manage-web/emp/update";
            !that.isAddnew && (params.employeeClerkId = that.$route.query.clerkId);
            getRequest(url, params)
            .then(res => {
                if (res.data.errorCode == 1) {
                    that.$message.success({
                        message: "操作成功"
                    });
                    if (contin == 1) {
                        that.clerkInfo  = {
                            name: "",
                            isClerk: 1,
                            phoneNumber: "",
                            positionName: "",
                            storeId: "",
                            managerMode: false,
                            code: ""
                        };
                    } else {
                        window.history.go(-1);
                    }
                } else {
                    that.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                that.$message.error({
                    message: e.message
                });
            });
        },
        cancel() {
            this.$confirm(" 是否确认取消，取消后当前页面信息将丢失 ？", "提示", {
                type: "warning"
            }).then(() => {
                window.history.go(-1);
            }).catch(e => {
                console.log(e);
            });
        },
        getClerkInfo() {
            let ths = this;
            let params = {
                id: !!ths.$route.query.clerkId ? ths.$route.query.clerkId : ths.perId
            };
            getRequest("/haoban-manage-web/emp/findOne", params)
            .then(res => {
                if (res.data.errorCode == 1) {
                    console.log(res, "res info");
                    ths.clerkInfo = res.data.result;
                } else {
                    ths.$message.error({
                        message: res.data.message
                    });
                }
            }).catch(e => {
                ths.$message.error({
                    message: e
                });
            });
        }
    },
    beforeMount() {
        if (!this.isAddnew)
            this.getClerkInfo();
    },
    watch: {
        perId(id, ids) {
            console.log(id, ids);
            this.getClerkInfo(id);
        }
    }
};
</script>
<style lang="scss">
.form-container {
    flex: 1;
    padding: 24px 35px 48px;
    background: #fff;
    .add-clerk-form {
        .el-input {
            width: 380px;
        }
    }
    .btn-box {
        padding-left: 80px;
    }
}
</style>


