<!--
  @description: 发送消息组件
  @Modifier: haoFx
  @routerPath:
  @date: 2020-4-28-15:17
-->
<template>
  <div class="el-dialog-msg-wrap">
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :modal="false"
      custom-class="el-dialog-msg"
      title="通知消息"
      width="100%"
    >
      <div class="mb10">
        <div class="chat-main">
          <el-scrollbar ref="myScrollbar" class="chat_main_scrollbar scrollbar">
            <ul class="chatContainer">
              <li v-for="(item,index) in msgList" :key="index">
                <div class="chat-mine">
                  {{ item.time }}
                </div>
                <div class="chat-text">
                  {{ item.noticeContent }}
                </div>
              </li>
            </ul>
          </el-scrollbar>
        </div>
        <el-input
          v-model="msgContent.noticeContent"
          :autosize="{ minRows: 4, maxRows: 4}"
          type="textarea"
          @keydown.native="handleKeyCode($event)"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="emptyMessage">清 空</el-button>
        <el-dropdown split-button type="primary" @click="handleSendMessage">
          发 送
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <i class="el-icon-check" />
              按Enter键发送消息
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/* api*/
import { getTime } from '@api/common/tools.js' // 获取服务器时间
import { sendBidOpeningNotice } from '@api/bidding/bidOpening'
/* 公用方法*/
import { bidOpeningMixin } from '../mixins/bidOpeningMixin'
export default {
  name: 'MsgWriter',
  mixins: [bidOpeningMixin],
  data() {
    return {
      dialogVisible: false,
      // 发送消息列表
      msgList: [],
      // 待发送信息
      msgContent: {
        noticeContent: '', // 发布内容
        openStageType: '', // 00一次开标阶段，01非价格开标阶段，02价格开标阶段
        stageId: '', // 阶段id
        stageIds: '', // 阶段id集合
        stageType: '', // 00预审 01后审
        tenderNoNumber: ''
      },
      time: '' // 当前时间
    }
  },
  methods: {
    openMsgDialog(stageIds) {
      this.dialogVisible = true
      // 分包项目进入会传stageIds  取当前开标中的stageIds集合 否则取不分包的stageId
      this.msgContent.stageIds = stageIds || this.openTypeStageIds.stageIds
    },
    // 清空
    emptyMessage() {
      this.msgContent.noticeContent = ''
    },
    // 发送消息
    handleSendMessage() {
      // 获取当前时间
      getTime().then(res => {
        this.time = res.data.time // 发布时间
        // 输入通知则发送
        if (this.msgContent.noticeContent) {
          this.sendNotice()
        }
      }).catch(() => {
      })
    },
    // 发布通知
    sendNotice() {
      const params = {
        ...this.msgContent,
        openStageType: this.openTypeStageIds.openStageType
      }
      sendBidOpeningNotice(params).then(res => {
        const msgContent = {
          noticeContent: this.msgContent.noticeContent, // 发布消息
          time: this.time // 发布时间
        }
        this.msgList.push(msgContent) // 发送消息添加到列表
        /* 聊天记录滚动条置底*/
        this.$nextTick(() => {
          this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
        })
        this.msgContent.noticeContent = '' // 发送成功清空发送区信息
      }).catch(() => {
      })
    },
    // 回车发送消息
    handleKeyCode(event) {
      if (event.keyCode === 13 && event.ctrlKey) {
        // 这里实现换行
        this.msgContent.noticeContent = this.msgContent.noticeContent + '\n'
      } else if (event.keyCode === 13) {
        this.handleSendMessage() // 发送文本
        event.preventDefault() // 阻止浏览器默认换行操作
        return false
      }
    }
  }
}
</script>

<style scoped lang="less">
  .chat_main_scrollbar{
    height: 100px;
  }
  .el-dialog-msg{
    .chat-main{
      margin-bottom: 8px;
      min-height: 100px;
      .chat-mine{
        color: blue;
        font-size: 12px;
      }
      .chat-text{
        color: red;
      }
    }
  }
</style>
