<template>
  <img
    :src="oriUrl || item.src"
    class="componenet_img"
    @click="editorFunc"
    :style="outStyle()"
  />
</template>

<script setup>
import { defineProps, ref, inject } from 'vue';
const starEditorFormwork  = inject("starEditorFormwork");
const props = defineProps({
  item: Object,
  index: String
});
const oriUrl = ref('');
const outStyle = () => {
  const width = {
    '100%': true,
    '100vh': true,
  };
  const styleClass = JSON.parse(JSON.stringify(props.item.style));
  if (width[props.item.style.width]) {
    styleClass.width = '375px';
  }
  return styleClass;
};

const editorFunc = () => {
    const p = {
        ...props.item,
        leftEle: true
    }
    if(oriUrl.value) p.src = oriUrl.value;
    starEditorFormwork(p, props.index);
};
</script>

<style scoped>
.componenet_img {
  cursor: pointer;
}
</style>
