import create from "../utils/create";
import { isDef, inBrowser } from "../utils";
import { addUnit } from "../utils/format/unit";
import Icon from "../icon";
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      class: _vm.b({
        round: _vm.round
      }),
      style: _vm.style,
      on: {
        "click": _vm.onClick
      }
    }, [!_vm.error && _vm.lazyLoad ? _c('img', {
      directives: [{
        name: "lazy",
        rawName: "v-lazy",
        value: _vm.src,
        expression: "src"
      }],
      ref: "image",
      class: _vm.b('img'),
      style: {
        objectFit: _vm.fit
      },
      attrs: {
        "attrs": {
          alt: _vm.alt
        }
      }
    }) : _vm._e(), !_vm.error && !_vm.lazyLoad ? _c('img', {
      class: _vm.b('img'),
      style: {
        objectFit: _vm.fit
      },
      attrs: {
        "src": _vm.src,
        "attrs": {
          alt: _vm.alt
        }
      },
      on: {
        "load": _vm.onLoad,
        "error": _vm.onError
      }
    }) : _vm._e(), _vm.loading && _vm.showLoading ? _c('div', {
      class: _vm.b('loading')
    }, [_vm._t("loading", [_c('Icon', {
      class: _vm.b('loading-icon'),
      attrs: {
        "name": _vm.loadingIcon
      }
    })])], 2) : _vm._e(), _vm.error && _vm.showError ? _c('div', {
      class: _vm.b('error')
    }, [_vm._t("error", [_c('Icon', {
      class: _vm.b('error-icon'),
      attrs: {
        "name": _vm.errorIcon
      }
    })])], 2) : _vm._e(), _vm._t("default")], 2);
  },
  name: "image",
  components: {
    Icon: Icon
  },
  props: {
    src: String,
    fit: String,
    alt: String,
    round: Boolean,
    width: [Number, String],
    height: [Number, String],
    radius: [Number, String],
    lazyLoad: Boolean,
    showError: {
      type: Boolean,
      default: true
    },
    showLoading: {
      type: Boolean,
      default: true
    },
    errorIcon: {
      type: String,
      default: "window-close-o"
    },
    loadingIcon: {
      type: String,
      default: "image"
    }
  },
  watch: {
    src: function src() {
      this.loading = true;
      this.error = false;
    }
  },
  data: function data() {
    return {
      loading: true,
      error: false
    };
  },
  methods: {
    onLoad: function onLoad(event) {
      this.loading = false;
      this.$emit("load", event);
    },
    onLazyLoaded: function onLazyLoaded(_ref) {
      var el = _ref.el;

      if (el === this.$refs.image && this.loading) {
        this.onLoad();
      }
    },
    onLazyLoadError: function onLazyLoadError(_ref2) {
      var el = _ref2.el;

      if (el === this.$refs.image && !this.error) {
        this.onError();
      }
    },
    onError: function onError(event) {
      this.error = true;
      this.loading = false;
      this.$emit("error", event);
    },
    onClick: function onClick(event) {
      this.$emit("click", event);
    }
  },
  beforeDestroy: function beforeDestroy() {
    var $Lazyload = this.$Lazyload;

    if ($Lazyload) {
      $Lazyload.$off("loaded", this.onLazyLoaded);
      $Lazyload.$off("error", this.onLazyLoadError);
    }
  },
  created: function created() {
    var $Lazyload = this.$Lazyload;

    if ($Lazyload && inBrowser) {
      $Lazyload.$on("loaded", this.onLazyLoaded);
      $Lazyload.$on("error", this.onLazyLoadError);
    }
  },
  computed: {
    style: function style() {
      var style = {};

      if (isDef(this.width)) {
        style.width = addUnit(this.width);
      }

      if (isDef(this.height)) {
        style.height = addUnit(this.height);
      }

      if (isDef(this.radius)) {
        style.overflow = "hidden";
        style.borderRadius = addUnit(this.radius);
      }

      return style;
    }
  }
});