<template>
  <div class="status-step">
    <div class="el-steps el-steps--horizontal">
      <div
        class="el-step is-horizontal is-center"
        style="flex-basis: 25%; color: rgb(0, 0, 0); margin-right: 0px"
        v-for="(item, index) in statusList"
        :key="index"
      >
        <!-- 未处理 -->
        <div class="el-step__head is-wait-a">
          <div
            class="el-step__line"
            :class="{
              Processing: activeIndex == index,
              Done: activeIndex > index
            }"
          >
            <i
              class="el-step__line-inner"
              style="transition-delay: 0ms; border-width: 0px; width: 0%"
            ></i>
          </div>
          <div class="el-step__icon is-text">
            <div
              class="el-step__icon-inner"
              :style="
                activeIndex == index
                  ? `backgroundColor: ${item.activeColor} !important`
                  : ''
              "
              :class="{
                Processing: activeIndex == index,
                Done: activeIndex > index
              }"
            ></div>
          </div>
        </div>

        <div class="el-step__main">
          <div
            class="el-step__title is-wait"
            :style="
              activeIndex == index
                ? `color: ${item.activeColor} !important`
                : ''
            "
            :class="{
              Processing_text: activeIndex == index,
              Done_text: activeIndex > index
            }"
          >
            {{ item.label }}
            <!-- {{ urgeshow(item.nodeName) }} -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { login } from '@/api/login';
  import { cm_workOrderStatus } from './dict';
  export default {
    props: {
      activeCode: {
        type: Number,
        default: 0
      },
      //默认工单审核状态
      statusList: {
        type: Array,
        default: () =>
          cm_workOrderStatus.slice(0, cm_workOrderStatus.length - 2)
      }
    },
    computed: {
      activeIndex() {
        const index = this.statusList.findIndex(
          (i) => i.code === this.activeCode
        );
        console.log(index, 'index');
        return index === -1 ? 0 : index;
      }
    },
    data() {
      return {};
    }
  };
</script>

<style lang="scss" scoped>
  @import './oaa.scss';

  .status-step {
    display: flex;
    justify-content: center;
    align-items: center;

    .el-step__title {
      white-space: nowrap;
    }
    .el-steps {
      width: 500px;
    }
  }

  // .el-step__icon.is-text {
  //   border: none !important;
  // }

  //
  .Processing {
    background: #3196fb !important;
  }

  .Processing_text {
    color: #3196fb !important;
  }

  .Done {
    background: #157a2c !important;
  }

  .Done_text {
    color: #157a2c !important;
  }

  .Stop {
    background: #cc3300 !important;
  }

  .Stop_text {
    color: #cc3300 !important;
  }

  .el-step__icon-inner {
    width: 22px;
    height: 22px;
    background-color: #d0e4d5;
    border-radius: 50%;
  }
  .el-step__title.is-wait {
    color: #9e9e9e;
  }

  .el-step__title {
    font-size: 14px;
    font-weight: bold;
    color: #c0c4cc;
  }
</style>
