<template>
  <div class="app-container" style="background-color:#e6e6e6;">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="box_l">
          <div
            class="user_item"
            v-for="item in 15"
            :key="item"
            @click="active(item)"
            :class="activeId === item ? 'active' : ''"
          >
            <div class="user_item_l">
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              <div class="info">
                <div class="phone">15679846126</div>
                <div class="company">科大讯飞股份有限公司</div>
              </div>
            </div>
            <div class="user_item_r">
              14:19
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="box_r">
          <div class="box" v-if="!activeId">
            <div class="famous-box">
              <img src="~@/assets/image/chat.png" width="300" />
              <p>
                不是井里没有水，而是你挖的不够深<br />
                不是成功来得慢，而是你努力的不够多<br />
                加油吧！ ......
              </p>
            </div>
          </div>
          <div class="box" v-else>
            <div id="content" class="content">
              <div v-for="(item, index) in info" :key="index">
                <div class="info_r info_default" v-if="item.type == 'leftinfo'">
                  <span class="circle circle_r"></span>
                  <div class="con_r con_text">
                    <div>{{ item.content }}</div>
                    <div v-for="(item2, index) in item.question" :key="index">
                      <div class="con_que">
                        <div class="czkj-question-msg">
                          {{ item2.index }}
                          {{ item2.content }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="time_r">{{ item.time }}</div>
                </div>

                <div class="info_l" v-if="item.type == 'rightinfo'">
                  <div class="con_r con_text">
                    <span class="con_l">{{ item.content }}</span>
                    <span class="circle circle_l">
                      <img src class="pic_l" />
                    </span>
                  </div>
                  <div class="time_l">{{ item.time }}</div>
                </div>
              </div>
            </div>

            <div class="setproblem">
              <textarea
                placeholder="请输入"
                style="height: 100%;width: 100%;resize:none;padding-right:125px;outline: none;border-color:#ccc;border-radius:5px;"
                id="text"
                v-model="customerText"
                @keyup.enter="sentMsg()"
              ></textarea>
              <button @click="sentMsg()" class="setproblems">
                <span style="vertical-align: 4px;">发 送</span>
              </button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeId: null,
      customerText: '',
      info: [
        // {
        //   type: 'leftinfo',
        //   time: this.getTodayTime(),
        //   name: 'robot',
        //   content: '',
        //   question: []
        // }
      ],
      timer: null,
      robotQuestion: [
        { id: 1, content: '客户资料完善后是由谁来审批', index: 1 },
        { id: 2, content: '客户资料审批一直不通过', index: 2 },
        { id: 3, content: '客户资料审批需要多长时间', index: 3 },
        {
          id: 4,
          content: '注册网站时需要一次填写完所有的客户资料吗',
          index: 4
        },
        { id: 5, content: '注册时使用的手机号变更怎么办', index: 5 }
      ],
      robotAnswer: [
        {
          id: 1,
          content:
            '答案客户资料完善后是由谁来审批,答案客户资料完善后是由谁来审批,答案客户资料完善后是由谁来审批',
          index: 1
        },
        { id: 2, content: '测试', index: 2 },
        { id: 3, content: '测试', index: 3 },
        {
          id: 4,
          content: '3333333',
          index: 4
        },
        { id: 5, content: '44444444', index: 5 }
      ],
      textarea: '',
      path: 'ws://192.168.0.125:1919/webStock/' + this.$store.state.user.userId,
      socket: ''
    };
  },
  mounted() {
    // 初始化
    this.init();
  },
  created() {},
  methods: {
    // 用户发送消息
    sentMsg() {
      clearTimeout(this.timer);
      let text = this.customerText.trim();
      if (text != '') {
        var obj = {
          type: 'rightinfo',
          time: this.getTodayTime(),
          content: text
        };
        this.info.push(obj);
        this.appendRobotMsg(this.customerText);
        this.customerText = '';
        this.$nextTick(() => {
          var contentHeight = document.getElementById('content');
          contentHeight.scrollTop = contentHeight.scrollHeight;
        });
      }
    },
    // 机器人回答消息
    appendRobotMsg(text) {
      clearTimeout(this.timer);
      text = text.trim();
      let answerText = '';
      let flag;
      for (let i = 0; i < this.robotAnswer.length; i++) {
        if (this.robotAnswer[i].content.indexOf(text) != -1) {
          flag = true;
          answerText = this.robotAnswer[i].content;
          break;
        }
      }
      // if (flag) {
      //   let obj = {
      //     type: 'leftinfo',
      //     time: this.getTodayTime(),
      //     name: 'robot',
      //     content: answerText,
      //     question: []
      //   };
      //   this.info.push(obj);
      // } else {
      //   answerText = '您可能想问：';
      //   let obj = {
      //     type: 'leftinfo',
      //     time: this.getTodayTime(),
      //     name: 'robot',
      //     content: answerText,
      //     question: this.robotQuestion
      //   };
      //   this.info.push(obj);
      // }
      this.$nextTick(() => {
        var contentHeight = document.getElementById('content');
        contentHeight.scrollTop = contentHeight.scrollHeight;
      });
    },
    getTodayTime() {
      // 获取当前时间
      var day = new Date();
      let seconds = day.getSeconds();
      if (seconds < 10) {
        seconds = '0' + seconds;
      } else {
        seconds = seconds;
      }
      let minutes = day.getMinutes();
      if (minutes < 10) {
        minutes = '0' + minutes;
      } else {
        minutes = minutes;
      }
      let time =
        day.getFullYear() +
        '-' +
        (day.getMonth() + 1) +
        '-' +
        day.getDate() +
        ' ' +
        day.getHours() +
        ':' +
        minutes +
        ':' +
        seconds;
      return time;
    },
    active(id) {
      this.activeId = id;
    },
    init: function() {
      if (typeof WebSocket === 'undefined') {
        alert('您的浏览器不支持socket');
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path);
        console.log(this.socket);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open: function() {
      console.log('socket连接成功');
    },
    error: function() {
      console.log('连接错误');
    },
    getMessage: function(msg) {
      console.log(msg.data);
    },
    send: function(params) {
      this.socket.send(params);
    },
    close: function() {
      console.log('socket已经关闭');
    }
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close;
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow: auto;
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
      overflow: auto;
      .box_l {
        background-color: #fff;
        padding: 10px;
        min-height: 100%;
        .user_item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 10px;
          border-bottom: 1px solid #ccc;
          .user_item_l {
            display: flex;
            align-items: center;
            .info {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              height: 40px;
              margin-left: 10px;
              .phone {
              }
              .company {
                font-size: 12px;
              }
            }
          }
          .user_item_r {
            font-size: 12px;
          }
        }
      }
      .box_r {
        height: 100%;
        .box {
          width: 100%;
          /* width: 680px; */
          // height: 500px;
          height: 100%;
          background-color: #fafafa;
          position: relative;
          padding: 1.25rem;
          #content {
            height: 80%;
            overflow-y: scroll;
            font-size: 14px;
            width: 100%;
            .circle {
              display: inline-block;
              width: 34px;
              height: 34px;
              border-radius: 50%;
              background-color: #eff1f3;
            }
            .con_text {
              color: #333;
              margin-bottom: 5px;
            }
            .con_que {
              color: #1c88ff;
              height: 30px;
              line-height: 30px;
              cursor: pointer;
            }
            .info_r {
              position: relative;
              .circle_r {
                position: absolute;
                left: 0%;
              }
              .pic_r {
                width: 17px;
                height: 17px;
                margin: 8px;
              }
              .con_r {
                display: inline-block;
                /* max-width: 253px; */
                width: 55%;
                min-height: 50px;
                line-height: 50px;
                /* min-height: 20px; */
                background-color: #e2e2e2;
                border-radius: 6px;
                padding: 0 10px;
                margin-left: 40px;
              }
              .time_r {
                margin-left: 45px;
                color: #999999;
                font-size: 12px;
              }
            }
            .info_l {
              text-align: right;
              // margin-right: 20px;
              color: #ffffff;
              color: #3163c5;
              margin-top: 10px;

              // .circle_l {
              //   // vertical-align: -10px;
              // }
              .pic_l {
                width: 13px;
                height: 17px;
                margin: 8px 10px;
              }
              .time_l {
                margin-right: 45px;
                color: #999999;
                font-size: 12px;
                margin-top: 5px;
              }
              .con_l {
                display: inline-block;
                min-width: 220px;
                max-width: 55%;
                min-height: 51px;
                line-height: 51px;
                background-color: #3163c5;
                border-radius: 6px;
                padding: 0 10px;
                text-align: left;
                color: #fff;
                margin-right: 5px;
              }
            }
            #question {
              cursor: pointer;
            }
          }
        }
        .setproblem {
          margin-top: 30px;
          width: 100%;
          height: 17%;
          background-color: #ffffff;
          position: relative;
        }
        .setproblem textarea {
          color: #999999;
          padding: 10px;
          box-sizing: border-box;
        }
        .setproblem button {
          width: 5.875rem;
          height: 2.5rem;
          line-height: 2.5rem;
          background: #3163c5;
          opacity: 1;
          border-radius: 4px;
          font-size: 10px;
          color: #ffffff;
          position: absolute;
          right: 2%;
          top: 50%;
          cursor: pointer;
          border: none;
        }
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        // background-color: #fff;
        // padding: 10px 20px;
        // min-height: 100%;
        // .content {
        //   flex: 1;
        // }
        // .dialogue {
        //   height: 150px;
        //   .el-input {
        //     height: 100%;
        //     /deep/.el-input--medium .el-input__inner {
        //       height: 100%;
        //     }
        //   }
        // }
      }
    }
  }
}
.active {
  background-color: paleturquoise;
}
.famous-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  font-size: 24px;
  p {
    width: 100%;
    font-weight: 300;
    text-align: center;
    font-size: 15px;
    color: #b9b4b4;
    margin-top: -30px;
  }
}
</style>
