<template>
    <!--输入框-->
    <div id="sendBox-skin" class="send-box">
        <div class="reply-mask" @click="_remReply" v-if="chatReplyObj.id"></div>
        <div class="input-bar" @click.stop>
            <ul class="send-chat" @click="_remEnclosure">
                <li class="user-head" @click="_goMyCenter" @click.stop>
                    <img v-if="userInfo.id && userInfo.userHeadImg" width="30" height="30" :src="userInfo.userHeadImg" alt="">
                    <img v-else width="30" height="30" src="./img/icon-user.png" alt="">
                </li>
                <li class="btn-emoji" @click="_toggleEmoji" @click.stop>
                    <img width="30" height="30" src="./img/icon-emoji.png" alt="">
                </li>
                
                <li class="textarea-box" v-if="channelInfo.chatDisable">
                    <div class="disabled">全员禁言中</div>
                </li>
                <li class="textarea-box" v-else-if="userInfo.isDisableChat == 1">
                    <div class="disabled">你已被禁言</div>
                </li>
                <li class="textarea-box" v-else-if="allowChat">
                    <a class="reply" href="javascript:;" v-if="chatReplyObj.id">回复</a>
                    <input type="text" id="sendText" maxlength="100" v-model="content" v-iosfit @keyup.enter="_sendChat" :placeholder="chatReplyObj.name || '我也要说点什么'" >
                </li>
                <li class="textarea-box" v-else>
                    <div class="disabled-login">点击<span class="login" @click="_isDisabled()">登录</span>，参与互动</div>
                </li>
                <li class="btn-send" v-show="content !== ''">
                    <button type="button" @click="_sendChat">发送</button>
                </li>
                <li class="btn-more" v-show="content === ''" @click="_toggleMore" @click.stop>
                    <img width="30" height="30" src="./img/icon-enclosure.png" alt="">
                </li>
            </ul>
            <emoji-box class="emoji-box" v-model="content" :isShow="showEmoji"></emoji-box>
            <more-box class="more-box" :isShow="showMore" :type="type" :corpId="corpId" :channelInfo="channelInfo" :userInfo="userInfo" :jumpUrls="jumpUrls"></more-box>
        </div>
    </div>
</template>

<script>
    import {sendChat} from '@/plugins/API/apiAll'
    import {mapGetters} from 'vuex'
    import QuickStorage from '@/plugins/QuickStorage/index'
    import emojiBox from './emoji'
    import moreBox  from './more'

    export default {
        components: {
            emojiBox,
            moreBox
        },
        data() {
            return {
                showEmoji: false,
                showMore: false,
                sendDate: 0,
                content: '',
                chatReplyObj: {
                    id: '',
                    name: ''
                },
            }
        },
        computed: {
            ...mapGetters({
                'type': 'type',
                'corpId': 'corpId',
                'channelInfo': 'channelInfo',
                'userInfo': 'userInfo',
                'jumpUrls': 'jumpUrls'
            }),
            allowChat(){
                if(!this.userInfo.id && this.channelInfo.chatLogin){
                    return false
                }else{
                    return true;
                }
            },
        },
        mounted(){
            this.$Bus.$on('bus-remEnclosure', this._remEnclosure)
            this.$Bus.$on('bus-setReply', this._setReply)
        },
        methods: {
            //发送聊天
            async _sendChat(){
                if(this._isDisabled()){
                    return false
                }
                if(new Date().getTime() - this.sendDate <= 3000){
                    this.$layer.msg('您的操作太频繁了');
                    return false;
                }
                if(this.content == '' || this.content.length > 100){
                    this.$layer.msg('评论不能为空，且不超过100个字！');
                    return;
                }
                this.sendDate = new Date().getTime();
                const res = await sendChat({
                    uin: this.channelInfo.uin,
                    channelId: this.channelInfo.id,
                    replyId: this.chatReplyObj.id,
                    content: this.content,
                })
                if(res.code == 200 && res.errorCode == 0){
                    this._remReply();
                    this.content = '';
                    if(res.data.chatAuthModel == 1){
                        this.$layer.msg('已提交审核，请耐心等待');
                    }
                }
            },
            _setReply(obj){
                if(this._isDisabled(true)){
                    return false
                }
                this.chatReplyObj = {id:obj.id,name:obj.name};
            },
            _remReply(){
                this.chatReplyObj = {id:'',name:''};
            },
            _goMyCenter(){
                if(!this.userInfo.id){
                    this.$Bus.$emit('bus-showLogin', true);
                }else if( this.corpId == 1421){
                    return false;
                }else{
                    window.location.href = this.jumpUrls.center;
                }
            },
            _remEnclosure(){
                this.showEmoji = false;
                this.showMore = false;
            },
            _toggleEmoji(){
                if(this._isDisabled()){
                    return false
                }
                this.showEmoji = !this.showEmoji;
                this.showMore = false;
            },
            _toggleMore(){
                if(this._isDisabled()){
                    return false
                }
                this.showEmoji = false;
                this.showMore = !this.showMore;
            },
            _isDisabled(type){
                if(this.userInfo.isDisableChat == 1){
                    this.$layer.msg('你已经被禁言，该功能暂时无法使用');
                    return true;
                }else if(this.channelInfo.chatDisable){
                    this._remReply();
                    this.content = '';
                    return true;
                }
                if(!this.allowChat){
                    if(!type){
                        this.$Bus.$emit('bus-showLogin', true);
                    }
                    return true;
                }
            },
        },
        beforeDestroy(){
            this.$Bus.$off('bus-remEnclosure', this._remEnclosure)
            this.$Bus.$off('bus-setReply', this._setReply)
        },
    }
