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

'use strict';

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

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var VueCompositionAPI = require('@vue/composition-api');
var iconsVue = require('@ldesign/icons-vue');
var imageViewer_hooks = require('../hooks.js');
var utils_helper = require('../../utils/helper.js');
var configProvider_useConfig = require('../../config-provider/useConfig.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('@babel/runtime/helpers/slicedToArray');
require('lodash/camelCase');
require('../../config-provider/context.js');
require('lodash/merge');
require('lodash/mergeWith');
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-7c884501.js');
require('dayjs');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var TImageItem = VueCompositionAPI.defineComponent({
  name: "TImageItem",
  props: {
    rotate: Number,
    scale: Number,
    mirror: Number,
    src: String,
    placementSrc: String
  },
  setup: function setup(props) {
    var _useConfig = configProvider_useConfig.useConfig("imageViewer"),
      classPrefix = _useConfig.classPrefix,
      globalConfig = _useConfig.global;
    var error = VueCompositionAPI.ref(false);
    var loaded = VueCompositionAPI.ref(false);
    var _useDrag = imageViewer_hooks.useDrag({
        translateX: 0,
        translateY: 0
      }),
      transform = _useDrag.transform,
      mouseDownHandler = _useDrag.mouseDownHandler;
    var imgStyle = VueCompositionAPI.computed(function () {
      return _objectSpread(_objectSpread({}, utils_helper.setTransform("rotate(".concat(props.rotate, "deg) scale(").concat(props.scale, ")"))), {}, {
        display: !props.placementSrc || loaded.value ? "block" : "none"
      });
    });
    var placementImgStyle = VueCompositionAPI.computed(function () {
      return _objectSpread(_objectSpread({}, utils_helper.setTransform("rotate(".concat(props.rotate, "deg) scale(").concat(props.scale, ")"))), {}, {
        display: !loaded.value ? "block" : "none"
      });
    });
    var boxStyle = VueCompositionAPI.computed(function () {
      var _transform$value = transform.value,
        translateX = _transform$value.translateX,
        translateY = _transform$value.translateY;
      return utils_helper.setTransform("translate(".concat(translateX, "px, ").concat(translateY, "px) scale(").concat(props.mirror, ", 1)"));
    });
    var resetStatus = function resetStatus() {
      error.value = false;
      loaded.value = false;
    };
    VueCompositionAPI.watch(function () {
      return props.src;
    }, function () {
      resetStatus();
    });
    return {
      globalConfig: globalConfig,
      classPrefix: classPrefix,
      boxStyle: boxStyle,
      loaded: loaded,
      error: error,
      mouseDownHandler: mouseDownHandler,
      placementImgStyle: placementImgStyle,
      imgStyle: imgStyle
    };
  },
  render: function render() {
    var _this = this;
    var h = arguments[0];
    return h("div", {
      "class": "".concat(this.classPrefix, "-image-viewer__modal-pic")
    }, [h("div", {
      "class": "".concat(this.classPrefix, "-image-viewer__modal-box"),
      "style": this.boxStyle
    }, [this.error && h("div", {
      "class": "".concat(this.classPrefix, "-image-viewer__img-error")
    }, [h("div", {
      "class": "".concat(this.classPrefix, "-image-viewer__img-error-content")
    }, [h(iconsVue.ImageErrorIcon, {
      "attrs": {
        "size": "4em"
      }
    }), h("div", {
      "class": "".concat(this.classPrefix, "-image-viewer__img-error-text")
    }, [this.globalConfig.errorText])])]), !this.error && !!this.placementSrc && h("img", {
      "class": "".concat(this.classPrefix, "-image-viewer__modal-image"),
      "on": {
        "mousedown": function mousedown(event) {
          event.stopPropagation();
          _this.mouseDownHandler(event);
        }
      },
      "attrs": {
        "src": this.placementSrc,
        "alt": "image",
        "draggable": "false"
      },
      "style": this.placementImgStyle
    }), !this.error && h("img", {
      "class": "".concat(this.classPrefix, "-image-viewer__modal-image"),
      "on": {
        "mousedown": function mousedown(event) {
          event.stopPropagation();
          _this.mouseDownHandler(event);
        },
        "load": function load() {
          return _this.loaded = true;
        },
        "error": function error() {
          return _this.error = true;
        }
      },
      "attrs": {
        "src": this.src,
        "alt": "image",
        "draggable": "false"
      },
      "style": this.imgStyle
    })])]);
  }
});

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