<template>
  <div class="first-part">
    <!-- tab -->
    <div class="friends-title">
      <span
        class="tab can-not-select"
        :class="{ 'tab-chose': currentTab === 'ConversationList' }"
        @click="toggleCurrentTab('ConversationList')"
      >
        会话
      </span>
      <span
        class="tab can-not-select"
        :class="{ 'tab-chose': currentTab === 'CustomerList' }"
        @click="toggleCurrentTab('CustomerList')"
      >
        我的客户
      </span>
      <span
        class="tab can-not-select"
        :class="{ 'tab-chose': currentTab === 'StaffList' }"
        @click="toggleCurrentTab('StaffList')"
      >
        企业通讯录
      </span>
    </div>
    <ConversationList v-if="currentTab === 'ConversationList'" />
    <CustomerList v-else-if="currentTab === 'CustomerList'" />
    <StaffList v-else />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

const ConversationList = () => import(/* webpackChunkName: "conversation" */ './ConversationList.vue')
const CustomerList = () => import(/* webpackChunkName: "conversation" */ './CustomerList.vue')
const StaffList = () => import(/* webpackChunkName: "conversation" */ './StaffList.vue')

import { GetContactInfoTask } from '@/api/webSocketApi'

export default {
  name: 'FirstPart',
  data() {
    return {
      currentTab: 'ConversationList'
    }
  },
  components: {
    ConversationList,
    CustomerList,
    StaffList
  },
  computed: {
    ...mapGetters({
      currentWeChatId: 'conversation/currentWeChatId' // 当前选择的微信
    })
  },
  watch: {
    currentWeChatId() {
      this.toggleCurrentTab('ConversationList')
    }
  },
  methods: {
    // 切换tab
    toggleCurrentTab(tab) {
      this.currentTab = tab
    },
    // 获取好友信息
    getFriendDetail(message) {
      GetContactInfoTask(message.WxId, message.RemoteId)
    }
  }
}
</script>

<style lang="scss" scoped>
.first-part {
  width: 270px;
  min-width: 270px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-right: solid $border-color-base 2px;

  .friends-title {
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: solid $border-color-base 2px;

    .tab {
      width: 90px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }
    .tab-chose {
      color: #ffd04b;
    }
  }
}
</style>
