<template>
  <div :class="{ van_field_bg: true }">
    <van-field
      :required="isRequired"
      :label="label"
      :placeholder="placeholder"
      readonly
    >
      <template v-if="item.child_list && item.child_list.length" #input>
        <component
          v-for="(v, i) in item.child_list"
          :key="i"
          :item="v"
          :is="component[v.type]"
        ></component>
      </template>
    </van-field>
    <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 H5VanRadioGroup from './van_radio_group.vue';
import H5VanUploader from './van_uploader.vue';
import { ref, defineProps, defineEmits } from 'vue';
const label = ref('');
const placeholder = ref('');
const isRequired = ref(false);
const props = defineProps({
  item: Object,
  index: String,
});
const emit = defineEmits(['addComponent']);
const item = JSON.parse(JSON.stringify(props.item || '{}'));
label.value = item.attr.label || item.attr.name;
placeholder.value = item.attr.placeholder;
isRequired.value = item.attr.isRequired;

const component = {
  'van-radio-group': H5VanRadioGroup,
  'van-uploader': H5VanUploader,
};

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

<style scoped>
.van_field_bg {
  position: relative;
}
.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>
