<template>
  <div class="processes">
    <div class="process" v-for="(item, index) in processtext" :key="index">
      <span
        class="p-name"
        :style="{color: processDone[index] ? 'rgb(4, 220, 223)' : 'white',}"
        >{{ item }}</span
      >
      <div class="top">
        <div :class="processDone[index] ? 'top-1-1' : 'top-1'"></div>
        <div :class="processDone[index] ? 'top-2-2' : 'top-2'"></div>
      </div>
      <div class="bottom">
        <div :class="processDone[index] ? 'bottom-1-1' : 'bottom-1'"></div>
        <div :class="processDone[index] ? 'bottom-2-2' : 'bottom-2'"
        ></div>
      </div>
    </div>
        
  </div>
</template>

<script>
export default {
  name: "ProcessSymbol",
  props: ["processtext", "processDone"], 
  mounted(){
    
  }
};
</script>

<style scoped>
.p-name {
  position: absolute;
  height: 48px;
  line-height: 48px;
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  width: 100%;
  text-align: center;
}
.processes {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-top: 12px;
}
.process {
  flex: 1;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.top {
  display: flex;
  flex-direction: row;
}
.bottom {
  display: flex;
  flex-direction: row;
}
.top-1 {
  flex: 1;
  border-top: 24px solid rgb(17, 24, 40);
  border-left: 24px solid transparent;
}
.top-1-1 {
  flex: 1;
  border-top: 24px solid #24314c;
  border-left: 24px solid transparent;
}
.top-2 {
  flex: 1;
  border-bottom: 24px solid rgb(17, 24, 40);
  border-right: 24px solid transparent;
}
.top-2-2 {
  flex: 1;
  border-bottom: 24px solid #24314c;
  border-right: 24px solid transparent;
}
.bottom-1 {
  flex: 1;
  border-bottom: 24px solid rgb(17, 24, 40);
  border-left: 24px solid transparent;
}
.bottom-1-1 {
  flex: 1;
  border-bottom: 24px solid #24314c;
  border-left: 24px solid transparent;
}
.bottom-2 {
  flex: 1;
  border-top: 24px solid rgb(17, 24, 40);
  border-right: 24px solid transparent;
}
.bottom-2-2 {
  flex: 1;
  border-top: 24px solid #24314c;
  border-right: 24px solid transparent;
}
</style>