</script>

<style lang="less" scoped>
    .send-box{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        width: 100%;

        .reply-mask{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            background: rgba(0,0,0,0.5);
        }
        .input-bar{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            z-index: 200;
            background: #fff;

            .send-chat{
                display: flex;
                width: 100%;
                height: 50px;
                padding: 5px;

                .user-head, .btn-emoji, .btn-more{
                    flex: 0 0 36px;
                    width: 36px;
                    height: 40px;
                    padding: 5px 3px;

                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
                .textarea-box{
                    display: flex;
                    flex: 1;
                    height: 37px;
                    line-height: 37px;
                    vertical-align: top;
                    border-radius: 5px;
                    border: 1px solid #D7D7D9;
                    margin: 1.5px 3px;
                    font-size: 0;
                    background: #ffffff;
                    overflow: hidden;

                    .reply{
                        flex: 0 0 auto;
                        position: relative;
                        padding: 0 10px;
                        display: inline-block;
                        vertical-align: top;
                        font-size: 14px;
                        color: #008DF6;

                        &:after{
                            content: "";
                            position: absolute;
                            right: 0px;
                            top: 10px;
                            display: block;
                            height: 15px;
                            border-right: 2px solid #D7D7D9;
                        }
                    }
                    input{
                        flex: 1;
                        display: block;
                        padding: 0 10px;
                        vertical-align: top;
                        width: 100%;
                        height: 100%;
                        border: 0;
                        outline: none;
                        font-size: 14px;
                    }
                    .disabled{
                        flex: 1;
                        padding: 0 10px;
                        font-size: 14px;
                        background-color: rgb(235, 235, 228);
                        color: rgb(84, 84, 84);
                    }
                    .disabled-login{
                        flex: 1;
                        padding: 0 10px;
                        font-size: 14px;
                        color: rgb(84, 84, 84);
                        .login{
                            color: #008DF6;
                            cursor: pointer;
                        }
                    }
                }
                .btn-send{
                    flex: 0 0 50px;
                    width: 50px;

                    button{
                        padding: 0 10px;
                        height: 35px;
                        line-height: 34px;
                        border: 0;
                        outline: none;
                        border-radius: 5px;
                        background-color: #008DF6;
                        color: #fff;
                        font-size: 12px;
                        vertical-align: middle;
                        margin-top: 3px;
                    }
                }
            }

        }
    }
</style>
