<div class="WorkflowDesignerToolbarBlock Horizontal WorkflowDesignerElementToolbarBlock" style="display: flex;">
  <el-tooltip v-if="!graph.Settings.notshowwindows" :content="labels.ShowProperties">
    <div class="WorkflowDesignerElementToolbarIconContainer">
      <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon " @click="transition.ShowProperties()">
        <el-icon>
          <div v-html="icons.showproperties"></div>
        </el-icon>
      </el-button>
    </div>
  </el-tooltip>
  <div v-if="!graph.Settings.readonly" class="WorkflowDesignerElementToolbarIconContainer">
    <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon">
      <el-icon>
        <div v-html="icons.color"></div>
      </el-icon>
    </el-button>
  </div>
  <el-tooltip v-if="!graph.Settings.readonly" :content="labels.Color">
    <div>
      <el-color-picker v-if="!graph.Settings.readonly" v-model="Color" :predefine="predefineColors" size="small" class="ColorPicker"
                       @change="transition.UpdateColor(Color)"></el-color-picker>
    </div>
  </el-tooltip>
  <el-tooltip v-if="!graph.Settings.readonly" :content="labels.Delete">
    <div class="WorkflowDesignerElementToolbarIconContainer">
      <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon" @click="transition._onDelete()">
        <el-icon>
          <div v-html="icons.delete"></div>
        </el-icon>
      </el-button>
    </div>
  </el-tooltip>
</div>
<script type="application/javascript">
  function transitiontoolbar_Data(me) {
    return {
      icons: WorkflowDesignerConstants.icons,
      transition: undefined,
      Color: '',
      predefineColors: [
        '#f44336',
        '#e91e63',
        '#9c27b0',
        '#673ab7',
        '#3f51b5',
        '#2196f3',
        '#03a9f4',
        '#00bcd4',
        '#009688',
        '#4caf50',
        '#8bc34a',
        '#cddc39',
        '#ffeb3b',
        '#ffc107',
        '#ff9800',
        '#ff5722',
        '#795548',
        '#9e9e9e',
        '#607d8b'
      ],
      readonly: false,
      graph: me.value.graph
    }
  }

  function transitiontoolbar_Init(me) {
    const {VueConfig} = me;
    const {state: data, methods} = VueConfig

    methods.UpdateLanguage = function () {
      Object.assign(data, {
        labels: WorkflowDesignerConstants.ElementToolbar,
      });
    }

    methods.UpdateLanguage();

    methods.onUpdate = function (transition) {
      data.transition = transition;
      data.Color = transition.Color;
    };
  }
</script>
