<template>
  <div style="position: relative;" @click.stop="selectThis">
    <van-cell-group inset class="pragraph">
      <div
        class="text"
        @input="inputFuncTitle"
        v-text="item.title"
        :style="item.title_style"
      ></div>
      <div
        class="text"
        :style="item.style"
        v-html="item.default_text"
        @input="inputFunc"
      ></div>
    </van-cell-group>
    <br />
    <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, inject, defineEmits } from 'vue';
import 'vant/lib/index.css';
const starEditorFormwork = inject('starEditorFormwork');

const props = defineProps({
  item: Object,
  index: String,
});
const emit = defineEmits(['addComponent']);

const selectThis = () => {
  const newItem = JSON.parse(JSON.stringify(props.item || {}));
  newItem.leftEle = true;
  starEditorFormwork(newItem, 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>
.pragraph {
  font-weight: 400;
  cursor: pointer;
}
.text {
  outline: none;
  border: 1px solid #fff;
}
.text:focus {
  border-color: red;
}
.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>
