<template>
    <div class="committee_drawer">
        <el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="40%" style="padding-left: 20px">
            <template slot="title">
                <div>工委会管理</div>
            </template>
            <div>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输名称" maxlength="500"/>
                    </el-form-item>
                    <el-form-item label="附件" prop="name">
                        <file-upload v-model="form.fileList" :limit="9" @input="fileInput" />
                    </el-form-item>
                    <el-form-item label="序号" prop="ord">
                        <el-input-number v-model="form.ord" controls-position="right" :min="0" />
                    </el-form-item>
                </el-form>
                <div class="dialog-footer" style="text-align: center;">
                    <el-button type="primary" @click="submitForm">保存</el-button>
                    <el-button @click="doCancel">取 消</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { listCommittee, getCommittee, delCommittee, addCommittee, updateCommittee } from "@/api/base/committee";
export default {
    data() {
        return {
            dataList: [],
            isOpen: false,
            oldData: null,
            form: {
                name: "",
                ord: 0,
                fileList:[],
                files:"",
            },
            rules: {
                name: [{ required: true, message: "请输入名称", trigger: "blur" }],
                files: [{ required: true, message: "请上传附件", trigger: "blur" }],
            }
        };
    },
    mounted() {

    },
    methods: {
        fileInput(files) {           
           
            this.form.files=this.form.fileList.length>0?JSON.stringify(this.form.fileList.map(f=>{
                if(f.fileInfo){
                    return {
                        name:f.original,
                        url:f.url,
                        ext:f.fileInfo.ext
                    }
                }else{
                    if(this.oldData && this.oldData.files){
                        let tmps=this.$tryToJson(this.oldData.files,[]).filter(it=>it.url==f.url);
                        return tmps.length>0?tmps[0]:null;
                    }
                    return null;
                }
            }).filter(f=>f)):"";
        },
        show(it, nextId) {
            this.form.ord = nextId;
            this.oldData = it;
            this.isOpen = true;
            if (it) {
                this.form.name = it.name;
                this.form.ord = it.ord;
                this.form.files=it.files;
                let tmps=it.files;
                if(tmps && tmps.length>0){
                    tmps=this.$tryToJson(tmps,[]);
                    this.form.fileList=tmps.map(f=>{
                        return {
                            name:f.url,
                            url:f.url,                            
                        }
                    });
                }
            } else {
                this.form.name = "";
            }
        },
        doCancel() {
            this.isOpen = false;
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.oldData != null && this.oldData.id) {                        
                        this.oldData.name = this.form.name;
                        this.oldData.ord=this.form.ord;
                        this.oldData.files=this.form.files;
                        updateCommittee(this.oldData).then(d=>{
                            this.$modal.msgSuccess("修改成功");
                            this.isOpen = false;
                            this.$emit("success");
                        });
                    } else {
                        addCommittee(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.isOpen = false;
                            this.$emit("success");
                        });
                    }
                }
            });
        }
    },
};
</script>
<style lang="scss" scoped>
.committee_drawer {
    ::v-deep .el-drawer__header {
        margin-bottom: 0px;
    }

    ::v-deep .el-drawer__body {
        padding: 12px 24px;
    }

    ::v-deep .el-drawer {
        min-width: 800px;
    }
}
</style>