<template>
    <!--输入框-->
    <div id="sendBox-skin" class="send-box">
        <emoji-box class="emoji-box" v-model="content" :isShow="showEmoji"></emoji-box>
        <ul class="chat-top-box">
            <li class="btn-emoji" @click="_toggleEmoji" @click.stop></li>
            <li class="btn-uplaod" @click="_uplaod" @click.stop></li>
            <input type="file" style="display: none" ref="file" @change="_uploadImg" accept="image/png,image/jpeg,image/jpg">
            <li class="btn-draw" v-if="drawInfo.id">
                <div class="qrcode">
                    <img :src="`https://console.guangdianyun.tv/qrcode.php?level=L&size=10&text=${slefHref}`">
                    扫码抽奖
                </div>
            </li>
        </ul>
        <template v-if="channelInfo.chatDisable">
            <div class="textarea-box">
                <div class="disabled">全员禁言中</div>
            </div>
        </template>
        <template v-else-if="userInfo.isDisableChat == 1">
            <div class="textarea-box">
                <div class="disabled">你已被禁言</div>
            </div>
        </template>
        
        <template v-else-if="allowChat">
            <div class="textarea-box">
                <textarea id="sendText"  rows="2" maxlength="100" v-model="content" @keyup.enter="_sendChat" :placeholder="chatReplyObj.name || '我也要说点什么'"></textarea>
            </div>
            <div class="send-box">
                <a class="reply" href="javascript:;" @click="_remReply" v-show="chatReplyObj.id !== ''">回复: {{chatReplyObj.name}}</a>
                <button class="send" type="button" @click="_sendChat">发送</button>
            </div>
        </template>
        <template v-else>
            <div class="textarea-box">
                <div class="disabled-login">点击<span class="login" @click="_isDisabled()">登录</span>，参与互动</div>
            </div>
        </template>
    </div>
</template>

<script>
    import {sendChat,sendPhoto} from '@/plugins/API/apiAll'
    import {getLiveDraw} from '@/plugins/API/apiDraw'

    import {mapGetters} from 'vuex'
    import emojiBox from './emoji'

    export default {
        components: {
            emojiBox
        },
        data() {
            return {
                slefHref: '',
                showEmoji: false,
                showMore: false,
                sendDate: 0,
                content: '',
                chatReplyObj: {
                    id: '',
                    name: ''
                },
                menuTabIsDraw: '',
                drawInfo: {},
            }
        },
        computed: {
            ...mapGetters({
                'type': 'type',
                'channelInfo': 'channelInfo',
                'userInfo': 'userInfo',
            }),
            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)
            this.$Bus.$on('bus-drawInfo', this._setDrawInfo)
            this.slefHref = encodeURIComponent(window.location.href);
            this.getLiveDraw();
        },
        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:''};
            },
            _remEnclosure(){
                this.showEmoji = false;
                this.showMore = false;
            },
            _toggleEmoji(){
                if(this._isDisabled()){
                    return false
                }
                this.showEmoji = !this.showEmoji;
                this.showMore = false;
            },
            _uplaod(){
                if(this._isDisabled()){
                    return false
                }
                this.$refs.file.click()
            },
            _uploadImg(e){
                let _this = this;
                let input = e.target;
                if(input.value==''){
                    return false;
                }
                if(input.files && input.files[0]) {
                    let reader = new FileReader();
                    reader.onload = function(evt) {
                        _this._createCanvas(evt.target.result);

                        input.value = ''
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            },
            _createCanvas(src){
                let _this = this;
                let canvas = document.createElement('canvas');
                let cxt = canvas.getContext('2d');
                let img = new Image();
                img.src = src;
                let maxW = window.innerWidth > 300 ? window.innerWidth : 300;
                let maxH = window.innerHeight > 300 ? window.innerHeight : 300;
                img.onload = function() {
                    let w=img.width;
                    let h=img.height;
                    if(w>maxW||h>maxH){
                        let p=w/maxW>h/maxH?w/maxW:h/maxH;
                        w=img.width/p;
                        h=img.height/p;
                        img.width=w;
                        img.height=h;
                    }
                    canvas.width=w;
                    canvas.height=h;
                    cxt.drawImage(img, 0, 0,w,h);
                    let newsrc=canvas.toDataURL("image/jpeg", 0.9);
                    _this._sendPhoto(newsrc);
                }
            },
            async _sendPhoto(src){
                if(!src){
                    return false;
                }
                const res = await sendPhoto({
                    uin: this.channelInfo.uin,
                    channelId: this.channelInfo.id,
                    img: src,
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.$layer.msg('已提交审核，请耐心等待');
                }
            },
            _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;
                }
            },
            _setDrawInfo(info){
                this.drawInfo = info.id ? info : {};
            },
            async getLiveDraw(){
                const res = await getLiveDraw({
                    type: this.type,
                    channelId: this.channelInfo.id
                })
                if (res.code == 200 && res.errorCode == 0) {
                    this._setDrawInfo(res.data);
                }
            },
        },
        beforeDestroy(){
            this.$Bus.$off('bus-remEnclosure', this._remEnclosure)
            this.$Bus.$off('bus-setReply', this._setReply)
            this.$Bus.$off('bus-drawInfo', this._setDrawInfo)
        },
    }
