/* eslint-disable no-unused-vars */
<template>
  <div class="chatWarp">
    <el-container>
      <el-aside width="240px">
        <div class="headImg">
          <img :src="avatar" alt="">
          <div>
            <p class="nickName">{{ usercode }}</p>
            <p class="userState"><span>在线</span><i class="el-icon-success" /></p>
          </div>
        </div>
        <div class="listClass">
          <ul>
            <li v-for="(item,index) in tabsParam " :key="index" :class="{actives:index===nowIndex}" class="li-tab" @click="toggleTabs(index)">{{ item }}</li>
          </ul>
        </div>
        <div class="seachBar">
          <input v-model="seachInput" type="text" class="seach-input" placeholder="用户名、问题关键字">
          <a href="javaScript:;"><i class="el-icon-search" /></a>
        </div>
        <el-scrollbar style="height:530px;" class="chatscrollbar" wrap-class="chatScrollbar-wrapper">
          <div class="tabCon">
            <div v-show="nowIndex===0" class="tabs1">
              <ul>
                <li v-for="(list ,key) in userList" :key="key" :class="{ active: list.sessionid === currentSessionId }" @click="sideListClickOne(list.sessionid,list.user.name)">
                  <el-badge :hidden="list.user.dotShow" is-dot class="item">
                    <img :src="!list.user.headimgurl ? '/static/img/user.png' :list.user.headimgurl" alt="">
                  </el-badge>

                  <div class="list-msg">
                    <p class="listNickName">
                      <span>{{ list.user.name }}</span>
                      <time>{{ list.message.date }}</time>
                    </p>
                    <p class="unreadMsg">
                      <!-- <span class="unread-Count">[{{list.message.length}}条]</span>
                      <span class="unread-Con">{{list.message[0].message}}</span> -->
                      <span class="unread-Count">[{{ list.newMsgCount }}条]</span>
                      <span class="unread-Con">{{ list.newMsg }}</span>
                    </p>
                  </div>
                  <div />
                </li>
              </ul>
            </div>
            <div v-show="nowIndex===1" class="tabs2">
              <ul>
                <!-- <li v-for="(item,index)in ColleagueList" :key="index" @click="sideListClick(item.name)" :class="{active:item===tabLeftLi}"> -->
                <li v-for="(item,index) in ColleagueList" :key="index" :class="{active:item.usercode===collUserCode}" @click="sideListClickTwo(item.name,item.usercode)">
                  <el-badge :hidden="false" is-dot class="item">
                    <img :src="!item.head_small_img ? '/static/img/user.png' :item.head_small_img" alt="">
                  </el-badge>
                  <div class="list-msg">
                    <p class="listNickName">
                      <span>{{ item.name }}</span>
                      <time>{{ item.time }}</time>
                    </p>
                    <p class="unreadMsg">
                      <span class="unread-Count">[2条]</span>
                      <span class="unread-Con">测试测试</span>
                    </p>
                  </div>
                </li>
              </ul>
            </div>

          </div>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-header style="height:50px;">
          <div class="nav-titles">
            {{ currentName }}
          </div>
        </el-header>
        <div class="chat_main">
          <el-main>
            <el-row>
              <el-col :span="17">
                <!-- 客户聊天列表 -->
                <div v-show="nowIndex===0" class="grid-content bg-purple">
                  <div class="chat_main_message">
                    <el-scrollbar ref="myScrollBar" style="height:478px;">
                      <ul v-if="messageCon" class="chat_main_message_lists">
                        <li v-for="(item,key) in messageCon.message" :key="key">
                          <div :class="{ self: item.isSelf }" class="chat_main_message_item">
                            <img
                              :src="item.isSelf ? avatar : messageCon.user.headimgurl? messageCon.user.headimgurl:'/static/img/user.png'"
                              class="chat_main_message_item_img"
                              alt="">
                            <div class="chat_main_message_item_text">
                              {{ item.message }}
                            </div>
                          </div>
                          <time :class="{ self: item.isSelf }" class="chat_main_message_item_time">{{ item.date }}</time>
                        </li>
                      </ul>
                    </el-scrollbar>
                  </div>
                  <div class="chat_main_send">
                    <el-input
                      :autosize="{ minRows: 4, maxRows: 5}"
                      v-model="sendMessage"
                      type="textarea"
                      rows="4"
                      resize="none"
                      placeholder="请输入消息"
                      @keyup.enter.native="btnSendMsg" />
                    <div class="sendBtn-box">
                      <el-button type="primary" class="sendBtn" @click="btnSendMsg">发送</el-button>
                    </div>

                  </div>
                </div>
                <!-- 同事聊天列表 -->
                <div v-show="nowIndex===1" class="grid-content bg-purple">
                  <div class="chat_main_message">
                    <el-scrollbar style="height:478px;">
                      <ul v-if="messageCon" class="chat_main_message_lists">
                        <li v-for="(item,key) in messageCon.message" :key="key">
                          <div :class="{ self: item.isSelf }" class="chat_main_message_item">
                            <img
                              :src="item.isSelf ? avatar : messageCon.user.headimgurl? messageCon.user.headimgurl:'/static/img/user.png'"
                              class="chat_main_message_item_img"
                              alt="">
                            <div class="chat_main_message_item_text">
                              {{ item.message }}
                            </div>
                          </div>
                          <time :class="{ self: item.isSelf }" class="chat_main_message_item_time">{{ item.date }}</time>
                        </li>
                      </ul>
                    </el-scrollbar>
                  </div>
                  <div class="chat_main_send">
                    <el-input
                      :autosize="{ minRows: 4, maxRows: 5}"
                      v-model="sendMessageColl"
                      type="textarea"
                      rows="4"
                      resize="none"
                      placeholder="请输入消息"
                      @keyup.enter.native="btnSendMsgColl" />
                    <div class="sendBtn-box">
                      <el-button type="primary" class="sendBtn" @click="btnSendMsgColl">发送</el-button>
                    </div>

                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content bg-purple">
                  <div class="right-side">
                    <div class="right-side-top">
                      <el-tabs v-model="rightSideActive" @tab-click="rightSideTabClick">
                        <el-tab-pane label="常用语" name="first">
                          <el-scrollbar style="height: 380px;">
                            <div class="right-side-first">
                              <ul>
                                <li v-for="items in 10" :key="items">
                                  您好，请问有什么需要咨询的1{{ items }}
                                </li>
                              </ul>
                            </div>
                          </el-scrollbar>
                        </el-tab-pane>
                        <el-tab-pane label="个人库" name="second">
                          <el-scrollbar style="height: 380px;">
                            <div class="right-side-second">
                              <ul>
                                <li v-for="items in 10" :key="items">
                                  您好，请问有什么需要咨询的2{{ items }}
                                </li>
                              </ul>
                            </div>
                          </el-scrollbar>

                        </el-tab-pane>
                      </el-tabs>
                    </div>
                    <div class="right-side-btnbox">
                      <el-button icon="el-icon-document">新建</el-button>
                      <el-button icon="el-icon-delete">删除</el-button>
                    </div>
                    <div class="right-side-bottom">
                      <img src="../../assets/imgs/hygg.png" alt="">
                    </div>

                  </div>
                </div>
              </el-col>
            </el-row>
          </el-main>
        </div>
      </el-container>
    </el-container>

  </div>

