<template>
  <div class="test">
    <StepTree
      :data="treeData"
      :margin="[15, 15]"
      :padding="[10, 10]"
      :font-size="16"
      :hostFontSize="10"
      :hostMargin="[3, 3]"
      :hostPadding="[3, 3]"
      font-family="微软雅黑"
      :custom-step-style="customStepStyle"
      @step-click="stepClickHandler"
      @step-host-click="stepHostClickHandler"
      :line-gap="20"
    />
  </div>
</template>

<script setup>
import data from "./data";
import StepTree from "../step-tree.vue";

const treeData = [{ name: "开始" }, ...data[0].steps, { name: "结束" }];

const customStepStyle = (step) => {
  if (step.action === "stop") {
    return {
      lineColor: "red",
      lineWidth: 3,
      textColor: "red",
      rectBorderColor: "red",
      rectBorderColor: "red",
      rectBgColor: "#ccc",
      rectRadius: 2,
      rectBorderWidth: 1,
    };
  } else {
    return {
      lineColor: "#000",
      lineWidth: 1,
      textColor: "#000",
      rectBorderColor: "#000",
      rectBgColor: "#ffff",
      rectRadius: 2,
      rectBorderWidth: 1,
    };
  }
};
const stepClickHandler = (step) => {
  console.log(step);
};
const stepHostClickHandler = (host) => {
  console.log(host);
};
</script>

<style scoped>
.test {
  width: 100%;
  height: 100%;

  overflow: auto;
}
</style>
