<template>
  <div class="demo-avatar-dynamic">
    <ui-avatar
      :text="user"
      :style="{
        color: '#fff',
        backgroundColor: color,
        verticalAlign: 'middle'
      }"
      size="large"></ui-avatar>
    <ui-button
      :style="{ marginLeft: 16, verticalAlign: 'middle' }"
      size="small"
      @click="changeUser">
      Change
    </ui-button>
  </div>
</template>
<script>
import { Avatar, Button } from "amumu-ui"
const UserList = ["U", "Lucy", "Tom", "Edward"]
const colorList = ["#f56a00", "#7265e6", "#ffbf00", "#00a2ae"]

export default {
  components: {
    "ui-avatar": Avatar,
    "ui-button": Button,
  },
  data() {
    return {
      user: UserList[0],
      color: colorList[0],
    }
  },
  methods: {
    changeUser() {
      const index = UserList.indexOf(this.user)
      this.user = index < UserList.length - 1 ? UserList[index + 1] : UserList[0]
      this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0]
    },
  },
}
</script>
<style lang="scss">
.demo-avatar-dynamic {
  .mm-avatar {
    margin: 10px;
  }
}
</style>
