<template>
  <span
    class="title structure-title"
    v-if="item.structure && start"
    :style="{ left: -start.x + 'px', top: '-20px' }"
    >{{ item.displayName }}</span
  >
  <div
    class="step-layout"
    @click="emit('click')"
    :style="{ '--statusColor': currentColor }"
  >
    <div class="step-header">
      <span class="type" v-if="!item.structure || item.structure === 'left'">{{
        item.name
      }}</span>
      <span class="title" v-if="!item.structure || item.structure === 'right'">{{
        item.displayName
      }}</span>
      <span class="icons" v-if="!item.structure || item.structure === 'left'">
        <img src="./image/g.png" v-if="props.item.status === 'success'" />
        <img src="./image/x.png" v-else-if="props.item.status === 'error'" />

        <template v-if="'serviceTypeParallel' in item">
          <img src="./image/p.png" v-if="item.serviceTypeParallel" />
          <img src="./image/c.png" v-else />
        </template>
      </span>
    </div>

    <div class="step-hosts" v-if="item.hosts?.length">
      <span v-for="host in item.hosts" @click.stop="$emit('clickHost', host)">
        {{ host.host }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { DataStep } from "../type";
import { computed } from "vue";

const props = defineProps<{ item: any; start: any }>();
const emit = defineEmits<{
  (e: "click"): void;
  (e: "clickHost", host: DataStep["hosts"][number]): void;
}>();

const defaultColor = "#d4f8c3";
const colorMap = {
  success: "#30d567",
  error: "#ff4238",
  running: "#ecf752",
  waiting: "#89beb2",
};
const currentColor = computed(() => {
  return props.item.status in colorMap ? colorMap[props.item.status] : defaultColor;
});
</script>

<style scoped lang="scss">
.step-layout {
  border-radius: 8px;
  color: rgb(51, 51, 51);
  font-family: "微软雅黑";
  background-color: var(--pColor);
  max-width: 400px;
  min-width: 100px;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
.structure-title {
  position: absolute;
  width: 300px;
  text-align: left;
  pointer-events: none;
  left: 0;
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 8px 10px;
  background: #8ebeb2;

  .type {
    font-weight: bold;
    text-align: center;
  }

  .title {
    margin: 0 20px;
  }

  .icons {
    img {
      width: 20px;
      height: 20px;
      :not(:last-child) {
        margin-right: 5px;
      }
    }
  }
}

.step-hosts {
  padding: 5px;
  display: flex;
  justify-content: center;
  background: #fff;
  font-size: 12px;
  flex-wrap: wrap;

  span {
    padding: 6px 10px;
    border: 2px solid var(--statusColor);
    color: var(--statusColor);
    border-radius: 6px;
    cursor: pointer;
    margin: 5px;
  }
}
</style>
