<template>
  <div class="table">
    <div class="steps">
      <el-steps space="100%" :active="currentNodeIndex"  finish-status="success" style="display: flex;justify-content: center;margin-left: 45px">
        <el-step :title="item.title" v-for="(item,index) of nodeList" :key="index" >
        </el-step>
      </el-steps>
    </div>
    <div class="vertical">
      <div class="block">
        <el-timeline>
          <el-timeline-item :timestamp="item.date" placement="top" v-for="(item,index) of auditLog" :key="index" icon="el-icon-check" :color="item.color" >
            <el-card>
              <h4>{{item.title}}</h4>
              <p>{{item.msg2}}</p>
              <p>{{item.msg}}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
    </div>
    </div>
  </div>
</template>

<script>
import {applyAuditDetail, applyDetail} from '@/api/utils'
export default {
  props:{
    data:{
      type:Object,
    }
  },
  data() {
    return {
      deptList:[],
      loading: false,
      pageNo:1,
      pageSize:10,
      total:0,
      currentNode:null,
      businessId:null,
      taskId:null,
      nodeList:[],
      auditLog:[],
      currentNodeIndex:null,
    };
  },
  created() {
    // this.getDataList()
  },
  mounted() {
  },
  watch:{

  },
  methods: {
    async getDataList(){
      let res= await applyDetail({id:this.data.id,businessId:this.data.businessId})
      console.log( res,' this.nodeList')
      this.auditLog=res.data.auditLog || []
      this.nodeList=res.data.nodeList || []
      this.currentNodeIndex=res.data.currentNodeIndex
    },
  }
};
</script>

<style lang="scss" scoped>

.table {
  height: 500px !important;
  width: 100%;
  overflow: hidden;
  position: relative;
  .vertical{
    height: 400px;
    position: absolute;
    overflow-y: scroll;
    top: 70px;
    width: 100%;
  }
}
</style>
