<!--
 * @Author: 曹捷
 * @Date: 2021-05-08 10:41:39
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-05-18 11:39:38
 * @Description: fileContent
-->

<template>
  <component is="formItem" :itemInfo="itemInfo" @click="activeItem"
    :class="{'active-from-item':activeId ===itemInfo.key}" class="draggable">
    <div class="btn-group">
      <a-tooltip title="复制当前节点信息">
        <a-button size="small" @click="copyItem" class="m-r-5" shape="circle">
          <template #icon>
            <i class="iconfont icon-copy"></i>
          </template>
        </a-button>
      </a-tooltip>

      <a-tooltip title="删除当前节点">
        <a-button size="small" @click="removeItem" shape="circle">
          <template #icon>
            <i class="iconfont icon-close"></i>
          </template>
        </a-button>
      </a-tooltip>
    </div>

  </component>
</template>

<script>
import formItem from './form-item.vue'
export default {
  components: { formItem },
  props: {
    itemInfo: {
      type: Object
    },
    activeId: {
      type: String
    }
  },
  setup (props, context) {
    let _methods = {
      activeItem () {
        context.emit('activeItem', props.itemInfo)
      },
      copyItem () {
        context.emit('copyItem')
      },
      removeItem () {
        context.emit('remove')
      }
    }
    return {
      ..._methods
    }
  }
}
</script>

<style lang="less">
.btn-group {
  display: none;
}
.active-from-item {
  .form-item {
    background: #f6f7ff;
    border-radius: 6px;
  }
  .btn-group {
    display: initial;
    position: absolute;
    right: 20px;
    top: 5px;
  }
}
</style>