<template>
  <div class="send-box" @click.stop="showD">
    <div class="reply-mask" @click="_remReplay" v-if="chatReplyObj.id"></div>
    <div class="send-wrapper" :style="{pointerEvents: (drainage.drainage_status === 0 || count || !(drainage.drainage_model || []).includes('1')) ? 'all' : 'none'}">
      <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="market" v-if="caseInfo && caseInfo.status">
          <div class="icon" @click.stop="showMarket = !showMarket"></div>
          <showcase @enterMarket="_enterMarket"/>
        </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="sendCountDown === 0 && _sendChat()" :class="sendCountDown === 0 ? '' : 'unable'">
          {{ sendCountDown === 0 ? '发送' : `${sendCountDown}s` }}
        </div>
      </div>
      <keep-alive>
        <transition-group :name="showAni ? 'fade' : 'left'">
          <emoji-box v-if="showEmoji" v-model="content" :key="1"></emoji-box>
          <more-box v-if="showMore" :key="2"></more-box>
        </transition-group>
      </keep-alive>
      <market-frame v-model="showMarket" :marketSrc="marketSrc"/>
    </div>
  </div>
</template>
<script>
import { traffic } from '@/plugins/openTraffic';
import { sendChat } from '@/plugins/API/apiAll';
import { mapGetters } from 'vuex';
import emojiBox from './emoji';
import moreBox from './more';
import showcase from '@/components/showcase/index.vue';
import marketFrame from '@/components/showcase/marketFrame.vue';
export default {
  name: 'send-box',
  components: {
    emojiBox,
    moreBox,
    showcase,
    marketFrame
  },
  data() {
    return {
      showEmoji: false,
      showMore: false,
      showMarket: false,
      sendDate: 0,
      content: '',
      chatReplyObj: {
        id: '',
        name: ''
      },
      count: 0,
      showAni: true,
      marketSrc: '',
      sendCountDown: 0
    };
  },
  computed: {
    ...mapGetters({
      type: 'type',
      channelInfo: 'channelInfo',
      caseInfo: 'caseInfo',
      drainage: 'drainage',
      userInfo: 'userInfo',
      jumpUrls: 'jumpUrls',
      uuid: 'uuid'
    }),
    DEF_SITE() {
      return process.env.DEF_SITE
    },
    allowChat() {
      if (!this.userInfo.id && this.channelInfo.chatLogin) {
        return false;
      } else {
        return true;
      }
    },
    showMoreorEmoji() {
      return this.showMore * 2 + this.showEmoji
    }
  },
  mounted() {
    this.$Bus.$on('bus-remEnclosure', this._remEnclosure);
    this.$Bus.$on('bus-setReply', this._setReply);
  },
  methods: {
    _enterMarket(url) {
      this.marketSrc = url
      this.showMarket = !this.showMarket
    },
    _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() {
      clearInterval(this.sendCountDownTimer)
      this.sendCountDown = 3
      this.sendCountDownTimer = setInterval(() => {
        if (this.sendCountDown === 0) {
          clearInterval(this.sendCountDownTimer)
        } else if (this.sendCountDown > 0) {
          this.sendCountDown--
        }
      }, 1000);
      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;
      }
    },
    showD() {
      const drainage = this.drainage
      if (drainage.drainage_status === 1){
        if (!(drainage.drainage_model || []).includes('1')) {
          return
        }
        // eslint-disable-next-line no-undef 
        !this.count && traffic(drainage)
        drainage.drainage_type !== 0 && this.count++
      }
    },
    _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.$filterXSS(this.content.trim()),
        uuid: this.uuid
      });
      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);
  },
  watch: {
    showMoreorEmoji(newVal, oldVal) {
      this.showAni = newVal === 0 || oldVal === 0
    },
    showMarket(newVal) {
      if (!newVal) {
        this.marketSrc = ''
      }
    }
  }
};
</script>

<style lang="less" scoped>
.fade-enter,.fade-leave-to{
  max-height: 0;
  padding: 0;
}
.fade-enter-to,.fade-leave{
  max-height: 1.5rem;
}

.left-enter,.left-leave-to{
  max-height: 0;
  padding: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all .3s cubic-bezier(0,0,0.58,1);
}
.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;
        border-radius: 0.28rem;
        background-color: var(--sendBox-icon-bg);
        border: 0.02rem solid var(--sendBox-text-border);
        span {
          color: var(--main-color);
          filter: contrast(50%);
          cursor: pointer;
        }
      }
    }
    .emoji,
    .market {
      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;
    }
    .market {
      background: none;
      position: relative;
      .icon {
        width: 100%;
        height: 100%;
        background: var(--sendBox-icon-bg) var(--sendBox-icon-market) no-repeat center center;
        background-size: 0.18rem auto;
        border-radius: 100%;
      }
    }
    .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;
      width: .5rem;
      text-align: center;
      background-color: var(--main-color);
      color: var(--sebdBox-text-color);
      font-size: 0.12rem;
    }
    .unable {
      color:#fff;
      background-color: #999;
    }
  }
}
</style>
