<!--
  @description:采购人-竞价大厅-实时聊天
  @Modifier:gmy
  @routerPath:
  @date:2020/6/16-14:27
-->
<template>
  <div id="scoket-box">
    <div class="scoket-box">
      <!-- 在线企业数-->
      <el-row class="online-num">
        <div class="offer-lowest">
          在线企业数(<span style="color: red">2</span>/<span>5</span>)
        </div>
      </el-row>
      <el-scrollbar class="ente-num">
        <div class="infinite-list-wrapper">
          <ul
            v-infinite-scroll="load"
            class="list"
            infinite-scroll-disabled="disabled"
          >
            <li v-for="(item, index) in onlineData" :key="index" class="list-item">
              <!--  在线 00 -->
              <div v-if="item.onlineType==='00'" class="ente-online-content">
                <span class="ente-online-span ente-span">在线</span>{{ item.onlineNane }}
              </div>
              <!--  离线 01 -->
              <div v-if="item.onlineType==='00'" class="ente-offline-content">
                <span class="ente-offline-span ente-span">离线</span>{{ item.onlineNane }}
              </div>
            </li>
          </ul>
        </div>
      </el-scrollbar>
      <!-- 聊天界面-->
      <el-scrollbar class="ente-chat">
        <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_title">
                <span class="this_user">招标人</span>
                <span class="this_name">{{ item.onlineObj }}</span>
              </div>
              <!--消息内容-->
              <div class="this_content">
                <!-- <span style="padding-right: 12px">*</span> -->
                {{ item.onlineContent }}
              </div>
            </li>
          </ul>
        </div>
      </el-scrollbar>
      <el-scrollbar class="send-message">
        <!-- 发送消息输入内容-->
        <el-row>
          <div class="message_textarea">
            <el-input
              v-model="textarea2"
              :autosize="{ minRows: 4, maxRows: 4}"
              type="textarea"
              clearable
              placeholder="请输入内容"
            />
          </div>
        </el-row>
        <!-- 信息发送按钮-->
        <el-row class="send-btn">
          <div class="send-btn-txt">
            信息发送对象
          </div>
          <div class="send-select">
            <el-select v-model="InfoValue" clearable placeholder="请选择" size="mini" style="width:100%">
              <el-option
                v-for="(item, index) in infoData"
                :key="index"
                :label="item.typename"
                :value="item.typecode"
                style="width:100%"
              />
            </el-select>
          </div>
          <el-button class="send-btn-btn" type="primary">
            发送
          </el-button>
        </el-row>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
/* 公共方法*/
import { procurementBiddingGroupMixin } from '../mixins/procurementBiddingGrounpMixins'
import { procurementBiddingMixins } from '../mixins/procurementBiddingMixins'
export default {
  name: 'ProOfferAgentScoketAddVue',
  mixins: [procurementBiddingGroupMixin, procurementBiddingMixins],
  data() {
    return {
      loading: false,
      textarea2: '', // 发送的消息
      InfoValue: '' // 信息发送对象
    }
  },
  computed: {
  },
  methods: {
    // 模拟动态加载数据
    load() {
      const obj = {
        onlinetime: '2020-06-18 15:35', // 名称
        onlineObj: '对测试1说', // 对谁说
        onlineContent: '是否公开竞价排名是否公开竞价排名' // 对谁说
      }
      console.log(obj)
      this.loading = true
      setTimeout(() => {
        // this.onlineContentData.push(obj)
        this.loading = false
      }, 2000)
    }
  }
}
</script>

<style lang="less" scoped>
  #scoket-box{
    width: 100%;
    height: 100%;
    background:rgba(245,247,249,1);
    // background-color: #FFFFFF;
  }
  .scoket-box{
    width: 100%;
    height: 100%;
    // background-color: #FFFFFF;
  }
  .online-num{
    width: 100%;
    line-height: 56px;
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
    .offer-lowest{
      font-weight: bold;
      line-height: 56px;
    }
  }
  .ente-num {
    width: 100%;
    height: 20%;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    padding: 18px 10px;
    ul{
      li{
        div{
          margin: 0 10px 20px 0;
        }
      }
    }
  }
  .ente-chat{
    width: 100%;
    height: 45%;
    padding: 10px 10px;
    ul{
      li{
        margin: 5px 0;
        .this_time{
          font-size: 12px;
          line-height: 16px;
          color:#B0B0B0;
        }
        .this_title{
          font-size: 12px;
          line-height: 16px;
          .this_user{
            color:#007CCC;
          }
          .this_name{
            color:#666666;
          }
        }
        .this_content{
          padding: 5px;
          line-height: 16px;
          font-size: 12px;
          color: #333333;
          background:rgba(237,240,243,1);
          border-radius:3px;
          height: 50px;
          margin: 10px 49px 10px 0;
        }
        .ente-span{
          margin-right: 10px;
        }
      }
    }
  }
  .sent-btn{
    width:100%;
    padding: 10px 0;
  }
  .send-btn{
    width:100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
      .send-btn-txt{
        width:30%;
        height: 30px;
        line-height: 30px;
        text-align: left;
      }
      .send-select{
        width: 40%;
        height: 30px;
        margin-right: 10px;
      }
      .send-btn-btn{
        width: 25%;
        height: 30px;
        display: inline-block;
      }
  }
  .ente-online-span{
    padding: 5px;
    background-color: #0AAF25;
    color: #FFFFFF;
    border-radius: 5px;
    margin-right: 10px;
  }
  .ente-online-content{
    color: #5B7BEC;
    font-size: 12px;
  }
  .ente-offline-span{
    padding: 5px;
    background-color: #9A9A9A;
    color: #FFFFFF;
    border-radius: 5px;
    margin-right: 10px;
  }
  .ente-offline-content{
    color: #9A9A9A;
    font-size: 12px;
  }
  .send-message{
    padding: 10px;
  }
  .message_textarea{
    border-radius: 3px;
    overflow: hidden;
  }
</style>
