<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="brandId">
                    <BrandList
                        @brandChange="brandChange"
                        @brandEmpty="brandEmpty"
                        :brandName="brandName"
                        ref="brand"
                    ></BrandList>
                </el-form-item>
                <el-form-item label="文件名称:" prop="name" class="classify-input">
                    <el-input placeholder="请输入文件名称" v-model="addEditDialogForm.name" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="文件:" prop="file">
                    <el-upload
                        ref="upload"
                        :action="uploadUrl"
                        :on-remove="handlePdfRemove"
                        :on-success="handlePdfSuccess"
                        :on-exceed="handlePdfExceed"
                        :before-upload="beforeUpload"
                        :file-list="fileList"
                        :multiple="false"
                        :limit="1"
                        accept="application/pdf"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <!-- <el-form-item label="文件类型:" prop="dataTable">
                    <el-select placeholder="请选择文件类型" v-model="addEditDialogForm.dataTable">
                        <el-option label="tsg" :value="1"></el-option>
                        <el-option label="品牌资料" :value="2"></el-option>
                        <el-option label="系统资料" :value="3"></el-option>
                    </el-select>
                </el-form-item>-->
                <el-form-item label="资料分类:" prop="catagoryId">
                    <el-select placeholder="请选择资料分类" v-model="addEditDialogForm.catagoryId">
                        <el-option
                            v-for="item in fileCategoryList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </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 { uploadUrl, staticUrl } from '@/config.js';
import BrandList from '@/apps/mobile/components/brandLongSerch/index';
import { addLifeFiles, updateLifeFilesStatus, queryLiftCategorysList } from '@/apps/mobile/api/databank/index';
export default {
    components: {
        BrandList,
    },
    data() {
        return {
            addEditDialogVisible: false,
            addEditDialogTitle: '新增',
            addEditDialogForm: {
                brandId: null,
            },
            submitBtndisabled: false,
            addEditDialogRules: {
                brandId: [
                    {
                        required: true,
                        message: '请选择电梯品牌',
                        trigger: 'blur',
                    },
                ],
                name: [
                    {
                        required: true,
                        message: '请填写文件名称',
                        trigger: 'blur',
                    },
                    {
                        max: 20,
                        message: '长度最大20个字符',
                        trigger: 'blur',
                    },
                ],
                file: [
                    {
                        required: true,
                        message: '请上传文件',
                        trigger: 'blur',
                    },
                ],
                // dataTable: [
                //     {
                //         required: true,
                //         message: '请选择',
                //         trigger: 'change',
                //     },
                // ],
                catagoryId: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                    },
                ],
                statuz: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: ['blur', 'change'],
                    },
                ],
            },
            type: null,
            fileCategoryList: [],
            uploadUrl: uploadUrl,
            fileList: [],
            brandName: '', //品牌名称
            brandId: null,
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let formData = {
                        ...this.addEditDialogForm,
                        dataTable: 2,
                    };
                    delete formData.file;
                    if (this.type === 'add') {
                        let message = '新增成功';
                        addLifeFiles(formData)
                            .then(res => {
                                if (res.statusCode === '1') {
                                    this.completeOperation(message);
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: res.message,
                                    });
                                }
                            })
                            .catch(() => {
                                this.submitBtndisabled = false;
                            });
                    }
                    if (this.type === 'edit') {
                        let message = '修改成功';
                        let data = {
                            id: formData.id,
                            brandId: formData.brandId,
                            name: formData.name,
                            dataTable: formData.dataTable,
                            catagoryId: formData.catagoryId,
                            url: formData.url,
                            statuz: formData.statuz,
                        };
                        updateLifeFilesStatus(data)
                            .then(res => {
                                if (res.statusCode === '1') {
                                    this.completeOperation(message);
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: res.message,
                                    });
                                }
                            })
                            .catch(() => {
                                this.submitBtndisabled = false;
                            });
                    }
                } else {
                    return false;
                }
            });
        },
        handlePdfRemove() {
            this.addEditDialogForm.url = '';
            this.addEditDialogForm.file = null;
        },
        handlePdfSuccess(response) {
            this.addEditDialogForm.url = response.data.pathUrl;
            this.addEditDialogForm.file = true;
            this.$refs['addEditDialogForm'].validateField('file');
        },
        handlePdfExceed() {
            this.$message.warning('只能上传一个文件!');
        },
        beforeUpload(file) {
            let fileType = ['application/pdf'].indexOf(file.type);
            const isLt5M = file.size / 1024 / 1024 < 8;
            if (fileType === -1) {
                this.$message.warning('文件只能是pdf格式!');
            }
            if (!isLt5M) {
                this.$message.warning('文件大小不能超过8MB!');
            }
            return fileType !== -1 && isLt5M;
        },
        brandChange(data) {
            if (data.id) {
                this.$set(this.addEditDialogForm, 'brandId', data.id);
                this.brandId = data.id;
                this.queryFileCategorysList();
            } else {
                this.addEditDialogForm.brandId = null;
                this.addEditDialogForm.catagoryId = null;
                this.fileCategoryList = [];
                this.brandId = null;
            }
            this.$refs['addEditDialogForm'].validateField('brandId');
        },
        brandEmpty() {
            this.addEditDialogForm.brandId = null;
            this.addEditDialogForm.catagoryId = null;
            this.fileCategoryList = [];
            this.brandId = null;
            this.$refs['addEditDialogForm'].validateField('brandId');
        },
        open(type, data) {
            this.type = type;
            if (type === 'edit') {
                this.addEditDialogTitle = '编辑';
                this.brandName = data.brandName;
                this.brandId = data.brandId;
                this.queryFileCategorysList();
                if (data.url) {
                    this.fileList = [
                        {
                            name: data.url,
                            url: data.url,
                            hasBeenUploaded: true,
                            newName: data.url,
                        },
                    ];
                    this.addEditDialogForm = Object.assign({ file: true }, data);
                } else {
                    this.addEditDialogForm = Object.assign({ file: null }, data);
                }
            } else {
                this.addEditDialogTitle = '新增';
                this.addEditDialogForm = { statuz: 1, file: null };
            }
            this.addEditDialogVisible = true;
        },
        close() {
            this.$refs.upload.clearFiles();
            this.fileList = [];
            this.brandName = null;
            this.$refs.brand.reset();
            this.$refs['addEditDialogForm'].resetFields();
            this.addEditDialogVisible = false;
        },
        queryFileCategorysList() {
            let obj = {
                pageNum: 0,
                pageSize: 1000,
                brandId: this.brandId,
                serchTwo: 1,
            };
            queryLiftCategorysList(obj)
                .then(res => {
                    this.fileCategoryList = res.data.records;
                })
                .catch();
        },
        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 {
        width: auto;
    }

    ::v-deep .el-input__inner {
        width: 200px;
    }

    .upload {
        display: inline-block;
    }
}
</style>
