<template>
  <div class="friend-item-container" @click="handleFriendClick">
    <el-row class="friend-list" type="flex" align="middle" justify="center" :gutter="16">
      <el-col :span="6">
        <avatar class="friend-avatar" :src="friend.avatar"/>
      </el-col>
      <el-col :span="18">
        <div class="friend-name">{{ friend.name }}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    friend: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleFriendClick() {
      this.tim.getConversationProfile(`C2C${this.friend.esm_id}`)
          .then(({data}) => {
            this.$store.commit('updateCurrentConversation', data)
            this.$store.commit('setActiveMenu', 'conversation-list')
            this.$store.dispatch('checkoutConversation', data.conversation.conversationID)
          })
          .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message}))
    }
  }
}
</script>

<style lang="stylus" scoped>
.friend-item-container
  color #f7f7f8

  :hover
    background-color #404953
    cursor pointer

  .friend-list
    padding 10px 15px

    .friend-avatar
      height 48px
      width 48px

</style>