<template>
  <div @click="handleGroupClick" class="scroll-container">
    <div class="group-item">
      <avatar src=""/>
      <div class="group-name text-ellipsis">{{ group.title }}</div>
    </div>
  </div>
</template>

<script>
import {MessageBox} from 'element-ui'
import Helper from '../../utils/helper'

export default {
  props: ['group'],
  data() {
    return {
      visible: false,
      options: [
        {
          text: '退出群组',
          handler: this.quitGroup
        }
      ]
    }
  },
  methods: {
    handleGroupClick() {
      if (this.group.is_join === 0) {
        MessageBox.confirm('是否加入讨论组：' + this.group.title, '提示', {
          type: 'warning', showClose: false
        }).then(() => {
          Helper.joinGroup(this.group.group_id, this.$store.state.user.userID).then(() => {
            this.group.is_join = 1
            this.handleGroupClick()
          })
        }).catch(() => {

        })
      } else {
        const conversationID = `GROUP${this.group.group_id}`
        this.$store.dispatch('checkoutConversation', conversationID)
      }
    },
    quitGroup() {
      this.tim.quitGroup(this.group.groupID)
          .catch(error => {
            this.$store.commit('showMessage', {
              type: 'error',
              message: error.message
            })
          })
    }
  }
}
</script>

<style lang="stylus" scoped>
.scroll-container
  overflow-y scroll
  flex 1

  .group-item
    display flex
    padding 10px 20px
    cursor pointer
    position relative
    overflow hidden
    transition .2s

    &:hover
      background-color $background

    .avatar
      width 30px
      height 30px
      border-radius 50%
      margin-right 10px
      flex-shrink 0

    .group-name
      flex 1
      color $font-light
      line-height 30px
</style>