"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const create_1 = require("../../_helper/create");
const validate_1 = require("../../_helper/validate");
const tools_1 = require("../../_helper/tools");
const props_1 = require("./props");
const { componentName, create, createName } = (0, create_1.createComponent)('image');
exports.default = create({
    name: componentName,
    props: props_1.props,
    emits: ['load', 'error'],
    setup(props, context) {
        const error = (0, vue_1.ref)(false);
        const loading = (0, vue_1.ref)(true);
        const dom = (0, vue_1.ref)();
        const style = (0, vue_1.computed)(() => {
            const style = {
                width: (0, tools_1.addUnit)(props.width),
                height: (0, tools_1.addUnit)(props.height),
            };
            if ((0, validate_1.isDef)(props.radius)) {
                style.overflow = 'hidden';
                style.borderRadius = (0, tools_1.addUnit)(props.radius);
            }
            return style;
        });
        (0, vue_1.watch)(() => props.src, () => {
            error.value = false;
            loading.value = true;
        });
        const onLoad = (event) => {
            loading.value = false;
            context.emit('load', event);
        };
        const onError = (event) => {
            error.value = true;
            loading.value = false;
            context.emit('error', event);
        };
        const renderImage = () => {
            if (error.value || !props.src) {
                return;
            }
            const attrs = {
                alt: props.alt,
                class: createName('img'),
                style: {
                    objectFit: props.fit,
                    objectPosition: props.position,
                },
            };
            if (props.lazyLoad) {
                return <img ref={dom} v-lazy={props.src} {...attrs}/>;
            }
            return (<img src={props.src} onLoad={onLoad} onError={onError} {...attrs}/>);
        };
        const renderPlaceholder = () => {
            if (loading.value && props.showLoading) {
                return (<div class={createName('loading')}>
            <i class="iconfont icon-loading"></i>
          </div>);
            }
            if (error.value && props.showError) {
                return (<div class={createName('error')}>
            <i class="iconfont icon-jiazaishibai"></i>
          </div>);
            }
        };
        return () => {
            var _a, _b;
            return (<div class={componentName} style={style.value}>
        {renderImage()}
        {renderPlaceholder()}
        {(_b = (_a = context.slots).default) === null || _b === void 0 ? void 0 : _b.call(_a)}
      </div>);
        };
    },
});