<template>
    <view class="page page--divider">
        <view style="display: none;">{{$store.state.hackUpdate}}</view>
        <load-more status="loading" v-if="initializing" />
        <chat-panel :store-key="storeKey" :thistype="thistype" :atme="atme" :at_msg_id='at_msg_id' @close='atuser1'
            :sending="sending" :sendingdata="sendingdata" :manager="ismanage" :no_add="no_add"
            @click-avatar="openProfile" @setSending='setSending' :boardheight='boardheight' ref="panel" @chooseQuote="setQuote"/>
        <view class="placeholder"></view>
        <v-sender ref='sender' v-if="!initializing" v-model="message" @send="sendTextMessage" :groupid="group.id"
            :isgroup="1" @face="sendVoice" @sendImage="sendImg" @sendVedio="sendVedio" @emoji="sendEmoji"
            :no-speaking="no_speaking" :speaking_tips='speaking_tips'
            :forbid-redpack="group.forbid_redpack==1 && !group.owner && !ismanage?true:false"
            @handleEmotion="handleEmotion" @input="inputMessage" @keyboardheight='keyboardheight'
            @senderheight="set_sheight" :sendtype='type' />
        <GroupUser ref='groupuser' :groupid='group.id' :show='groupshow' @atuser='atuser'></GroupUser>
    </view>

</template>

