<template>
  <div class="status-box flex">
    <!-- <span class="defualt">运行中</span> -->
    <span class="waiting">等待中</span>
    <span class="running">运行中</span>
    <span class="succ">成功</span>
    <span class="bf-suc">部分成功</span>
    <span class="error">失败</span>
  </div>
  <div class="tree-cont-wrap" ref="treeWrapRef">
    <StepTree
      :data="treeData"
      :margin="[15, 15]"
      :padding="[10, 10]"
      :tree-box-margin="[5, 5]"
      :font-size="16"
      :hostFontSize="16"
      :hostMargin="[10, 5]"
      :hostPadding="[8, 8]"
      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 "../StepTree.vue";

import { ref, nextTick, toRefs } from "vue";
import { useRouter } from "vue-router";
const treeWrapRef = ref();
const $router = useRouter();
const treeData = [
  { displayName: "开始", type: "startEnd" },
  ...data[0].steps,
  { displayName: "结束", type: "startEnd" },
];

// 每个step的样式
const customStepStyle = (step) => {
  // 等待中，开始状态
  if (step.status === "waiting") {
    return {
      lineColor: "#89beb2",
      lineWidth: 1,
      textColor: "#333",
      rectBorderColor: "#333",
      rectBgColor: "#89beb2",
      rectRadius: 2,
      rectBorderWidth: 1,
    };
  }
  // 失败
  else if (step.status === "error") {
    return {
      lineColor: "#89beb2",
      lineWidth: 1,
      textColor: "#333",
      rectBorderColor: "#333",
      rectBgColor: "red",
      rectRadius: 2,
      rectBorderWidth: 1,
    };
  }
  // 成功
  else if (step.status === "success") {
    return {
      lineColor: "#89beb2",
      lineWidth: 1,
      textColor: "#333",
      rectBorderColor: "#333",
      rectBgColor: "#30d567",
      rectRadius: 2,
      rectBorderWidth: 1,
    };
  }
  // 部分成功
  else if (step.status === "partsuccess") {
    return {
      lineColor: "#89beb2",
      lineWidth: 1,
      textColor: "#333",
      rectBorderColor: "#333",
      rectBgColor: "#d4f8c3",
      rectRadius: 2,
      rectBorderWidth: 1,
    };
  } else if (step.status === "running") {
    return {
      lineColor: "#89beb2",
      lineWidth: 1,
      textColor: "#333",
      rectBorderColor: "#333",
      rectBgColor: "#ecf752",
      rectRadius: 2,
      rectBorderWidth: 1,
    };
  }
  {
    return {
      lineColor: "#89beb2",
      lineWidth: 1,
      textColor: "#333",
      rectBorderColor: "coral",
      rectBgColor: "#ffff",
      rectRadius: 2,
      rectBorderWidth: 1,
    };
  }
};

// hosts
const customHostStyle = (step) => {
  if (step.hosts?.length) {
    step.hosts.forEach((item, idx) => {
      if (item.status === "success") {
        return {
          lineColor: "#40dbd9",
          lineWidth: 1,
          textColor: "#ccc",
          rectBorderColor: "#40dbd9",
          rectBgColor: "#ffff",
          rectRadius: 2,
          rectBorderWidth: 1,
        };
      }
    });
  }
};

const stepClickHandler = (step) => {
  console.log(step);
  if (step.raw.type === "startEnd") return;
  let url = $router.resolve({
    path: "/stepLogs",
    params: {
      key: 1,
    },
  }).href;
  window.open(url, "_blank");
};
const stepHostClickHandler = (host) => {
  console.log(host);
};
nextTick(() => {
  treeWrapRef.value.scrollLeft =
    (treeWrapRef.value.scrollWidth - treeWrapRef.value.clientWidth) / 2;
});
</script>

<style scoped>
.tree-cont-wrap {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: auto;
  text-align: center;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}

.flex {
  display: flex;
}
.status-box {
  width: 400px;
}
.status-box span {
  display: inline-block;
  width: 120px;
  height: 30px;
  line-height: 30px;
  color: #333;
  text-align: center;
  margin: 0 5px;
}
/* 运行中 */
.running {
  background: #ecf752;
}
/* 错误 */
.error {
  background: #ff4238;
}
/* 成功 */
.succ {
  background: #30d567;
}
/* 等待中 */
.waiting {
  background: #89beb2;
}
/* 部分成功 */
.bf-suc {
  background: #c6f9ae;
}
</style>
