<template>
  <div class="send-box" @click.stop>
    <div class="reply-mask" @click="_remReplay" v-if="chatReplyObj.id"></div>
    <div class="send-wrapper">
      <div class="send-chat" @click.stop="_remEnclosure">
        <div class="user-head" @click.stop="_goMyCenter">
          <i class="icon"></i>
        </div>
        <div class="text-box">
          <div class="disabled" v-if="channelInfo.chatDisable">全员禁言中</div>
          <div class="disabled" v-else-if="userInfo.isDisableChat == 1">
            你已被禁言
          </div>
          <div class="text" v-else-if="allowChat">
            <div class="reply" v-if="chatReplyObj.id">回复</div>
            <input
              type="text"
              maxlength="100"
              v-model="content"
              v-iosfit
              @keyup.enter="_sendChat"
              :placeholder="chatReplyObj.name || '我也要说点什么'"
            />
          </div>
          <div class="login" v-else>
            点击
            <span @click="_isDisabled()">登录</span>
            ，参与互动
          </div>
        </div>
        <div class="emoji" @click.stop="_toggleEmoji"></div>
        <div class="more" v-if="!content.trim()" @click.stop="_toggleMore"></div>
        <div class="send" v-else @click.stop="_sendChat">发送</div>
      </div>
      <keep-alive>
        <emoji-box v-if="showEmoji" v-model="content"></emoji-box>
        <more-box v-if="showMore"></more-box>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import { sendChat } from '@/plugins/API/apiAll';
import { mapGetters } from 'vuex';
import emojiBox from './emoji';
import moreBox from './more';
export default {
  name: 'send-box',
  components: {
    emojiBox,
    moreBox
  },
  data() {
    return {
      showEmoji: false,
      showMore: false,
      sendDate: 0,
      content: '',
      chatReplyObj: {
        id: '',
        name: ''
      }
    };
  },
  computed: {
    ...mapGetters({
      type: 'type',
      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: {
    _goMyCenter() {
      if (!this.userInfo.id) {
        this.$Bus.$emit('bus-showLogin', true);
      } else if (Number(this.$route.query.corpId) === 1421) {
        return false;
      } else {
        window.location.href = this.jumpUrls.center;
      }
    },
    _setReply(obj) {
      if (!this._isDisabled(true)) {
        this.chatReplyObj = { id: obj.id, name: obj.name };
      }
    },
    _remReplay() {
      this.chatReplyObj = { id: '', name: '' };
    },
    _resetChat() {
      this._remReplay();
      this.content = '';
    },
    _isDisabled(type) {
      if (this.userInfo.isDisableChat === 1) {
        this.$layer.msg('你已经被禁言，该功能暂时无法使用');
        return true;
      } else if (this.channelInfo.chatDisable) {
        this._resetChat();
        return true;
      }
      if (!this.allowChat) {
        if (!type) {
          this.$Bus.$emit('bus-showLogin', true);
        }
        return true;
      }
    },
    _toggleEmoji() {
      if (!this._isDisabled()) {
        this.showEmoji = !this.showEmoji;
        this.showMore = false;
      }
    },
    _toggleMore() {
      if (!this._isDisabled()) {
        this.showEmoji = false;
        this.showMore = !this.showMore;
      }
    },
    _remEnclosure() {
      this.showEmoji = false;
      this.showMore = false;
    },
    async _sendChat() {
      if (this._isDisabled()) {
        return false;
      }
      if (new Date().getTime() - this.sendDate <= 3000) {
        this.$layer.msg('您的操作太频繁了');
        return false;
      }
      if (!this.content.trim() || this.content.trim().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.trim()
      });
      if (res.code === 200 && res.errorCode === 0) {
        this._resetChat();
        if (res.data.chatAuthModel === 1) {
          this.$layer.msg('已提交审核，请耐心等待');
        }
      }
    }
  },
  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%;
  background: #fff;
  .reply-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
  }
  .send-wrapper {
    position: relative;
    z-index: 200;
  }
  .send-chat {
    padding: 0 0.08rem;
    height: 0.5rem;
    display: flex;
    align-items: center;
    background: var(--sendBox-bg) no-repeat center center;
    background-size: cover;
    .user-head {
      margin-right: 0.12rem;
      flex: 0 0 auto;
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 100%;
      background: var(--sendBox-icon-bg);
      overflow: hidden;
      cursor: pointer;
      .icon {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--sendBox-icon-user) no-repeat center center;
        background-size: 0.16rem auto;
      }
    }
    .text-box {
      margin-right: 0.12rem;
      flex: 1;
      height: 0.3rem;
      border-radius: 0.3rem;
      color: var(--sebdBox-text-color);
      font-size: 0.12rem;
      overflow: hidden;
      .disabled {
        line-height: 0.3rem;
        padding: 0 0.1rem;
        height: 100%;
        width: 100%;
        background: #ebebe4;
      }
      .text {
        display: flex;
        height: 100%;
        line-height: 0.28rem;
        background-color: var(--sendBox-icon-bg);
        border: 0.02rem solid var(--sendBox-text-border);
        border-radius: 0.3rem;
        overflow: hidden;
        .reply {
          flex: 0 0 auto;
          padding-left: 0.1rem;
          display: block;
          color: var(--main-color);
        }
        input {
          flex: 1;
          display: block;
          padding: 0 0.1rem;
          width: 100%;
          height: 100%;
          border: 0;
          outline: none;
          background: transparent;
          font-size: 0.12rem;
          color: var(--sebdBox-text-color);
          &::-webkit-input-placeholder {
            color: var(--sebdBox-text-color);
          }
        }
      }
      .login {
        padding: 0 0.1rem;
        line-height: 0.28rem;
        background-color: var(--sendBox-icon-bg);
        border: 0.02rem solid var(--sendBox-text-border);
        span {
          color: var(--main-color);
          cursor: pointer;
        }
      }
    }
    .emoji {
      margin-right: 0.12rem;
      flex: 0 0 auto;
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 100%;
      background: var(--sendBox-icon-bg) var(--sendBox-icon-emoji) no-repeat center center;
      background-size: 0.18rem auto;
      cursor: pointer;
    }
    .more {
      flex: 0 0 auto;
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 100%;
      background: var(--sendBox-icon-bg) var(--sendBox-icon-jia) no-repeat center center;
      background-size: 0.16rem auto;
      cursor: pointer;
    }
    .send {
      padding: 0 0.1rem;
      height: 0.28rem;
      line-height: 0.28rem;
      border-radius: 0.05rem;
      background-color: var(--main-color);
      color: #fff;
      font-size: 0.12rem;
    }
  }
}
</style>
