<template>
  <div class="change-avatar">
    <CropperAvatar
      :btnText="t('更换头像')"
      :uploadApi="uploadAvatar"
      :value="avatar"
      :maxSize="2"
      @change="uploadChange"
    />
  </div>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { CropperAvatar } from '/@/components/Cropper';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { uploadAvatar } from '/@/api/system/user';
  import { useUserStore } from '/@/store/modules/user';
  import headerImg from '/@/assets/images/header.jpg';
  const { t } = useI18n();

  const userStore = useUserStore();
  const avatar = computed(() => {
    const { avatar } = userStore.getUserInfo;
    return avatar || headerImg;
  });
  function uploadChange(url: string) {
    const userInfo = userStore.getUserInfo;
    userInfo.avatar = url;
    userStore.setUserInfo(userInfo);
  }
</script>
<style lang="less" scoped>
  .change-avatar {
    img {
      display: block;
      margin-bottom: 15px;
      border-radius: 50%;
    }
  }
</style>
