<template>
  <div style="position: relative;" @click.stop="editorFunc">
    <img
      :src="oriUrl || item.src"
      class="componenet_img"
      :style="outStyle()"
    />
    <div class="van_field_item">
      <div class="addMo">
        <div class="com addTop" @click.stop="addTop">
          <el-icon><Upload /></el-icon>
        </div>
        <div class="com addBottom" @click.stop="addBottom">
          <el-icon><Download /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, inject,defineEmits } from 'vue';
const starEditorFormwork = inject('starEditorFormwork');
const props = defineProps({
  item: Object,
  index: String,
});
const emit = defineEmits(['addComponent']);
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);
};

const addTop = () => {
  emit('addComponent', 'top', props.item.type, props.index);
};
const addBottom = () => {
  emit('addComponent', 'bottom', props.item.type, props.index);
};
</script>

<style scoped>
.componenet_img {
  cursor: pointer;
}
.van_field_item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.van_field_item:hover {
  background-color: #00000020;
}

.addMo {
  width: 100%;
  height: 100%;
  position: relative;
}

.com {
  position: absolute;
  display: none;
  right: 0;
  color: #fff;
  background: #409eff;
  border-radius: 3px;
  padding: 3px;
  text-align: center;
  cursor: pointer;
}
.addTop {
  top: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.addBottom {
  bottom: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.van_field_item:hover .addTop,
.van_field_item:hover .addBottom {
  display: block;
}
</style>
