<script lang="ts" setup>
import { fullUrl } from '@/utils/common'
import { computed, ref, watch } from 'vue'

const props = withDefaults(
  defineProps<{
    url: string
    width?: number | string
    borderWidth?: number | string
    borderColor?: string
  }>(),
  {
    width: 90,
    borderWidth: 0,
    borderColor: '#000000',
  },
)

const state = ref({
  url: props.url,
})

const imageStyle = computed(() => ({
  width: `${props.width}rpx`,
  height: `${props.width}rpx`,
  borderWidth: `${props.borderWidth}rpx`,
  borderColor: props.borderColor,
}))

const handleError = (e: any) => {
  state.value.url = ''
}

watch(
  () => props.url,
  (newVal) => {
    if (newVal) {
      state.value.url = newVal
    }
  },
)
</script>

<template>
  <view class="avatar-image">
    <image
      class="image"
      :style="imageStyle"
      @error="handleError"
      :src="state.url ? fullUrl(state.url) : '/static/images/default_avatar.png'"
    ></image>
  </view>
</template>

<style lang="scss" scoped>
.avatar-image {
  .image {
    display: block;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    border-style: solid;
  }
}
</style>
