<template>
  <div class="group-menu-dropdown">
    <Dropdown style="margin-left: 20px" @on-click="getNewMenuList">
      <Button type="primary">
        {{groupNames}}
        <Icon type="ios-arrow-down"></Icon>
      </Button>
      <DropdownMenu slot="list">
          <DropdownItem v-for="(item, index) in menuList" v-bind:key="index" :selected="item.isSelected" :name="index">{{item.name}}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
import './group-menu.less'
import { mapActions } from 'vuex'
export default {
  name: 'GroupMenu',
  props: {
    userAvator: {
      type: String,
      default: ''
    },
    messageUnreadCount: {
      type: Number,
      default: 0
    },
    menuList: Array,
    groupName: String
  },
  data () {
    return {
      nowName: ''
    }
  },
  computed: {
    groupNames () {
      if (this.nowName !== '') {
        return this.nowName
      } else {
        return this.groupName
      }
    }
  },
  methods: {
    ...mapActions([
      'handleLogOut'
    ]),
    logout () {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: 'login'
        })
      })
    },
    message () {
      this.$router.push({
        name: 'message_page'
      })
    },
    getNewMenuList (id) {
      let mData = this.menuList
      for (let i = 0; i < mData.length; i++) {
        if (i === id) {
          mData[i].isSelected = true
        } else {
          mData[i].isSelected = false
        }
      }
      this.nowName = mData[id].name
      this.$emit('on-select', mData[id].id, mData)
    }
  }
}
</script>
