<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="会费名称" prop="name">
                    <el-input placeholder="请输入内容" v-model="addEditDialogForm.name"></el-input>
                </el-form-item>
                <el-form-item label="有效期(月)" prop="period">
                    <el-input placeholder="请输入内容" v-model="addEditDialogForm.period"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input placeholder="请输入内容" v-model="addEditDialogForm.price"></el-input>
                </el-form-item>
                <el-form-item label="用户等级" prop="userLevelId">
                    <el-select v-model="addEditDialogForm.userLevelId" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                    <!-- <el-input placeholder="请输入内容" v-model="addEditDialogForm.userLevelId"></el-input> -->
                </el-form-item>
                <!-- <el-form-item prop="examineFlag" label="是否审批:">
                    <el-switch
                        v-model="addEditDialogForm.examineFlag"
                        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 { addMemberFee, updateMemberFee, getVipUserLevel } from '@/apps/mobile/api/memberFee/index';
import { validPositiveInteger, validWithoutZero } from '@/apps/mobile/utils/validate';
export default {
    data() {
        // 正整数校验
        var checkNum = (rule, value, callback) => {
            if (value && !validPositiveInteger(value)) {
                callback(new Error('格式不正确'));
            } else {
                callback();
            }
        };
        // 价格校验
        var checkPrice = (rule, value, callback) => {
            if (value && !validWithoutZero(value)) {
                callback(new Error('格式不正确'));
            } else {
                callback();
            }
        };
        return {
            addEditDialogVisible: false,
            addEditDialogTitle: '新增',
            addEditDialogForm: {},
            submitBtndisabled: false,
            addEditDialogRules: {
                name: [
                    {
                        required: true,
                        message: '请填写会费名称',
                        trigger: 'blur',
                    },
                    { max: 20, message: '长度最大20个字符', trigger: 'blur' },
                ],
                price: [
                    {
                        required: true,
                        message: '请填写价格',
                        trigger: 'blur',
                    },
                    { validator: checkPrice, message: '请输入正确的价格', trigger: 'blur' },
                ],
                period: [
                    {
                        required: true,
                        message: '请填写有效期',
                        trigger: 'blur',
                    },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
                userLevelId: [
                    {
                        required: true,
                        message: '请选择用户等级',
                        trigger: 'change',
                    },
                ],
                // examineFlag: [
                //     {
                //         required: true,
                //         message: '请选择',
                //         trigger: 'change',
                //     },
                // ],
            },
            type: null,
            options: [],
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let formData = {
                        ...this.addEditDialogForm,
                    };
                    if (this.type === 'add') {
                        console.log(formData);
                        addMemberFee(formData)
                            .then(res => {
                                if (res.statusCode === '1') {
                                    this.completeOperation(res.message);
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: res.message,
                                    });
                                    this.close();
                                }
                            })
                            .catch(() => {
                                this.submitBtndisabled = false;
                            });
                    }
                    if (this.type === 'edit') {
                        let data = {
                            id: formData.id,
                            name: formData.name,
                            period: formData.period,
                            price: formData.price,
                            userLevelId: formData.userLevelId,
                        };
                        console.log(data);
                        updateMemberFee(data)
                            .then(res => {
                                if (res.statusCode === '1') {
                                    this.completeOperation(res.message);
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: res.message,
                                    });
                                    this.close();
                                }
                            })
                            .catch(() => {
                                this.submitBtndisabled = false;
                            });
                    }
                } else {
                    return false;
                }
            });
        },
        queryUserLevel() {
            getVipUserLevel()
                .then(res => {
                    this.options = res.data;
                })
                .catch();
        },
        open(type, data) {
            this.type = type;
            this.queryUserLevel();
            if (type === 'edit') {
                this.addEditDialogTitle = '编辑';
                this.addEditDialogForm = { ...data };
            } else {
                this.addEditDialogForm = {};
            }
            this.addEditDialogVisible = true;
        },
        close() {
            this.$refs['addEditDialogForm'].resetFields();
            this.addEditDialogVisible = false;
        },
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    ::v-deep .el-input__inner {
        width: 200px;
    }
}
</style>
