<template>
    <el-dialog
        :title="title"
        :close-on-click-modal="false"
        :visible.sync="visible"
        :before-close="close"
        width="600px"
    >
        <el-form :model="formData" ref="formData" :rules="rules" label-width="120px">
            <el-form-item label="用户等级名称:" prop="name">
                <el-input
                    v-model="formData.name"
                    :disabled="type === 'edit'"
                ></el-input>
            </el-form-item>
            <el-form-item label="角色编码:" prop="roleCode">
                <el-input
                    placeholder="请输入"
                    v-model.trim="formData.roleCode"
                    :disabled="type === 'edit'"
                ></el-input>
                <!-- <el-input
                    placeholder="请输入"
                    v-model.trim="formData.roleCode"
                    :disabled="type === 'edit' && (formData.roleCode==='EXPERT' || formData.roleCode==='PERSON' || formData.roleCode==='COMPANY')"
                ></el-input>-->
            </el-form-item>
            <el-form-item prop="vipFlag" label="是否收费:">
                <el-switch
                    v-model="formData.vipFlag"
                    active-text="是"
                    inactive-text="否"
                    :active-value="1"
                    :inactive-value="0"
                    :disabled="type === 'edit'"
                ></el-switch>
                <!-- <el-switch
                    v-model="formData.vipFlag"
                    active-text="是"
                    inactive-text="否"
                    :active-value="1"
                    :inactive-value="0"
                    :disabled="type === 'edit' && (formData.roleCode==='EXPERT' || formData.roleCode==='PERSON' || formData.roleCode==='COMPANY')"
                ></el-switch>-->
            </el-form-item>
            <el-form-item label="图片:" prop="file" class="plate-icon">
                <Upload
                    :fileList="fileList"
                    @changeUploadFile="changeUploadFile"
                    @validateUpload="validateUpload"
                    :limitUpload="1"
                    :maximumSize="maximumSize"
                    :uploadType="1"
                    ref="upload"
                ></Upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submitForm" :disabled="submitBtndisabled">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { staticUrl } from '@/config.js';
import Upload from '@/apps/mobile/components/uploadAuto/index';
import { addData, editData } from '@/apps/mobile/api/operation/rule/index';
import { validateCharacter } from '@/apps/mobile/utils/validate';
export default {
    components: {
        Upload,
    },
    data() {
        var checkLetter = (rule, value, callback) => {
            if (value && !validateCharacter(value)) {
                callback(new Error('格式不正确'));
            } else {
                callback();
            }
        };
        return {
            title: '新增',
            type: null,
            formData: {
                vipFlag: 0,
            },
            visible: false,
            submitBtndisabled: false,
            rules: {
                name: [
                    { required: true, message: '请输入用户等级', trigger: 'blur' },
                    { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                ],
                vipFlag: [{ required: true, message: '请选择', trigger: 'change' }],
                file: [
                    {
                        required: true,
                        message: '请上传图片',
                        trigger: 'blur',
                    },
                ],
                roleCode: [
                    { required: true, message: '请选择', trigger: 'change' },
                    { max: 20, message: '长度最大20个字符', trigger: 'blur' },
                    { validator: checkLetter, message: '英文字母或下划线，不能以下划线开头结尾', trigger: 'blur' },
                ],
            },
            fileList: [],
            maximumSize: 3,
        };
    },
    methods: {
        close() {
            this.type = null;
            this.formData = {};
            this.$refs['formData'].resetFields();
            this.$refs.upload.clearFiles();
            this.fileList = [];
            this.visible = false;
        },
        open(type, data) {
            this.type = type;
            if (type === 'edit') {
                this.title = '编辑';
                if (data.image) {
                    this.fileList = [
                        {
                            url: data.image,
                            pathUrl: data.image,
                        },
                    ];
                    this.formData = Object.assign({ file: true }, data);
                } else {
                    this.formData = Object.assign({ file: null }, data);
                }
            } else {
                this.title = '新增';
                this.formData = { vipFlag: 0, file: null };
            }
            this.visible = true;
        },
        submitForm() {
            this.$refs['formData'].validate(valid => {
                if (valid) {
                    let obj = { ...this.formData };
                    let files = this.fileList.map(item => {
                        if (item.response) {
                            return item.response.data.pathUrl;
                        } else {
                            return item.pathUrl;
                        }
                    });
                    delete obj.file;
                    obj.image = files.join(',');
                    if (this.type === 'add') {
                        addData(obj)
                            .then(res => {
                                if (res.statusCode == '1') {
                                    this.completeOperation(res.message);
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: res.message,
                                    });
                                }
                            })
                            .catch(() => {});
                    }
                    if (this.type === 'edit') {
                        let editObj = {
                            id: obj.id,
                            name: obj.name,
                            image: obj.image,
                            vipFlag: obj.vipFlag,
                            roleCode: obj.roleCode,
                        };
                        editData(editObj)
                            .then(res => {
                                if (res.statusCode == '1') {
                                    this.completeOperation(res.message);
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: res.message,
                                    });
                                }
                            })
                            .catch(() => {});
                    }
                }
            });
        },
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
        validateUpload(data) {
            this.changeUploadFile(data.fileList);
            this.formData.file = data.validateValues;
            this.$refs['formData'].validateField('file');
        },
        changeUploadFile(fileList) {
            this.fileList = fileList;
        },
    },
    watch: {
        fileList(val) {
            this.$nextTick(() => {
                this.$refs.upload.changeHideUpload();
            });
        },
    },
};
</script>
<style lang="stylus" scoped>
::v-deep .el-textarea__inner {
    min-height: 200px !important;
}

.el-input {
    width: auto;
}

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