<template>
    <el-dialog v-el-drag-dialog title="发送公告" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"
        @open="handleDialogOpen">
        <div class="notice">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input type="textarea" v-model="form.content"></el-input>
                </el-form-item>
                <el-form-item label="附件">
                    <el-upload class="upload-demo" action="" :on-change="handleChange" :on-remove="handleRemove"
                        :file-list="form.fileList" :auto-upload="false" :accept="formatFile">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">支持导入word,pdf,ppt,mlf,xls!!!</div>
                    </el-upload>
                </el-form-item>
                <el-form-item style="text-align: center;">
                    <el-button type="default" @click="handleClose">取消</el-button>
                    <el-button type="success" @click="sendNotice">发送</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>


<script>
import { upLoadFiles } from '../../../api/chat/chatRoom';
import { format_file } from '../../../util/http_util';
import elDragDialog from "@/util/directive/el-dragDialog";
export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                title: '',
                content: '',
                attachment: '',
                messageForm: null
            },
            formatFile: format_file(),
            myStompClient: null,
            currentChatRoom: {},
            analogDataList: [],
        }
    },
    directives: {
        elDragDialog
    },
    props: {
        stompClient: Object,
        currentChatRoomInfo: Object
    },
    methods: {
        handleClose() {
            this.dialogVisible = false;
        },
        showDialog() {
            this.dialogVisible = true;
        },
        handleChange(file, fileList) {
            let fd = new FormData();
            fd.append('file', file.raw);
            upLoadFiles('CHAT', fd).then(res => {
                this.form.attachment = res;
                let type = file.name.split('.')[1];
                if (type == 'png' || type == 'jpg') {
                    this.form.messageForm = 'PICTURE';
                } else if (type == 'mp4') {
                    this.form.messageForm = 'VIDEO';
                } else if (type == 'xlsx' || type == 'xls') {
                    this.form.messageForm = 'EXCEL';
                } else {
                    this.form.messageForm = 'TEXT';
                }

            });
        },
        handleRemove() {
            this.form.fileList = [];
        },
        sendNotice() {
            this.myStompClient.send(`/app/sendToChatRoom/${this.currentChatRoom.id}/${this.currentChatRoom.teamId}`, {}, JSON.stringify(this.form));
            this.form = {
                title: '',
                content: '',
                attachment: '',
                messageForm: null
            };
            this.handleRemove();

        },
        handleDialogOpen() {
            this.myStompClient = this.$props.stompClient;
            this.currentChatRoom = this.$props.currentChatRoomInfo;
        }
    }
}
</script>

<style lang="scss">
.el-dialog {
    padding: 20px;
    box-sizing: border-box;
    background-color: transparent;
    background-image: url(../../../assets/img/home/dialog.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .el-input__inner {
        border: 1px solid #535353 !important;
        box-shadow: 0 0 10px #535353;
    }

    .el-dialog__header {
        text-align: center;

        .el-dialog__headerbtn {
            top: 40px;
        }
    }

    .el-textarea__inner {
        color: white;
        border: 1px solid #535353 !important;
        box-shadow: 0 0 10px #535353;
        background-color: transparent;
    }

    .el-upload-dragger {
        background-color: transparent;
    }

    .el-upload-list__item-name [class^="el-icon"] {
        height: unset !important;
    }
}
</style>