<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>
    <select v-model="activeNdx">
      <option :value="n" v-for="(_, n) in items">测试数据{{ n }}</option>
    </select>
  </div>
  <div class="tree-cont-wrap" ref="treeWrapRef">
    <StepTree :data="treeData" :margin="[25, 25]" lineColor="#89beb2">
      <template #step="{ data, start }">
        <Step
          :item="newData.find(({ raw }) => raw.name === data.name)?.raw || data"
          :start="start"
          @click="stepClickHandler(data)"
          @clickHost="stepHostClickHandler"
        />
      </template>
    </StepTree>
  </div>
</template>

<script setup>
import StepTree from "../StepTree.vue";
import Step from "./step.vue";
import data1 from "./data/1.json";
import data2 from "./data/2.json";
import data3 from "./data/3.json";
import data4 from "./data/4.json";
import data5 from "./data/5.json";
import data6 from "./data/6.json";
import data7 from "./data/7.json";
import data8 from "./data/8.json";
import data9 from "./data/9.json";
import { flatSteps } from "../helper-v2";
import { ref, nextTick, toRaw, toRefs, watchEffect, computed, watch } from "vue";
import { useRouter } from "vue-router";

const treeWrapRef = ref();
const $router = useRouter();
const items = [data1, data2, data3, data4, data5, data6, data7, data8, data9];
const activeNdx = ref("8");
const treeData = computed(() => items[activeNdx.value].steps);

const newData = ref();
watch(
  treeData,
  () => {
    newData.value = flatSteps(
      JSON.parse(JSON.stringify(items[activeNdx.value].steps))
    ).steps;
  },
  { immediate: true }
);

const status = ["success", "error", "running", "waiting"];
watch(
  newData,
  (newData, _, onCleanup) => {
    let c = 0;
    const interval = setInterval(() => {
      const s = status[c];
      for (let i = 0; i < newData.length; i++) {
        newData[i].raw.status = s;
      }
      c = (c + 1) % status.length;
    }, 1000);
    onCleanup(() => clearInterval(interval));
  },
  { immediate: true }
);

const stepClickHandler = (step) => {
  if (step.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;
  text-align: 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>