<script>
    import GroupUser from '../../components/GroupUser.vue';
    import ChatPanel from '../../components/chat-panel.vue'
    import chat from "../../library/chat.js"
    import {
        mapState,
        mapGetters
    } from 'vuex';
    import api from "../../library/index.js"
    import config from "../../config.js"

    export default {
        components: {
            ChatPanel,
            GroupUser
        },
        data() {
            return {
                quoteItem: {},//引用内容
                userid: uni.getStorageSync('access_token'),
                user: uni.getStorageSync('userInfo'),

                group: {},
                message: '',
                initializing: false,
                showPickMoney: '',
                getPick: '',
                pickErrorText: '',
                redpackInfo: {},
                sending: false,
                sendingdata: {},
                ismanage: false,
                no_speaking: false,
                no_add: false,
                sender: [],
                receiver: [],
                boardheight: 0,
                groupshow: 0,
                oldstr: '',
                atusers: {},
                type: '',
                speaking_tips: '',
                atme: 0,
                at_msg_id: 0,
                thistype: '',
                storeKey: ''

            };
        },
        onLoad(opts) {
            //   console.log(opts);
            if (opts.atme > 0) this.atme = opts.atme
            if (opts.msg_id > 0) this.at_msg_id = opts.msg_id

            uni.setNavigationBarTitle({
                title: decodeURI(opts.nickname)
            })

            this.group = opts;

            this.group.id = parseInt(this.group.id);
            this.storeKey = 'G' + this.group.id;

            uni.setStorageSync('cache_key', this.storeKey);
            this.joingroup();
            // console.log(opts);


            this.$socket.on('group_update', (res) => {
                this.getInfo();
                this.getGroupUsers();

            })
            this.sender = uni.getStorageSync('userInfo');
            // #ifdef APP-PLUS
            let currentWebview = this.$mp.page.$getAppWebview();
            currentWebview.setStyle({
                titleNView: {
                    titleText: ''
                },
            })
            // #endif
        },

        onUnload() {

            uni.setStorageSync('cache_key', '');
        },

        onShow() {

            this.getInfo();
            this.getGroupUsers();

        },
        methods: {
            setQuote(item) {
                this.$refs.sender.setQute(item)
                this.quoteItem = item
            },
            // 检测输入值
            inputMessage(e) {
                // console.log(e);
                //console.log(this.oldstr,e);
                if (e.substr(e.length - 1, 1) == '@' && this.oldstr != e && e.length > 0 && e.length > this.oldstr
                    .length) {
                    this.groupshow = 1;
                    uni.hideKeyboard();
                } else {
                    this.groupshow = 0;
                }


                this.oldstr = e;

                this.emotion = e;
            },

            atuser(e) {

                this.groupshow = 0;
                if (e.nickname) {
                    this.$refs.sender.setinputvalue(e.nickname);
                    this.atusers = e;
                }
            },

            atuser1(e) {
                console.log(e);
                if (e.nickname) {

                    this.$refs.sender.setinputvalue('@' + e.nickname);
                    this.atusers = e;

                }
            },

            set_sheight(e) {

                this.$refs.panel.setAutoHeight(e);
            },
            keyboardheight(e) {
                this.boardheight = e;

                this.$refs.panel.setAutoHeight(0);
            },


            setSending(e) {

                this.sending = e;

            },
            group_init(id) {

                var group = uni.getStorageSync('group_' + id);
                if (group.id > 0 && group.id == id) this.group_set(group);
            },

            group_set(group) {
                this.group = group;
                if (group.deny_id == null) group.deny_id = '';
                if (group.manager_id == null) group.manager_id = '';
                if (this.user.status == 1 || (this.user.status == 2 && parseInt(this.user.lock_time) >= Date.parse(
                        new Date()) / 1000)) {
                    this.no_speaking = true;
                    this.speaking_tips = '您的账号已被冻结';
                } else if ((group.no_speaking == 1) && !group.owner && group.manager_id.indexOf(this.userid) <= -1) {
                    this.no_speaking = true;
                    this.speaking_tips = '全体禁言,限群主和管理员可发消息';
                } else if ((group.deny_id.indexOf(this.userid) > -1) && !group.owner && group.manager_id.indexOf(this
                        .userid) <= -1) {
                    this.no_speaking = true;
                    this.speaking_tips = '您已被禁言';
                } else {
                    this.no_speaking = false;
                }


                if (group.manager_id.indexOf(this.userid) > -1 || group.owner) this.ismanage = true;
                else this.ismanage = false;
                if (group.is_owner == 1) var type = 'owner';
                else if (group.is_manager == 1) var type = 'manager';
                else var type = 'user';
                this.thistype = type;


                //    console.log(this.group);
                if ((group.no_add == 1) && this.ismanage == false)
                    this.no_add = true;
                else this.no_add = false;

                uni.setNavigationBarTitle({
                    title: `${group.name}(${group.people_count}人)`
                })

                uni.setStorageSync('group_' + group.id, group);
            },



            getInfo() {
                if (this.group.id > 0) {

                    this.group_init(this.group.id);
                    api.getGroupInfo({
                        group_id: this.group.id,
                        from_id: this.userid,
                    }).then(res => {
                        this.group_set(res.data);
                    })

                }

            },

            handleEmotion(value) {
                //console.log(value);
                this.emotion = value;
                this.type = 'emotion';
            },
            joingroup() {
                let data = {
                    GroupId: this.group.id,
                    type: 'joinGroup'
                }
                this.getGroupUsers()
                this.$socket.send(data);
            },
            getGroupUsers() {

                api.getGroupUsers({
                    group_id: this.group.id,
                    userid: this.userid,
                }).then(res => {

                    uni.setStorageSync(this.group.id + '_group_members', res.data);

                })
            },
            toHtml(str) {
                str = str.replace(/ /g, "&nbsp;");
                str = str.replace(/\n/g, "<br>");
                return str;
            },
            sendImg(e) {
                this.commitMessage('image', e);
            },
            sendVedio(e) {

                this.commitMessage('vedio', e);
            },
            // 发送文本消息
            sendTextMessage() {
                let that = this
                let addStr = '-qute-';
                if(this.quoteItem && this.quoteItem.id) {
                    addStr +='nickname=' + that.quoteItem.sender.nickname + '&content=' + ( that.quoteItem.type == 'emotion'?that.quoteItem.message.content.content:that.quoteItem.message.content) + '&type=' + that.quoteItem.type
                }
                this.emotionInfo = {
                    "type": "emotion",
                    "value": that.quoteItem.id ? (this.emotion + addStr): this.emotion,
                    "content": that.quoteItem.id ? (this.emotion + addStr): this.emotion
                }
                // this.emotionInfo = {
                //     "type": "emotion",
                //     "value": this.emotion,
                //     "content": this.emotion
                // }
                
                if (this.type == "emotion") {
                    this.commitMessage('emotion', this.emotionInfo);
                } else {
                    var msg=this.toHtml(this.message);
                    if(that.quoteItem.id) {
                        // msg += addStr
                        if(that.quoteItem.type == 'text' && that.quoteItem.message.content.type == "remind") {
                            // console.log();
                            let str = that.quoteItem.message.content.content.replace(/<span.*?>|<\/span>/g, "")
                            console.log(str);
                            addStr = '-qute-' + 'nickname=' + that.quoteItem.sender.nickname + '&content=' + str + '&type=text'
                        }else {
                            
                        }
                        msg += addStr
                    }
                    // var msg = this.toHtml(this.message);
                    this.commitMessage('text', msg);
                }
                this.quoteItem = {}
                this.$refs.sender.clearQute()
                // this.commitMessage('text', this.message);
            },
            commitMessage(type, sendData) {


                this.message = '';
                if (type == 'image') {
                    var mid = sendData.mid;
                    sendData = sendData.src;

                } else if (type == 'vedio') {
                    var mid = sendData.mid;
                    //  sendData=sendData.src;

                } else if (type == 'voice') {
                    var mid = sendData.mid;
                } else {
                    var mid = 'm' + Math.random().toString(36).substring(2);
                }
                var atuser = 0;

                if (type == 'text' && parseInt(this.atusers.id) > 0) {

                    if (sendData.indexOf(this.atusers.nickname) > -1) {

                        var content = sendData.replace('@' + this.atusers.nickname, '@{' + this.atusers.id + '}');
                        sendData = {
                            type: 'remind',
                            remind: this.atusers,
                            content: content
                        }

                        this.oldstr = '';
                        this.atusers = {};
                    }

                }
                if (type == 'text' && sendData == '') return false;

                let data = {
                    userid: this.userid,
                    group_id: this.group.id,
                    type: 'group',
                    msgtype: type,
                    content: sendData,
                    mid: mid
                }

                var sendlocal = 0;

                if ((type == 'image' && sendData.indexOf(config.imgUri) <= -1) || (type == 'vedio' && sendData.src
                        .indexOf(config.imgUri) <= -1) || (type == 'voice' && sendData.url.indexOf(config.imgUri) <= -
                    1)) {

                    sendlocal = 1;
                } else {

                    this.$socket.send(data);
                }
                this.type = 'text';
                if (type !== 'image' && type !== 'voice') sendlocal = 1;

                var that = this;
                if (sendlocal == 1) {


                    //    setTimeout(function(){
                    var arr = {};
                    arr.id = that.group.id;
                    arr.cache_key = 'G' + arr.id;
                    arr['self'] = 1;
                    arr['isloading'] = 1;
                    arr['receiver_id'] = 0
                    arr['sender_id'] = that.sender.id;
                    arr['group_id'] = that.group.id;
                    arr['timestamp'] = parseInt(new Date().getTime() / 1000);
                    arr['time'] = '';
                    arr['message'] = {
                        type: type,
                        content: sendData
                    }
                    arr['sender'] = that.sender;
                    arr['receiver'] = that.group;
                    arr['nickname'] = that.sender.nickname;
                    arr['avatar'] = that.sender.avatar;
                    arr['msg_id'] = '';
                    arr['_mid'] = mid;
                    // that.$refs.panel.sendmsg({ data:arr});
                    that.sendingdata = arr;
                    that.sending = true;
                    //   console.log(arr)
                    // that.sendmsg(arr);
                    //  },20,that,mid)

                }

            },
            sendVoice(e) {

                this.commitMessage('voice', e);

            },
            sendEmoji(e) {
                this.commitMessage('face', e)
            },
            openProfile(e) {
                let params = {
                    id: e.id,
                    status: 'friend'
                };
                return this.$jump('friend.detail', params)
            }
        },
        onNavigationBarButtonTap() {
            this.$refs.panel.endVedio();
            this.$jump('group.detail', {
                id: this.group.id,
                'from': 'chat'
            });

        }

    }
   
</script>