<template>
  <div class="card">
    <div class="sortable-list" style="min-height: 200px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted(){
    // 禁止右键
    // document.oncontextmenu = () => false;
    // 初始化iframe拖拽对象
    this.postMessage("","init")
  },
  methods:{
    postMessage(data, type){
      let message = { data, type }
      console.log('send---',message)
      window.parent.postMessage(message, "*")
    },
    deleteComponent(id){
      let self = this
      this.$confirm({
        title: '提示',
        content: '是否确认删除该组件?',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          self.postMessage(id, "delete")
        }
      });
    },
    selectCard(id){
      if(id == this.selectCardId){
        this.selectCardId = null
        return
      }
      this.selectCardId = id
    }
  }
};
</script>

<style scoped>
.hm-slot {
  width: 100%;
  height: 100%;
}
.sortable-list {
  width: 100%;
  height: 100%;
}
</style>