<template>
  <el-scrollbar height="935px">
    <div
      class="gowth-path2"
      :style="{
        height: `${position(stageProcessList.length - 1).topNum + 20}px`,
      }"
    >
      <div
        class="path-item"
        @click.native="toFinish(item)"
        :style="position(index)"
        v-for="(item, index) of stageProcessList"
      >
        <template v-if="(index + 1) % 2">
          <div class="item-link">
            <div class="circle"></div>
            <div
              :style="{
                width: widthConfig[index % 10],
              }"
              class="line-right"
            ></div>
          </div>
        </template>
        <div
          style="display: flex; flex-direction: column"
          :style="{
            alignItems: position(index).align,
          }"
        >
          <div>
            <div class="item-name">
              <div
                style="
                  display: inline-block;
                  border-radius: 50%;
                  line-height: 16px;
                  text-align: center;
                  margin-right: 6px;
                  width: 16px;
                  height: 16px;
                  font-size: 12px;
                  font-weight: 700;
                  background-color: #fff;
                  color: #0077ec;
                "
              >
                {{ stageProcessList.length - index }}
              </div>
              <div style="display: inline">{{ item.taskName }}</div>
            </div>
            <div class="triangle"></div>
          </div>
          <div class="f-a-c" style="justify-content: flex-end">
            <div class="item-progress">
              <el-progress
                :percentage="parseInt(item.progress)"
                :show-text="false"
                :stroke-width="6"
                :color="stateData(item).progressColor"
              />
            </div>

            <div
              class="item-state"
              :style="{
                color: stateData(item).color,
                background: stateData(item).bgColor,
              }"
            >
              {{ stateData(item).text }}
            </div>
          </div>
        </div>
        <template v-if="(index + 1) % 2 === 0">
          <div class="item-link">
            <div
              :style="{
                width: widthConfig[index % 10],
              }"
              class="line-left"
            ></div>
            <div class="circle"></div>
          </div>
        </template>
      </div>
    </div>
  </el-scrollbar>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
  stageProcessList: Array,
});

const point = [
  {
    top: 0,
    right: -40,
  },
  {
    top: 51,
    right: 167,
    align: "end",
  },
  {
    top: 144,
    right: -26,
  },
  {
    top: 234,
    right: 146,
    align: "end",
  },
  {
    top: 339,
    right: 90,
  },
  {
    top: 414,
    right: 121,
    align: "end",
  },
  {
    top: 535,
    right: 92,
  },
  {
    top: 635,
    right: 53,
    align: "end",
  },
  {
    top: 723,
    right: 51,
  },
  {
    top: 804,
    right: 53,
    align: "end",
  },
];

// 基础配置项
const widthConfig = [
  "0px",
  "20px",
  "64px",
  "40px",
  "67px",
  "40px",
  "47px",
  "80px",
  "34px",
  "65px",
];

const position = (index) => {
  if (index < 0) {
    return {
      top: `0px`,
      right: `0px`,
    };
  }
  let num = index / 10;
  // 获取倍数
  let multiple = num < 1 ? 0 : Number(Math.floor(num));

  let num2 = index % 10;

  return {
    top: `${multiple * (853 + 35) + point[num2].top}px`,
    right: `${point[num2].right}px`,
    topNum: multiple * (853 + 35) + point[num2].top,
    align: point[num2].align,
  };
};
// 基础配置项
const stateData = computed(() => {
  return (item) => {
    if (item.completionStatus === "10") {
      return {
        text: "未解锁",
        color: "#666666",
        bgColor: "rgba(102, 102, 102, 0.2)",
        progressColor: "#AEB3B8",
      };
    } else if (item.completionStatus === "0") {
      return {
        text: "未开始",
        color: "#666666",
        bgColor: "rgba(102, 102, 102, 0.2)",
        progressColor: "#AEB3B8",
      };
    } else if (item.completionStatus === "1") {
      return {
        text: "已完成",
        color: "#0077EC",
        bgColor: "rgba(0, 119, 236, 0.2)",
        progressColor: "#0077EC",
      };
    } else if (item.completionStatus === "2") {
      return {
        text: "进行中",
        color: "#F2903D",
        bgColor: "rgba(242, 144, 61, 0.2)",
        progressColor: "#F2903D",
      };
    } else if (item.completionStatus === "3") {
      return {
        text: "已结束",
        color: "#666666",
        bgColor: "rgba(102, 102, 102, 0.2)",
        progressColor: "#AEB3B8",
      };
    }
  };
});
const emit = defineEmits(["toFinish"]);
const toFinish = (item) => {
  emit("toFinish", item);
};
</script>
<style lang="scss" scoped>
.f-a-c {
  display: flex;
  align-items: center;
}
.gowth-path2 {
  position: relative;
  width: 310px;
  margin: 20px auto 31px auto;
  box-sizing: border-box;
  background-image: url(@/assets/image/growth/path2.png);
  background-size: 100%;

  :deep(.el-progress-bar__outer) {
    background-color: #aeb3b8;
  }
  .path-item {
    position: absolute;
    display: flex;
    padding-bottom: 20px;
    z-index: 9999;

    .item-link {
      height: 28px;
      display: flex;
      align-items: center;
      .line-right {
        height: 2px;
        background: linear-gradient(90deg, #ffffff 0%, #0077ec 65%);
        border-image: linear-gradient(0deg, #ffffff, #0077ec) 10 10;
      }
      .line-left {
        height: 2px;
        background: linear-gradient(-90deg, #ffffff 0%, #0077ec 65%);
        border-image: linear-gradient(-90deg, #ffffff, #0077ec) 10 10;
      }
      .circle {
        width: 10px;
        height: 10px;
        background: #ffffff;
        border-radius: 50%;
        border: 2px solid #0077ec;
      }
    }
    .item-progress {
      width: 71px;
    }
    .item-state {
      width: 48px;
      height: 16px;
      border-radius: 3px;
      text-align: center;
      line-height: 16px;
      margin-left: 4px;
      font-size: 12px;
    }
    .item-name {
      max-width: 125px;
      min-width: 40px;
      display: inline-block;
      background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
      border-radius: 4px;
      font-size: 12px;
      color: #ffffff;
      padding: 8px 8px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .triangle {
      width: 0px;
      height: 0px;
      border: 5px solid transparent;
      border-top-color: #4391f8;
      margin-left: 22px;
    }
  }
}
</style>
