<template>
    <el-dialog
            :title="currentRow ? '编辑群' : '新建群'"
            :visible.sync="dialogVisible"
            width="400px"
            @open="init"
    >
        <el-form inline :model="form" label-width="90px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="群名称">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="头像">
                        <el-upload
                                action="${uc}/iminterface/updateFile"
                                :auto-upload="false"
                                class="avatar-uploader"
                                :show-file-list="false"
                                :on-change="choseFile"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addQgroup">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {mapState} from "vuex";
    import uc from '@/api/instantMessag.js'

    export default {
        name: "addAndUpdateQgroup",
        props: [ 'currentRow' ],
        data() {
            return {
                dialogVisible: false,
                data: [],
                imageUrl: "",
                form: {
                    name: "",
                    file: null
                },
            }
        },
        computed: {
            ...mapState({
                currentUser: state => state.login.currentUser
            })
        },
        methods: {
            init() {
                this.form.name = this.currentRow?.name;
                this.imageUrl = this.currentRow?.photo;
            },
            addQgroup() {
                const formData = new FormData(),
                    { name, file } = this.form;
                formData.append('file', file )
                formData.append('name', name )
                const text = this.currentRow ? '编辑' : '新建',
                    apiFun = this.currentRow ? 'editFgroupList' : 'addQgroup';
                uc[apiFun](formData).then(res => {
                    if(res.state == true) {
                        this.$message.success(`${text}群成功`);
                        this.$emit('onSuccess')
                    }
                    this.dialogVisible = false
                })
            },
            choseFile(file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.form.file = file.raw;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.includes('image');
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isJPG) {
                    this.$message.error('只能上传图片!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 10MB!');
                }
                return isJPG && isLt2M;
            },
        }
    }
</script>

<style scoped>

</style>