<template>
  <div>
    <div class="text-left mb-1">Meu Perfil: </div>
    <div class="profile-card p-3 pt-4">

<div v-if="user.avatar==null" class="text-center">
    <avatar :customStyle="{margin: '0 auto'}" :size="94" :username="user.name"></avatar>

</div>
      
 <b-avatar v-else variant="primary" size="106px" :src="user.avatar_url"></b-avatar>
      <div class="pt-3">
        <profile-button title="Alterar Foto" icon="camera" @clicked="changePhoto"/>
      </div>
      <div class="pt-3">
        <profile-button title="Alterar Senha" icon="key" @clicked="changePassword"/>
      </div>
    </div>
  </div>
</template>

<script>
import ProfileButton from '@/components/profile/ProfileButton.vue';
import Avatar from 'vue-avatar'

export default {
  name: 'profile-photo',
  components: {
    ProfileButton,
    Avatar
  },
  props: {
    imgSrc: {
      type: String,
      default: '../../assets/profile.png',
    },
    
  },
  data: () => ({
    modal: false,
  }),
  computed:{
    user(){
      return this.$store.state.user.user;
    }
  },
  methods: {
    changePhoto() {
      console.log('change photo');
      this.modal = true;
      this.$modal.show('photo-modal');
    },
    changePassword() {
      console.log('change password');
      this.$modal.show('password-modal');
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/css/main.scss';
@import '../../assets/css/cards.scss';
</style>
