<template>
    <div class="add-edit-dialog-container">
        <el-dialog
            :title="addEditDialogTitle"
            :visible.sync="addEditDialogVisible"
            width="600px"
            :before-close="close"
        >
            <el-form
                :model="addEditDialogForm"
                ref="addEditDialogForm"
                :rules="addEditDialogRules"
                label-width="90px"
            >
                <el-form-item
                    label="手机号:"
                    v-if="type === 'add' "
                    prop="mobile"
                    class="classify-input"
                >
                    <el-input
                        placeholder="请输入"
                        v-model="addEditDialogForm.mobile"
                        class="file-input"
                    ></el-input>
                </el-form-item>
                <el-form-item label="昵称:" prop="name">
                    <el-input placeholder="请输入" v-model="addEditDialogForm.name"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名:" prop="realName">
                    <el-input placeholder="请输入" v-model="addEditDialogForm.realName"></el-input>
                </el-form-item>
                <el-form-item label="擅长品牌:">
                    <multipleBrand
                        ref="brand"
                        :brandsId="addEditDialogForm.proficiencyBrand"
                        @changeBrands="changeBrands"
                    ></multipleBrand>
                </el-form-item>
                <el-form-item label="擅长:" prop="proficiency">
                    <el-input placeholder="请输入" v-model="addEditDialogForm.proficiency"></el-input>
                </el-form-item>
                <el-form-item label="专家标签" prop="platformInvitedFlag">
                    <el-select placeholder="请选择" v-model="addEditDialogForm.platformInvitedFlag">
                        <el-option label="普通专家" :value="1"></el-option>
                        <el-option label="特邀专家" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="服务费:" prop="serviceFee">
                    <el-input placeholder="请输入" v-model="addEditDialogForm.serviceFee"></el-input>
                </el-form-item>
                <el-form-item label="启用状态:" prop="statuz">
                    <el-switch
                        v-model="addEditDialogForm.statuz"
                        active-text="开"
                        inactive-text="关"
                        :active-value="1"
                        :inactive-value="0"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button
                    type="primary"
                    @click="submitForm('addEditDialogForm')"
                    :disabled="submitBtndisabled"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import multipleBrand from '@/apps/mobile/components/multipleBrands';
import { addExpert, updateExpert } from '@/apps/mobile/api/expert/index';
import { validPhoneNumber, validPrice, validWithoutZero } from '@/apps/mobile/utils/validate';
export default {
    components: {
        multipleBrand,
    },
    data() {
        // 正整数校验
        var checkServiceFee = (rule, value, callback) => {
            if (value && !validWithoutZero(value)) {
                callback(new Error('格式不正确'));
            } else {
                callback();
            }
        };
        var checkPhoneNumber = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入手机号码'));
            } else if (!validPhoneNumber(value)) {
                callback(new Error('请输入正确的手机号码'));
            } else {
                callback();
            }
        };
        return {
            addEditDialogVisible: false,
            addEditDialogTitle: '新增',
            addEditDialogForm: {
                statuz: 0,
            },
            submitBtndisabled: false,
            addEditDialogRules: {
                mobile: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur',
                    },
                    {
                        required: true,
                        trigger: 'blur',
                        validator: checkPhoneNumber,
                        message: '请输入正确的手机号码',
                    },
                ],
                realName: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur',
                    },
                    { max: 20, message: '最大长度20个字符', trigger: 'blur' },
                ],
                name: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur',
                    },
                    { max: 20, message: '最大长度20个字符', trigger: 'blur' },
                ],
                proficiencyBrand: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur',
                    },
                ],
                proficiency: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur',
                    },
                    { max: 40, message: '最大长度40个字符', trigger: 'blur' },
                ],
                platformInvitedFlag: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                    },
                ],
                serviceFee: [
                    { required: true, message: '请输入服务费' },
                    { validator: checkServiceFee, message: '请输入正确的服务费', trigger: 'blur' },
                ],
                statuz: [
                    {
                        required: true,
                        message: '请选择启用状态',
                        trigger: 'change',
                    },
                ],
            },
            type: null,
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let formData = {
                        ...this.addEditDialogForm,
                        expertFlag: 1,
                        deleteFlag: 0,
                    };
                    if (this.type === 'add') {
                        formData.proficiencyBrand = formData.proficiencyBrand.join(',') || '';
                        addExpert(formData)
                            .then(res => {
                                if (res.statusCode === '1') {
                                    this.completeOperation(res.message);
                                } else {
                                    this.$message.warning(res.message);
                                }
                            })
                            .catch(() => {
                                this.submitBtndisabled = false;
                            });
                    }
                    if (this.type === 'edit') {
                        console.log(formData);
                        let data = {
                            userId: formData.userId,
                            name: formData.name,
                            realName: formData.realName,
                            proficiency: formData.proficiency,
                            proficiencyBrand: formData.proficiencyBrand ? formData.proficiencyBrand.join(',') : formData.proficiencyBrand,
                            platformInvitedFlag: formData.platformInvitedFlag,
                            serviceFee: formData.serviceFee,
                            statuz: formData.statuz,
                        };
                        console.log(data);
                        updateExpert(data)
                            .then(res => {
                                if (res.statusCode === '1') {
                                    this.completeOperation(res.message);
                                } else {
                                    this.$message.warning(res.message);
                                }
                            })
                            .catch(() => {
                                this.submitBtndisabled = false;
                            });
                    }
                } else {
                    return false;
                }
            });
        },
        open(type, data) {
            console.log(data);
            this.type = type;
            if (type === 'edit') {
                this.addEditDialogTitle = '编辑';
                let formData = { ...data };
                let brands = [];
                if (data.proficiencyBrand) {
                    brands = data.proficiencyBrand.split(',').map(item => {
                        return Number(item);
                    });
                }
                this.$nextTick(() => {
                    formData.proficiencyBrand = brands;
                    this.addEditDialogForm = { ...formData };
                });
                console.log(this.addEditDialogForm);
            } else {
                this.addEditDialogTitle = '新增';
                this.addEditDialogForm = { statuz: 1, proficiencyBrand: [] };
            }
            this.addEditDialogVisible = true;
        },
        close() {
            this.$refs['addEditDialogForm'].resetFields();
            this.addEditDialogVisible = false;
            this.addEditDialogForm = {};
        },
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
        changeBrands(val) {
            console.log(val);
            this.addEditDialogForm.proficiencyBrand = val;
        },
    },
    watch: {
        addEditDialogForm(val) {
            console.log(val);
            this.$nextTick(() => {
                if (val && val.proficiencyBrand && val.proficiencyBrand.length > 0) {
                    this.$refs.brandsId = val.proficiencyBrand;
                    this.$refs.brand.queryAllElevatorBrands();
                }
            });
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    .el-input {
        width: auto;
    }

    ::v-deep .el-input__inner {
        width: 200px;
    }
}
</style>
