import { Loading } from 'vant'
import { defineComponent, ref, Transition } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'o-image',
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const loading = ref(true)
    return () => (
      <div
        class={styles.imageWrap}
        style={
          !loading.value
            ? {
                backgroundImage: `url(${props.src})`,
                backgroundSize: 'cover'
              }
            : ''
        }
      >
        <Transition name="van-fade">
          {loading.value && (
            <img
              style={{ display: 'none' }}
              src={props.src}
              onLoad={() => {
                loading.value = false
              }}
            />
          )}
        </Transition>
      </div>
    )
  }
})
