import {FC, useEffect, useState} from "react";
import {Image, ImageProps, View} from "@tarojs/components";
import {AtActivityIndicator} from "taro-ui";
import shard from '@/static/img/shard.png'

interface Props extends ImageProps {
  width: number
  height: number
  fallback?: string
}

const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = shard}) => {
  const [isError, setIsError] = useState(false)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    if (!src) {
      setIsError(true)
      setLoading(false)
    } else {
      setIsError(false)
      setLoading(false)
    }
  }, [src])

  // 图片加载失败
  function onErrorHandler() {
    setLoading(false)
    setIsError(true)
  }

  function onLoadHandler() {
    setLoading(false)
    setIsError(false)
  }

  return (
    <View style={{width: `${width}rpx`, height: `${height}rpx`, backgroundColor: 'eee'}}>
      {!isError &&
        <Image
          src={src}
          mode={mode}
          style={{width: `${width}rpx`, height: `${height}rpx`}}
          onError={onErrorHandler}
          onLoad={onLoadHandler}>
        </Image>
      }
      {
        loading &&
        <AtActivityIndicator mode={"center"} content='加载中...'/>
      }
      {
        isError && !loading &&
        <Image mode={'aspectFill'} src={fallback} style={{width: `${width}rpx`, height: `${height}rpx`}}></Image>
      }
    </View>
  )
}

export default Img