<template>
  <div id="processGroup">
    <div
      style="display: flex; margin-bottom: 12px"
    >
     <el-input @click.native="clickInput" />
    </div>
    <el-tag effect="dark" @close='close(i)' v-for='v,i in processGroup' :key='v.id' size="mini" closable>{{ v.name }}</el-tag>
  </div>
</template>
<script>

export default {
  data() {
    return {
      processGroup: []
    };
  },
   mounted() {
    if(this.$root.control.processGroup && this.$root.control.processGroup.length > 0) {
      this.processGroup = this.$root.control.processGroup;
    }
    console.log('this.processGroup.33',this.processGroup,this.$root.control,this.$root.control.processGroup)
  },
  watch:{
    '$root.control':{
      handler(val){
        console.log(val);
      },
      deep: true

    }
  },
  methods: {
    clickInput(){
      $("#processSelect").click();
    },
    close(index){
         this.processGroup = [];
         window.basFlow.controls[this.$root.control.id] = {
        ...window.basFlow.controls[this.$root.control.id],
        processGroup: this.processGroup
      }
      window.relatedEleIcon()
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-tag{
  padding: 0 8px;
  overflow: hidden;
  margin-right: 10px;
  cursor: pointer;
  .el-tag__close {
    transform: scale(1);
  }
}
</style>
