<!--
  @description:供应商-竞价大厅-实时聊天
  @Modifier:gmy
  @routerPath:
  @date:2020/6/16-22:35
-->
<template>
  <div class="offer-scoket pt16">
    <!-- 聊天界面-->
    <el-scrollbar ref="myScrollbar" class="ente-chat chat_main_scrollbar scrollbar">
      <div class="infinite-list-wrapper" style="overflow:auto">
        <ul
          v-infinite-scroll="load"
          class="list"
          infinite-scroll-disabled="disabled"
        >
          <li v-for="(item, index) in onlineContentData" :key="index" class="list-item">
            <!--时间-->
            <div class="this_time">
              {{ item.onlinetime }}
            </div>
            <!-- 发消息人-->
            <div class="this_name">
              {{ item.onlineObj }}
            </div>
            <!--消息内容-->
            <div class="this_content">
              <span style="padding-right: 12px">*</span>{{ item.onlineContent }}
            </div>
          </li>
        </ul>
      </div>
    </el-scrollbar>
    <!-- 发送消息输入内容-->
    <el-row type="flex">
      <el-input
        v-model="sendInfo"
        class="MessageInput"
        :autosize="{ minRows: 1, maxRows: 4}"
        type="textarea"
        clearable
        placeholder="请输入内容"
        @keydown.native="handleKeyCode($event)"
      />
      <!-- 信息发送按钮-->
      <el-button class="fr" type="primary" @click="handleSendMessage">
        发送
      </el-button>
    </el-row>
  </div>
</template>

<script>
/* api*/
import { getTime } from '@api/common/tools.js' // 获取服务器时间
/* 公共方法*/
import { procurementBiddingGroupMixin } from '../mixins/procurementBiddingGrounpMixins'
import { procurementBiddingMixins } from '../mixins/procurementBiddingMixins'
export default {
  name: 'ProOfferScoketAddVue',
  mixins: [procurementBiddingGroupMixin, procurementBiddingMixins],
  data() {
    return {
      count: 10,
      loading: false,
      sendInfo: '',
      value: '',
      onlineContentData: [],
      // 发送消息数据
      infoData: {
        onlinetime: '', // 名称
        onlineObj: '对测试1说', // 对谁说
        onlineContent: '' // 内容
      }
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    load() {
      this.loading = true
      setTimeout(() => {
        this.count += 2
        this.loading = false
      }, 2000)
    },
    // 发送消息
    handleSendMessage() {
      // 获取当前时间
      getTime().then(res => {
        this.infoData.onlinetime = res.data.time
        if (this.sendInfo) {
          this.sendNotice()
        }
      }).catch(() => {
      })
    },
    // 回车发送消息
    handleKeyCode(event) {
      if (event.keyCode === 13 && event.ctrlKey) {
        // 这里实现换行
        this.infoData.onlineContent = this.sendInfo + '\n'
      } else if (event.keyCode === 13) {
        this.handleSendMessage() // 发送文本
        event.preventDefault() // 阻止浏览器默认换行操作
        return false
      }
    },
    // 发送消息方法
    sendNotice() {
      const msgContent = {
        onlineContent: this.sendInfo, // 发布消息
        onlinetime: this.infoData.onlinetime, // 发布时间
        onlineObj: '对测试' + (this.count++) + '说'
      }
      this.onlineContentData.push(msgContent) // 发送消息添加到列表
      /* 聊天记录滚动条置底*/
      this.$nextTick(() => {
        this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
      })
      this.sendInfo = '' // 发送成功清空发送区信息
    }
  }
}
</script>

<style lang="less" scoped>
  .scoket-box{
    width:100%;
    height:100%;
  }
  .ente-chat{
    width:100%;
    height: calc(100%/3*2);
    padding: 10px 0;
    ul{
      li{
        margin: 5px 0;
        .this_time,.this_name{
          font-size: 12px;
          color:rgba(176,176,176,1);
        }
        .this_content{
          background:rgba(237,240,243,1);
          border-radius:3px;
          font-size: 12px;
          color: #B4B4B4;
        }
        .ente-span{
          padding-right: 16px;
        }
      }
    }
  }
  .MessageInput{
    height: 30px;
  }
</style>
