<template>
  <div id="system">
    <div
      style="display: flex;"
    >
     <el-input v-model="systemName" @click.native="clickInput" />
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      system: [],
      systemName: ""
    };
  },
  mounted() {
    if(this.$root.control.system && this.$root.control.system.length > 0) {
      this.system = this.$root.control.system;
    }
  },
  watch:{
    '$root.control': {
      handler(val){
        console.log(val);
      },
      deep: true
    },
    system: {
      handler(val){
        this.systemName = val.map(item => item.name).join(",")
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    clickInput() {
      $(".relatedSystem").click();
    },
    close(index) {
        console.log('item',index,this.system)
         this.system = [];
         window.basFlow.controls[this.$root.control.id] = {
        ...window.basFlow.controls[this.$root.control.id],
        system: this.system
      }
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-tag--mini{
  max-width: 500px;
  overflow: hidden;
}
</style>
