<template>
  <div class="send-box">
    <div class="chat-reply" v-if="chatReplyObj.id">
      <span>{{ chatReplyObj.userNick }}:</span>
      <span
        :title="chatReplyObj.filterContent"
        v-html="$options.filters.emojiParse(chatReplyObj.filterContent)"
      ></span>
      <span class="close" @click="_remReplay"></span>
    </div>
    <div class="send-content">
      <div class="disabled" v-if="channelInfo.chatDisable">全员禁言中</div>
      <div class="disabled" v-else-if="userInfo.isDisableChat == 1">
        你已被禁言
      </div>
      <textarea
        class="textarea"
        v-else-if="allowChat"
        maxlength="100"
        v-model="content"
        :placeholder="chatReplyObj.userNick ? `回复${chatReplyObj.userNick}` : '我也要说点什么'"
      ></textarea>
      <div class="login" v-else>
        <span @click="_isDisabled()">登录</span>
        后可参与互动
      </div>
    </div>
    <div class="send-operation">
      <div class="send-img" @click.stop="_uplaod">
        <input
          type="file"
          style="display: none"
          ref="file"
          @change="_uploadImg"
          accept="image/png,image/jpeg,image/jpg"
        />
      </div>
      <div class="send-emoji" @click.stop="_toggleEmoji"></div>
      <div class="send-btn" @click.stop="_sendChat">发送</div>
      <keep-alive>
        <emoji-box v-if="showEmoji" v-model="content"></emoji-box>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { sendChat, sendPhoto } from '@/plugins/API/apiAll';
import { mapGetters } from 'vuex';
import emojiBox from './emoji';
export default {
  name: 'pc-send-box',
  components: {
    emojiBox
  },
  data() {
    return {
      showEmoji: false,
      sendDate: 0,
      content: '',
      chatReplyObj: {
        id: '',
        userNick: '',
        filterContent: ''
      }
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      userInfo: 'userInfo'
    }),
    allowChat() {
      if (!this.userInfo.id && this.channelInfo.chatLogin) {
        return false;
      } else {
        return true;
      }
    }
  },
  mounted() {
    this.$Bus.$on('bus-setReply', this._setReply);
  },
  methods: {
    _setReply(obj) {
      if (!this._isDisabled(true)) {
        this.chatReplyObj = {
          id: obj.id,
          userNick: obj.userNick,
          filterContent: obj.filterContent
        };
      }
    },
    _remReplay() {
      this.chatReplyObj = {
        id: '',
        userNick: '',
        filterContent: ''
      };
    },
    // 发送聊天
    async _sendChat() {
      this.showEmoji = false;
      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.content = '';
        this._remReplay();
        if (res.data.chatAuthModel === 1) {
          this.$layer.msg('已提交审核，请耐心等待');
        }
      }
    },
    _isDisabled() {
      if (this.userInfo.isDisableChat === 1) {
        this.$layer.msg('你已经被禁言，该功能暂时无法使用');
        return true;
      } else if (this.channelInfo.chatDisable) {
        this.content = '';
        return true;
      }
      if (!this.allowChat) {
        this.$Bus.$emit('bus-showLogin', true);
        return true;
      }
    },
    _toggleEmoji() {
      if (this._isDisabled()) {
        return false;
      }
      this.showEmoji = !this.showEmoji;
    },
    _uplaod() {
      if (this._isDisabled()) {
        return false;
      }
      this.$refs.file.click();
    },
    _uploadImg(e) {
      const self = this;
      const input = e.target;
      if (!input.value) {
        return false;
      }
      if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function() {
          self._createCanvas(reader.result);
          input.value = '';
        };
        reader.readAsDataURL(input.files[0]);
      }
    },
    _createCanvas(src) {
      const self = this;
      const canvas = document.createElement('canvas');
      const cxt = canvas.getContext('2d');
      const img = new Image();
      img.src = src;
      const maxW = 400;
      const maxH = 600;
      img.onload = function() {
        let w = img.width;
        let h = img.height;
        if (w > maxW || h > maxH) {
          const 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);
        const newsrc = canvas.toDataURL('image/jpeg', 0.9);
        self._sendPhoto(newsrc);
      };
    },
    async _sendPhoto(src) {
      if (src) {
        const res = await sendPhoto({
          uin: this.channelInfo.uin,
          channelId: this.channelInfo.id,
          img: src
        });
        if (res.code === 200 && res.errorCode === 0) {
          this.$layer.msg('已提交审核，请耐心等待');
        }
      }
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-setReply', this._setReply);
  }
};
</script>
<style lang="less" scoped>
.send-box {
  position: relative;
  padding: 10px;
  height: 100%;
  background: #27282e;
  border-radius: 8px;
  .send-content {
    height: 60px;
    line-height: 60px;
    .disabled {
      text-align: center;
      font-size: 16px;
    }
    .textarea {
      width: 100%;
      height: 100%;
      line-height: 20px;
      background: transparent;
      border: 0;
      font-size: 16px;
      color: #fff;
      outline: none;
      resize: none;
    }
    .login {
      text-align: center;
      font-size: 14px;
      span {
        color: var(--main-color);
        cursor: pointer;
      }
    }
  }
  .send-operation {
    position: relative;
    height: 50px;
    text-align: right;
    .send-img {
      vertical-align: middle;
      margin-right: 12px;
      display: inline-block;
      width: 24px;
      height: 24px;
      background: url(./img/icon-upload.png) no-repeat center center;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .send-emoji {
      vertical-align: middle;
      margin-right: 12px;
      display: inline-block;
      width: 24px;
      height: 24px;
      background: url(./img/icon-emoji.png) no-repeat center center;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .send-btn {
      vertical-align: middle;
      display: inline-block;
      width: 80px;
      height: 36px;
      line-height: 36px;
      background: var(--main-color);
      text-align: center;
      font-size: 18px;
      border-radius: 2px;
      cursor: pointer;
    }
  }
  .chat-reply {
    position: absolute;
    top: -40px;
    left: 0;
    padding: 5px 30px 5px 12px;
    width: 100%;
    height: 35px;
    line-height: 25px;
    background: #27282e;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    ::v-deep {
      .emoji {
        display: inline-block;
        vertical-align: middle;
        width: 24px;
        height: 24px;
      }
    }
    .close {
      position: absolute;
      right: 10px;
      top: 5px;
      width: 25px;
      height: 25px;
      background: url(./img/icon-close.png) no-repeat center center / 60% auto;
      cursor: pointer;
    }
  }
}
</style>
