<template>
  <el-aside class="aside-page" width="150px">
    <!-- 会话页面的nav -->
    <div class="aside-wechats">
      <!-- 微信总数 -->
      <div class="aside-wechats-title">
        <i class="fa fa-weixin fa-lg" aria-hidden="true"></i>
        <p class="can-not-select">{{ wechatsOnline.length }}/{{ wechats.length }}</p>
      </div>

      <!-- 微信列表 -->
      <ul class="wechats-list scroll">
        <li
          class="wechat-item"
          :index="wechat.WxId"
          v-for="(wechat, index) in wechats"
          :key="index"
          :class="[
            { 'wechat-chose': wechat.WxId === currentWeChatId },
            {
              'item-disabled': wechat.isonline === 1
            }
          ]"
          @click="choseWechat(wechat)"
          :title="wechat.Name"
        >
          <!-- 微信头像 -->
          <div class="avatar-messages">
            <img
              class="wechat-avatar"
              :src="wechat.Avatar || require('assets/svg/conversation-image-error.svg')"
              alt="微信头像"
            />
            <p class="ellipsis wechat-name">{{ wechat.Name }}</p>
            <!-- 未读消息 -->
            <span
              class="new-message-notice"
              v-if="messagesNotRead[wechat.WxId]"
              v-text="messagesNotRead[wechat.WxId]"
            ></span>
            <!-- 离线标志 -->
            <span
              v-if="wechat.isonline === 1"
              class="iconfont jubo-off-line"
              :class="{
                'item-disabled': wechat.isonline === 1
              }"
            ></span>
          </div>
        </li>
      </ul>
    </div>
  </el-aside>
</template>

<script>
import { mapGetters } from 'vuex'
import { TriggerConversationPushTask } from '../api/webSocketApi'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapGetters({
      wechats: 'conversation/wechats', // 会话页面 当前用户绑定的微信
      wechatsOnline: 'conversation/wechatsOnline', // 会话页面 已经登陆的微信
      currentWeChatId: 'conversation/currentWeChatId', // 会话页面 选中的微信的id
      messagesNotRead: 'conversation/messagesNotRead' // 会话页面 新消息
    })
  },
  watch: {
    wechatsOnline(newVal, oldVal) {
      if (newVal.length > 0 && oldVal.length === 0) {
        const loading = this.$loading({
          lock: true,
          text: '正在同步会话,请稍等!',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        let lct = setTimeout(() => {
          loading.close()
          clearTimeout(lct)
          lct = null
        }, 300 * (newVal.length + 1))

        if (newVal.length > 0) {
          // 预取数据
          for (const wechat of this.wechatsOnline) {
            // 会话数据
            TriggerConversationPushTask(wechat.WxId)
          }
        }
      }
    }
  },
  methods: {
    // 选择微信
    choseWechat(wechat) {
      console.log(wechat)
      if (wechat.isonline === 1) {
        this.$alert('手机微信不在线，请检查手机！', '提示', { type: 'warning' })
        return
      }
      let WxId = wechat.WxId
      if (WxId === this.currentWeChatId) return
      // 记录选择的微信
      this.$store.commit('conversation/SET_CURRENT_WECHAT', wechat)
      // 设置当前微信的客户
      this.$store.dispatch('conversation/SetCurrentCustomers', WxId)
      // 设置当前微信的企业通讯录
      this.$store.dispatch('conversation/SetCurrentContacts', WxId)
    }
  }
}
</script>

<style lang="scss" scoped>
.aside-page {
  overflow: hidden;
  background-color: $bg-color-content-base;
  border-right: solid $border-color-base 2px;

  .aside-wechats {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;

    .aside-wechats-title {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 40px;
      min-height: 40px;
      width: 100%;
      border-bottom: solid $border-color-base 2px;
    }

    .wechats-list {
      width: 100%;
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      flex-direction: column;
      overflow-y: auto;
      .wechat-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5px;

        color: $font-color-2;
        cursor: pointer;
        &:hover {
          background-color: rgba($color: #000000, $alpha: 0.1);
        }

        .avatar-messages {
          position: relative;
          padding: 5px 5px 0 5px;
          display: flex;
          flex-direction: column;
          align-items: center;

          .wechat-avatar {
            width: 42px;
            height: 42px;
            border-radius: 5px;
          }

          .wechat-name {
            margin-top: 2px;
            max-width: 100px;
          }

          .new-message-notice {
            color: #fff;
            position: absolute;
            top: 0px;
            right: 0px;
            height: 20px;
            min-width: 20px;
            padding: 0 5px;
            line-height: 20px;
            text-align: center;
            background: red;
            border-radius: 10px;
          }
          .jubo-off-line {
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }

      .wechat-chose {
        background: #edf3ff;
        color: #e6a23c;
        &:hover {
          background: #edf3ff;
        }
      }

      .item-disabled {
        cursor: not-allowed;
        .wechat-avatar {
          filter: grayscale(1);
        }
        .jubo-off-line {
          color: red;
        }
      }
    }
  }
}
</style>
