/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

'use strict';

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

var VueCompositionAPI = require('@vue/composition-api');
var iconsVue = require('@ldesign/icons-vue');
var hooks_useConfig = require('../../../hooks/use-config.js');
var components_imageViewer_hooks_index = require('../hooks/index.js');
var utils_helper = require('../../../utils/helper.js');
require('../../config-provider/useConfig.js');
require('../../config-provider/context.js');
require('lodash');
require('../../../chunks/zh_CN.js');
require('lodash/camelCase');

var TImageItem = VueCompositionAPI.defineComponent({
  name: "LImageItem",
  props: {
    rotate: Number,
    scale: Number,
    mirror: Number,
    src: String,
    placementSrc: String
  },
  setup(props) {
    const classPrefix = hooks_useConfig.usePrefixClass();
    const error = VueCompositionAPI.ref(false);
    const loaded = VueCompositionAPI.ref(false);
    const {
      transform,
      mouseDownHandler
    } = components_imageViewer_hooks_index.useDrag({
      translateX: 0,
      translateY: 0
    });
    const imgStyle = VueCompositionAPI.computed(() => ({
      ...utils_helper.setTransform(`rotate(${props.rotate}deg) scale(${props.scale})`),
      display: !props.placementSrc || loaded.value ? "block" : "none"
    }));
    const placementImgStyle = VueCompositionAPI.computed(() => ({
      ...utils_helper.setTransform(`rotate(${props.rotate}deg) scale(${props.scale})`),
      display: !loaded.value ? "block" : "none"
    }));
    const boxStyle = VueCompositionAPI.computed(() => {
      const {
        translateX,
        translateY
      } = transform.value;
      return utils_helper.setTransform(`translate(${translateX}px, ${translateY}px) scale(${props.mirror}, 1)`);
    });
    const resetStatus = () => {
      error.value = false;
      loaded.value = false;
    };
    VueCompositionAPI.watch(() => props.src, () => {
      resetStatus();
    });
    return {
      classPrefix,
      boxStyle,
      loaded,
      error,
      mouseDownHandler,
      placementImgStyle,
      imgStyle
    };
  },
  render() {
    const h = arguments[0];
    return h("div", {
      "class": `${this.classPrefix}-image-viewer__modal-pic`
    }, [h("div", {
      "class": `${this.classPrefix}-image-viewer__modal-box`,
      "style": this.boxStyle
    }, [this.error && h("div", {
      "class": `${this.classPrefix}-image-viewer__img-error`
    }, [h("div", {
      "class": `${this.classPrefix}-image-viewer__img-error-content`
    }, [h(iconsVue.ImageErrorIcon, {
      "attrs": {
        "size": "4em"
      }
    }), h("div", {
      "class": `${this.classPrefix}-image-viewer__img-error-text`
    }, ["\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\uFF0C\u53EF\u5C1D\u8BD5\u91CD\u65B0\u52A0\u8F7D"])])]), !this.error && !!this.placementSrc && h("img", {
      "class": `${this.classPrefix}-image-viewer__modal-image`,
      "on": {
        "mousedown": event => {
          event.stopPropagation();
          this.mouseDownHandler(event);
        }
      },
      "attrs": {
        "src": this.placementSrc,
        "alt": "image",
        "draggable": "false"
      },
      "style": this.placementImgStyle
    }), !this.error && h("img", {
      "class": `${this.classPrefix}-image-viewer__modal-image`,
      "on": {
        "mousedown": event => {
          event.stopPropagation();
          this.mouseDownHandler(event);
        },
        "load": () => this.loaded = true,
        "error": () => this.error = true
      },
      "attrs": {
        "src": this.src,
        "alt": "image",
        "draggable": "false"
      },
      "style": this.imgStyle
    })])]);
  }
});

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