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

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