<template>
  <el-container>
    <el-main class="nopadding">
      <el-card style="margin-bottom: 10px">
        <el-steps
          :active="actives"
          spac="400px"
          align-center=""
          style="padding-top: 20px"
        >
          <el-step
            :title="item.name"
            v-for="item in flowSteps"
            :key="item.id"
          ></el-step>
        </el-steps>
      </el-card>
     
    </el-main>
  </el-container>
</template>
<!--工单进度组件-->
<script>

export default {
  
  name: "workstep",
  data() {
    return {
       sort: 0,
      actives: 4,
      flowSteps: [],
    };
  },
  mounted() {
    this.workId = this.$route.query.id;
    this.getFlowSteps();
  },
  methods: {
   getFlowSteps() {
 
      this.$API.wf.ticket.ticketFlowSteps.req(this.workId).then((res) => {;
      this.flowSteps = res
       this.$API.wf.ticket.ticketItem.req(this.workId).then((res) => {
          let state = res.state;
                let dat = this.flowSteps.filter((item) => {
                  return item.id == state;
                })
                this.sort = dat[0].sort;
                this.actives = this.flowSteps.indexOf(dat[0]);
                if (this.flowSteps.length - this.actives > 1) {
                } else {
                  this.actives = this.flowSteps.length;
                }
      });
       });
      
      
           
    },
  },
};
</script>

<style scoped>
</style>
