<template>
   <div id="detailFlow">
      <div class="detailFlow-wrap">
        <div class="detailFlow-header">
          <span>维保编号： 1738999999999</span>
        </div>
        <div class="detailFlow-main">
           <div class="flow-item-wrap" v-for="(item, index) in flowList" :key="index">
              <div class="flow-item" :class="{'apply__status_active': item.status}">
                 <p class="flow-name" :class="{'flow-item-spec': item.name.length > 3}">{{item.name}}</p>
              </div>
              <div class="triangle-left" v-show="index !== (flowList.length - 1)" :class="{
                'triangle__status_active': item.status, 
                'triangle__colorless_active': !item.status}
              "
>
                   <span></span>
              </div>
           </div>
           <!-- <div class="flow-item-wrap">
              <div class="flow-item">
                 <p class="flow-name">支付</p>
              </div>
              <div class="triangle-left triangle__colorless_active">
                   <span></span>
              </div>
           </div>
           <div class="flow-item-wrap">
              <div class="flow-item">
                 <p class="flow-name">完成</p>
              </div>
           </div> -->
        </div>
      </div>
   </div>
</template>

<script>
//import { mapState } from 'vuex'

export default {
  name: "this",
  props: ["flowList"],
  components: {
    //addPane
  },
  computed: {
    // ...mapState({
          
    // })
  },
  mounted() {
      
  },
  data: function() {
    return {
      name: "template",
    };
  },
  methods: {

  }
};
</script>
<style scoped lang='less'>
    @import "~@/common/less/variable.less";
    #detailFlow {
      background: #FFFFFF;
      width:100%;
      min-height: 109px;
      .apply__status_active {
        color: @nice-green;
      }
      .triangle__status_active {
        border-left: 10px solid @nice-green;
      }
      .triangle__colorless_active{
        border-left: 10px solid @nice-gray;
      }
      .detailFlow-wrap {
        width: 345px;
        margin: auto;
        line-height: 50px;
        .detailFlow-header {
          color: #222222;
          text-shadow:0 .2px #222222;
          font-size: 14px;
          display: flex;
        }
        .detailFlow-main {
          /* color: #2BAA76; */
          font-weight: bold;
          display: flex;
          justify-content: space-between;
            .flow-item-wrap {
              position: relative;
              width: 50px;
            }
            .flow-item-spec {
              line-height: 18px;
            }
            .flow-item {
              font-size: 14px;
              position: relative;
              width: 28px;
              height: 35px;
              line-height: 35px;
              // margin-top: -10px;
              text-align: center;
            }      
           .triangle-left {
            position: absolute;
            top: 0;
            right:0;
            margin-top: 1.533vw;
            width:0;
            height:0;
            border-bottom: 10px solid transparent;
            border-top: 10px solid transparent;
          }
        }
        
      }
       
    }
</style>