<template>
  <el-col @click.native="activeItem" :span='config.span' :class="this.activeId === config.formId ?'drawing-item active-from-item' : 'drawing-item'">
    <span class="drawing-item-view"><i class="el-icon-view" v-if="config.hideShow"></i></span>
    <hoc :item="option" :formData="form"></hoc>
    <span title="复制" class="drawing-item-copy" @click="copyItem"><i class="el-icon-copy-document"></i></span>
    <span title="删除" class="drawing-item-delete" @click="deleteItem"><i class="el-icon-delete"></i></span>
  </el-col>

</template>

<script>
import { hoc } from '../../components/Base/BaseItemHoc.js'

export default {
  components: {
    hoc: hoc()
  },
  props: ['config', 'index', 'drawingList', 'activeId', 'formConf', 'form'],
  computed: {
    option() {
      let config = JSON.parse(JSON.stringify(this.config))
      // this.$setForm.setMap({
      //   'mg-editor': mgEditor
      // })
      let temp = this.$setForm.setOption(config, this.form)
      return temp
    }
  },
  data() {
    return {
      rules: {}
    }
  },
  methods: {
    activeItem() {
      this.$emit('activeItem', this.config)
    },
    copyItem() {
      this.$emit('copyItem', this.config)
    },
    deleteItem() {
      this.$emit('deleteItem', this.index)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .display-none {
  display: block !important;
}
.drawing-item-view {
  position: absolute;
  left: 5px;
  top: 0px;
}
</style>