</template>
<script>
import { mapGetters } from 'vuex'
import store from '@/store'
import { getSeatLists } from '@/api/telCall/seatMonitor'
import { selectSession, Sends, CreateSignalR } from '@/utils/lineChatSocket'
import { CreateSocketIo } from '@/utils/lineChatSocket'

export default {
  filters: {
    // 将日期过滤为 hour:minutes
    timeFilter(date) {
      if (typeof date === 'string') {
        date = new Date(date)
      }
      return date.getHours() + ':' + date.getMinutes()
    }
  },
  directives: {
    // 发送消息后滚动到底部
    'scroll-bottom'() {
      this.vm.$nextTick(() => {
        this.el.scrollTop = this.el.scrollHeight - this.el.clientHeight
      })
    }
  },
  data() {
    return {
      tabsParam: ['客户', '同事'],
      nowIndex: 0,
      seachInput: '',
      sendMessage: '',
      sendMessageColl: '',
      rightSideActive: 'first',
      ColleagueList: [],
      CustomerMsgCon: [],
      nowCollCode: '',
      signalrData: ''
    }
  },
  computed: {
    ...mapGetters([
      'name', // 用户名
      'usercode', // 工号
      'avatar', // 头像
      'userList', // 客户列表
      'currentSessionId', // 选中的用户id
      'currentName', // 选中的用户name
      'messageCon',
      'collUserCode' // 选中的同事code
    ])
  },
  mounted() {
    // CreateSignalR() // signalr 连接
    // this.getLists()
  },
  updated() {
    this.scrollDown()
  },
  methods: {
    // 好友分类tab
    toggleTabs(index) {
      this.nowIndex = index
    },
    // 获取坐席列表
    getLists() {
      getSeatLists().then(response => {
        if (response.state.toLowerCase() === 'success') {
          this.ColleagueList = []
          if (response.data && response.data.length > 0) {
            response.data.forEach((v, i) => {
              if (v.usercode !== this.usercode) {
                // 初始化 card 数据
                this.ColleagueList.push({
                  id: v.id,
                  head_small_img: !v.head_small_img ? '/static/img/user.png' : v.head_small_img,
                  name: v.username,
                  usercode: v.usercode
                })
              }
            })
          }
        }
      })
    },
    // 好友列表点击
    sideListClickOne(id, name) {
      const msgs = {
        'id': id,
        'name': name
      }
      selectSession(msgs)
      const session = this.userList.find(item => item.sessionid === this.currentSessionId)
      session.user.dotShow = true
      store.dispatch('appendMsg', session)
    },
    // 同事列表点击
    sideListClickTwo(name, code) {
      const msgs = {
        'code': code,
        'name': name
      }
      this.nowCollCode = code
      store.dispatch('getCollUsercode', msgs)
    },
    btnSendMsg() {
      if (this.sendMessage) {
        this.signalrData = {
          'action': 'sersend',
          'sessionid': this.currentSessionId,
          'message': this.sendMessage
        }
        Sends(this.signalrData)
        this.sendMessage = ''
      } else {
        this.$message({
          message: '请输入您要发送的信息！',
          type: 'warning'
        })
      }
    },
    btnSendMsgColl() {
      if (this.sendMessageColl) {
        this.signalrData = {
          'action': 'sersession',
          'usercode': this.usercode,
          'connusercode': this.nowCollCode,
          'message': this.sendMessageColl
        }
        Sends(this.signalrData)
        this.sendMessageColl = ''
      } else {
        this.$message({
          message: '请输入您要发送的信息！',
          type: 'warning'
        })
      }
    },
    scrollDown() {
      this.$refs['myScrollBar'].wrap.scrollTop = this.$refs['myScrollBar'].wrap.scrollHeight
    },
    // 右侧快捷短语tab
    rightSideTabClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
	.chatScrollbar-wrapper.el-scrollbar__wrap,
	.chat_main_message .el-scrollbar__wrap,
	.right-side .el-scrollbar__wrap {
		overflow-x: hidden;
	}

	.chatscrollbar.el-scrollbar {
		background: #4e566b;
	}

	.chat_main .el-main {
		padding: 0px;
	}

	.chat_main_send .el-textarea__inner {
		border: 0;
		outline: none;
	}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "src/../../../styles/mixin.scss";
	$asidebasicColor: #4f566c; //侧边基础色
	$titleColor: #373d41;
	$fontSize: 14px;

	@mixin verticals {
		display: inline-block;
		vertical-align: middle;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.sideImg {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		@include verticals;
		margin-right: 15px;
	}

	.el-header {
		padding: 0;
	}

	.headImg {
		background: #42485b;
		color: #ffffff;
		font-size: $fontSize;
		padding: 10px 20px;

		img {
			@extend .sideImg;
		}

		div {
			@include verticals;

			p {
				i {
					color: #71b347;
					margin-left: 5px;
				}
			}
		}
	}

	.nav-titles {
		background: #4f566c;
		color: #ffffff;
		font-size: $fontSize;
		height: 50px;
		line-height: 50px;
		text-align: center;
	}

	.listClass {
		width: 100%;
		text-align: center;

		ul {
			@include clearfix;
		}

		ul li {
			float: left;
			width: 50%;
			color: #ffffff;
			height: 36px;
			line-height: 36px;
			// background: $asidebasicColor;
			background: #3e4457;
			cursor: pointer;
		}

		ul li.actives {
			background: $asidebasicColor;
		}
	}

	.seachBar {
		padding: 4px 10px;
		background: #484d60;

		.seach-input {
			width: 80%;
			height: 20px !important;
			line-height: 24px;
			background: #4f566c;
			border-radius: 47px;
			border: 1px solid #4e566b;
			outline: none;
			color: #7e85a2;
			font-size: 12px;
			padding-left: 5px;
		}

		i {
			color: #7d83a0;
		}
	}

	.tabCon {
		img {
			@extend .sideImg;
			margin-right: 0;
		}

		.item {
			@include verticals;
		}

		ul {
			margin: 0;
			padding: 0;
		}

		ul li {
			background: $asidebasicColor;
			padding: 7px 20px;
			cursor: pointer;

			div.list-msg {
				@include verticals;
				width: 70%;
				margin-left: 2%;

				p {
					margin: 0;
					font-size: 12px;
					color: #9a9da8;
					width: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.listNickName {
					@include clearfix;
					margin-bottom: 12px;
				}

				.listNickName span {
					color: #ffffff;
					font-size: 14px;
				}

				.listNickName time {
					float: right;
				}
			}
		}

		ul li.active {
			background: #ffffff;

			div.list-msg {
				.listNickName span {
					color: #333333;
				}
			}
		}
	}

	.chat_main_message {
		height: calc(100% - 122px);
		padding-right: 15px;

		.chat_main_message_lists li {
			margin-top: 25px;
			@include clearfix;

			.chat_main_message_item_time {
				display: block;
				color: #d2d2d2;
				font-size: 12px;
				float: left;
				margin-left: 56px;
				margin-top: 5px;
			}

			.chat_main_message_item_time.self {
				float: right;
				margin-right: 56px;
			}
		}

		.chat_main_message_item {
			@include clearfix;
			position: relative;
			height: 100%;

			.chat_main_message_item_img {
				height: 36px;
				width: 36px;
				border-radius: 50%;
				float: left;
				margin: 0 20px 0 0;
				@include verticals;
			}

			.chat_main_message_item_text {
				display: inline-block;
				position: relative;
				padding: 0 10px;
				max-width: calc(100% - 108px);
				min-height: 30px;
				line-height: 2.5;
				font-size: 14px;
				color: #fff;
				text-align: left;
				word-break: break-all;
				background-color: #409eff;
				border-radius: 4px;
			}

			.chat_main_message_item_text:before {
				content: " ";
				position: absolute;
				top: 9px;
				right: 100%;
				border: 11px solid transparent;
				border-right-color: #409eff;
			}
		}

		.chat_main_message_item.self {
			text-align: right;

			.chat_main_message_item_img {
				float: right;
				margin: 0 0 0 20px;
			}

			.chat_main_message_item_text {
				background: #ebf5ff;
				color: #333333;
			}

			.chat_main_message_item_text:before {
				right: inherit;
				left: 100%;
				border-right-color: transparent;
				border-left-color: #ebf5ff;
			}
		}
	}

	.chat_main_send {
		border-top: 1px solid #e8e8e8;
		padding-right: 10px;
	}

	.chat_main {
		border: 5px solid #e8e8e8;
		border-right: 0;
		height: 100%;
	}

	.sendBtn-box {
		text-align: right;
	}

	.right-side {
		border-left: 1px solid #e8e8e8;

		.right-side-top {
			height: 100%;
			padding: 0 20px;

			ul {}

			ul li {
				padding: 10px 0;
				border-bottom: 1px solid #f5f5f6;
			}
		}

		.right-side-btnbox {
			text-align: center;
			border-top: 1px solid #f5f5f6;
			padding: 5px 0;
		}

		.right-side-bottom {
			padding: 10px 11px;
			border-top: 1px solid #f5f5f6;

			img {
				display: block;
				height: 100%;
				width: 100%;
			}
		}
	}
</style>
