<style>
  .backflowMain {
    width: 90%;
    margin: auto;
    height: auto;
    padding-left: 30px;
    border-left: 1px solid #d1d1d1;
    padding-bottom: 15px;
  }

  .backflowMain .backflow_Top {
    position: relative;
    width: 100%;
    height: 36px;
    line-height: 36px;
  }

  .backflowMain .back_Circle {
    width: 36px;
    height: 36px;
    background-color: #2961FE;
    border-radius: 50%;
    position: absolute;
    text-align: center;
    line-height: 36px;
    left: -50px;
    top: 0;
    color: #fff;
    font-size: 12px;
  }

  .backflowMain .back_Name {
    color: #2D2D2D;
    font-weight: bold;
    font-size: 15px;
  }

  .backflowMain .back_OrderStatus {
    padding: 1px 5px;
    background: #FEB528;
    color: #fff;
    font-size: 12px;
    margin-left: 10px;
    border-radius: 3px;
  }

  .backflowMain .back_Bottom {
    height: auto;
    margin: 10px 0 0 10px;
    padding-bottom: 15px;
  }

  .backflowMain .back_subList {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .backflowMain .back_Time {
    color: #2D2D2D;
    font-size: 12px;
  }

  .backflowMain .back_Names {
    color: #2D2D2D;
    font-size: 14px;
  }

  .backflowMain .back_remark {
    position: relative;
    background-color: #EEEEEF;
    min-height: 40px;
    margin-top: 13px;
    padding: 10px;
    border-radius: 5px;
  }

  .back_Bottom:last-child,
  .backflowMain:last-child {
    padding-bottom: 0;
  }

  .backflowMain .triangle_border_up {
    width: 0;
    height: 0;
    border-width: 0 7px 10px;
    border-style: solid;
    border-color: transparent transparent #EEEEEF;
    /*透明 透明  灰*/
    margin: 40px auto;
    position: absolute;
    top: -48px;
    left: 15px;
  }

  .backflowContent {
    padding-bottom: 40px;
    height: 770px;
    overflow: auto;
  }

  .backflowContent::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #F5F5F5;
  }

  /*!*定义滚动条轨道 内阴影+圆角*!*/
  .backflowContent::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*!*定义滑块 内阴影+圆角*!*/
  .backflowContent::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-color: #0ae;
  }

</style>
<template>
  <div class="backflowContent">
    <div class="backflowMain" v-for="(item,index) in DataList" :key="index">
      <div class="backflow_Top">
        <div class="back_Circle">{{item.AduitStatusName}}</div>
        <span class="back_Name">{{item.NodeName}}</span>
        <span class="back_OrderStatus" v-if="item.AuditWayName && item.SubList&&item.SubList.length>1">{{item.AuditWayName}}</span>
      </div>
      <div class="back_Bottom" v-for="(subItem,subIndex) in item.SubList" :key="subIndex">
        <div class="back_subList">
          <div>
            <span class="back_Names">{{subItem.AduitName}}</span>
            <span class="back_OrderStatus" style="background:#51BDA5"
              v-if="item.NodeName!='制单人'">{{subItem.AuditStatusName}}</span>
          </div>
          <div class="back_Time" v-if="subItem.AuditStatus!=1">{{subItem.CreateTime}}</div>
        </div>
        <div class="back_remark" v-if="subItem.AuditStatus!=1">
          <div class="triangle_border_up"></div>
          {{subItem.Description}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    queryBackBillAduitInfo
  } from '../../api/sale/bill'
  export default {
    props: {
      setingObj: {
        type: Object,
        default: null
      }
    },
    components: {

    },
    data() {
      return {
        persistent: true,
        qMsg: {
          BackId: 0
        },
        DataList: []
      }
    },
    created() {
      this.qMsg.BackId = this.setingObj.BackId;
    },
    mounted() {
      this.getStuBaclFlow();
    },
    methods: {
      getStuBaclFlow() {
        queryBackBillAduitInfo(this.qMsg).then(res => {
          if (res.Code == 1) {
            this.DataList = res.Data;
          }
        })
      }
    },
  }

</script>