</script>

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

        .emoji-box{
            position: absolute;
            left: 0;
            bottom: 100%;
            width: 100%;
            background-color: #ffffff;
        }
        .chat-top-box{
            height: 30px;
            line-height: 30px;
            background-color: rgba(255,255,255,0.5);
            font-size: 0;

            li{
                position: relative;
                display: inline-block;
                width: 30px;
                height: 100%;
                vertical-align: top;
                text-align: center;
                cursor: pointer;
                font-size: 12px;

                .qrcode{
                    display: none;
                    position: absolute;
                    margin-left: -75px;
                    padding: 5px;
                    width: 150px;
                    height: 170px;
                    line-height: 20px;
                    bottom: 100%;
                    left: 50%;
                    background: #fff;
                    border: 1px solid #BFBFBF;
                    border-radius: 5px;

                    img{
                        width: 100%;
                        display: block;
                    }
                    &:after{
                        content: '';
                        display: block;
                        position: absolute;
                        top: calc(100% - 5px);
                        left: calc(50% - 5px);
                        height: 10px;
                        width: 10px;
                        background: #fff;
                        transform: rotate(45deg);
                        border-right: 1px solid #BFBFBF;
                        border-bottom: 1px solid #BFBFBF;
                    }
                }
                &:before{
                    content: '';
                    display: block;
                    width: 100%;
                    height: 100%;
                }
                &:hover{
                    background: -webkit-linear-gradient(left, #7F6BFE, #49C1F5);

                    .qrcode{
                        display: block;
                    }
                    &.btn-emoji:before{
                        background: url(./img/icon-smiley-2.png) no-repeat center center;
                    }
                    &.btn-uplaod:before{
                        background: url(./img/icon-picture-2.png) no-repeat center center;
                    }
                    &.btn-draw:before{
                        background: url(./img/icon-draw-2.png) no-repeat center center;
                    }
                }
                &.btn-emoji:before{
                    background: url(./img/icon-smiley.png) no-repeat center center;
                }
                &.btn-uplaod:before{
                    background: url(./img/icon-picture.png) no-repeat center center;
                }
                &.btn-draw:before{
                    background: url(./img/icon-draw.png) no-repeat center center;
                }
            }
        }
        .textarea-box{
            position: relative;
            z-index: 200;
            display: block;
            height: calc(100% - 60px);

            textarea{
                height: 100%;
                width: 100%;
                border: 0;
                outline: 0;
                padding: 5px;
                color: #333;
                background-color: transparent;
                resize: none;
            }
            .disabled{
                flex: 1;
                padding: 5px 10px;
                font-size: 14px;
                color: rgb(84, 84, 84);
            }
            .disabled-login{
                flex: 1;
                padding: 5px 10px;
                font-size: 14px;
                color: rgb(84, 84, 84);
                .login{
                    color: #008DF6;
                    cursor: pointer;
                }
            }
        }
        .send-box{
            position: relative;
            height: 30px;
            z-index: 200;

            .reply{
                position: absolute;
                bottom: 5px;
                left: 5px;
                color: #000000;
                font-size: 14px;
                cursor: pointer;
            }
            .send{
                display: block;
                position: absolute;
                right: 5px;
                bottom: 5px;
                padding: 5px 10px;
                min-width: 30px;
                line-height: 1.2;
                font-size: 12px;
                border: 0;
                outline: 0;
                color: #ffffff;
                border-radius: 35px;
                background: -webkit-linear-gradient(left, #7F6BFE, #49C1F5);
                cursor: pointer;
            }
        }
    }
</style>
