/**
 * ldesign v0.4.2
 * (c) 2023 ldesign
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var iconsVueNext = require('@ldesign/icons-vue-next');
var hooks_useConfig = require('../../hooks/useConfig.js');
var imageViewer_hooks = require('../hooks.js');
require('../../config-provider/useConfig.js');
require('lodash/cloneDeep');
require('lodash/isFunction');
require('lodash/isString');
require('../../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('lodash/isArray');
require('../../_common/js/global-config/default-config.js');
require('../../_common/js/global-config/locale/zh_CN.js');
require('@babel/runtime/helpers/typeof');
require('../../_chunks/dep-7f0559c3.js');
require('dayjs');
require('@babel/runtime/helpers/defineProperty');

var TImageItem = vue.defineComponent({
  name: "TImageItem",
  props: {
    rotate: Number,
    scale: Number,
    mirror: Number,
    src: String,
    placementSrc: String
  },
  setup: function setup(props) {
    var classPrefix = hooks_useConfig.usePrefixClass();
    var error = vue.ref(false);
    var loaded = vue.ref(false);
    var _useDrag = imageViewer_hooks.useDrag({
        translateX: 0,
        translateY: 0
      }),
      transform = _useDrag.transform,
      mouseDownHandler = _useDrag.mouseDownHandler;
    var imgStyle = vue.computed(function () {
      return {
        transform: "rotate(".concat(props.rotate, "deg) scale(").concat(props.scale, ")"),
        display: !props.placementSrc || loaded.value ? "block" : "none"
      };
    });
    var placementImgStyle = vue.computed(function () {
      return {
        transform: "rotate(".concat(props.rotate, "deg) scale(").concat(props.scale, ")"),
        display: !loaded.value ? "block" : "none"
      };
    });
    var boxStyle = vue.computed(function () {
      var _transform$value = transform.value,
        translateX = _transform$value.translateX,
        translateY = _transform$value.translateY;
      return {
        transform: "translate(".concat(translateX, "px, ").concat(translateY, "px) scale(").concat(props.mirror, ", 1)")
      };
    });
    var resetStatus = function resetStatus() {
      error.value = false;
      loaded.value = false;
    };
    vue.watch(function () {
      return props.src;
    }, function () {
      resetStatus();
    });
    return function () {
      return vue.createVNode("div", {
        "class": "".concat(classPrefix.value, "-image-viewer__modal-pic")
      }, [vue.createVNode("div", {
        "class": "".concat(classPrefix.value, "-image-viewer__modal-box"),
        "style": boxStyle.value
      }, [error.value && vue.createVNode("div", {
        "class": "".concat(classPrefix.value, "-image-viewer__img-error")
      }, [vue.createVNode("div", {
        "class": "".concat(classPrefix.value, "-image-viewer__img-error-content")
      }, [vue.createVNode(iconsVueNext.ImageErrorIcon, {
        "size": "4em"
      }, null), vue.createVNode("div", {
        "class": "".concat(classPrefix.value, "-image-viewer__img-error-text")
      }, ["\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\uFF0C\u53EF\u5C1D\u8BD5\u91CD\u65B0\u52A0\u8F7D"])])]), !error.value && !!props.placementSrc && vue.createVNode("img", {
        "class": "".concat(classPrefix.value, "-image-viewer__modal-image"),
        "onMousedown": function onMousedown(event) {
          event.stopPropagation();
          mouseDownHandler(event);
        },
        "src": props.placementSrc,
        "style": placementImgStyle.value,
        "alt": "image",
        "draggable": "false"
      }, null), !error.value && vue.createVNode("img", {
        "class": "".concat(classPrefix.value, "-image-viewer__modal-image"),
        "onMousedown": function onMousedown(event) {
          event.stopPropagation();
          mouseDownHandler(event);
        },
        "src": props.src,
        "onLoad": function onLoad() {
          return loaded.value = true;
        },
        "onError": function onError() {
          return error.value = true;
        },
        "style": imgStyle.value,
        "alt": "image",
        "draggable": "false"
      }, null)])]);
    };
  }
});

exports["default"] = TImageItem;
//# sourceMappingURL=ImageItem.js.map
