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

import { defineComponent, ref, computed, watch } from '@vue/composition-api';
import { ImageErrorIcon } from '@ldesign/icons-vue';
import { usePrefixClass } from '../../../hooks/use-config.js';
import { useDrag } from '../hooks/index.js';
import { setTransform } from '../../../utils/helper.js';
import '../../config-provider/useConfig.js';
import '../../config-provider/context.js';
import 'lodash';
import '../../../_chunks/dep-def4c2ce.js';
import 'lodash/camelCase';

var TImageItem = defineComponent({
  name: "LImageItem",
  props: {
    rotate: Number,
    scale: Number,
    mirror: Number,
    src: String,
    placementSrc: String
  },
  setup(props) {
    const classPrefix = usePrefixClass();
    const error = ref(false);
    const loaded = ref(false);
    const {
      transform,
      mouseDownHandler
    } = useDrag({
      translateX: 0,
      translateY: 0
    });
    const imgStyle = computed(() => ({
      ...setTransform(`rotate(${props.rotate}deg) scale(${props.scale})`),
      display: !props.placementSrc || loaded.value ? "block" : "none"
    }));
    const placementImgStyle = computed(() => ({
      ...setTransform(`rotate(${props.rotate}deg) scale(${props.scale})`),
      display: !loaded.value ? "block" : "none"
    }));
    const boxStyle = computed(() => {
      const {
        translateX,
        translateY
      } = transform.value;
      return setTransform(`translate(${translateX}px, ${translateY}px) scale(${props.mirror}, 1)`);
    });
    const resetStatus = () => {
      error.value = false;
      loaded.value = false;
    };
    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(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
    })])]);
  }
});

export { TImageItem as default };
//# sourceMappingURL=ImageItem.js.map
