<template>
  <div class="steps">
    <div class="steps-wrapper">
      <ul class="steps-container" :class="{ stepsActive: showDown }">
        <li v-for="(item, index) in stepList" :key="index" class="steps-item">
          <div class="steps-item-title" :class="processesMarkClass(item, index)">
            {{ item.title }}
          </div>
          <div class="steps-item-content">{{ item.content }}</div>
        </li>
      </ul>
      <div v-if="showDown" class="steps-down" @click="openDown = false">
        <span class="steps-down__txt">查看更多</span>
        <cr-icon type="arrow-down" color="#999999" size="14px" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    stepList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      openDown: true
    };
  },
  computed: {
    showDown() {
      return this.stepList.length > 2 && this.openDown;
    }
  },
  methods: {
    processesMarkClass(item, index) {
      if (index === 0) {
        if (item.title === '财务处理') {
          return 'time';
        }
        return 'high';
      }
      return '';
    }
  }
};
</script>
<style lang="less">
.steps {
  padding: 20px 8px 12px 8px;
  overflow: hidden;

  &-wrapper {
    border-radius: 6px;
    overflow: hidden;
    position: relative;
  }

  &-down {
    position: absolute;
    bottom: 0;
    height: 25px;
    // line-height: 25px;
    width: 100%;
    background-color: @gray-1;
    display: flex;
    align-items: center;
    justify-content: center;
    &__txt {
      .text-size(12);
      color: @gray-4;
    }
  }

  &-container {
    padding: 14px 18px 10px 18px;
    background-color: @gray-1;
    min-height: 98px;
    &.stepsActive {
      height: 98px;
    }
  }
  &-item {
    &:last-child {
      .steps-item-content {
        display: none;
      }
    }
    &-title {
      .text-size(14);
      color: @black;
      padding-left: 32px;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        left: 4.5px;
        top: 50%;
        transform: translateY(-4.5px);
        width: 7px;
        height: 7px;
        background-color: @gray-7;
        border-radius: 50%;
      }

      &.high::before {
        background: @gradient-red;
      }

      &.time::before {
        width: 15px;
        height: 15px;
        top: 2px;
        left: 0;
        background: url(~@/assets/images/electronicInvoice/time.png) no-repeat;
        background-size: 100% 100%;
        transform: translateY(0);
      }
    }
    &-content {
      .text-size(12);
      color: @gray-4;
      padding-left: 32px;
      padding-bottom: 10px;
      padding-top: 3px;
      position: relative;
      min-height: 15px;
      &::before {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        background-color: @gray-7;
        left: 7.5px;
        top: 0;
      }
    }
  }
}
</style>
