<template>
  <div>
    <div
      :ref="componentData.name"
      class="hover-block"
      :class="{ hidden: !isShow }"
      @mouseenter.stop="showBlock(componentData.name)"
      @mouseleave.stop="hiddenBlock(componentData.name)"
    >
      <div class="inner">
        <i class="blue el-icon-edit-outline" @click="showDialog"></i
        ><i class="red el-icon-delete" @click="deleteOne"></i>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @author: 过飞
 * @createData: 2020年09月09日 17:01:14
 * @version：v1.0
 *
 * @desc: 功能描述
 */
export default {
  name: '',

  components: {},

  mixins: [],

  props: {
    componentData: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      isShow: false,
      dialogFormVisible: false
    }
  },

  computed: {},

  watch: {},

  created() {},
  beforeMount() {},
  mounted() {},

  methods: {
    showBlock(hoverName) {
      this.isShow = true
    },
    hiddenBlock(hoverName) {
      this.isShow = false
    },
    alterComponents() {
      this.$emit('change', 'hehe')
    },
    showDialog() {
      this.$emit('onEdit')
    },
    deleteOne() {
      this.$emit('onDelete')
    }
  }
}
</script>
<style lang="scss" scoped>
.hover-block {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba($color: #000000, $alpha: 0.3);
  z-index: 20;
  transition: all ease-in-out 0.2s;
  .inner {
    font-size: 20px;
    color: #fff;
    & > i {
      padding: 4px;
      margin: 0 4px;
    }
    & > i.blue {
      background-color: #3da2ff;
    }
    & > i.red {
      background-color: #ff5c5c;
    }
  }
}
.hidden {
  opacity: 0;
}
</style>
