<template>
  <div>
    <el-steps :active="stepId" align-center finish-status="success">
      <el-step :title="item.status" v-for="(item, index) in list" :key="index">
        <template slot="description">
          <h4>{{ item.name }}</h4>
          <p>{{ item.time }}</p>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  props: {
    // 传递的值
    stepId: {
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {
      list: [
        {
          id: 1,
          status: "创建单据",
          name: "李家亮",
          time: "2023-7-12 11:13:04"
        },
        {
          id: 2,
          status: "卫生院初审",
          name: "张晓宇",
          time: "2023-7-12 11:13:04"
        },
        {
          id: 3,
          status: "集团复审",
          name: "张晓宇",
          time: "2023-7-12 11:13:04"
        },
        {
          id: 4,
          status: "审核通过",
          name: "张晓宇",
          time: "2023-7-12 11:13:04"
        },
        {
          id: 5,
          status: "归档",
          name: "李家亮",
          time: "2023-7-12 11:13:04"
        }
      ]
    };
  }
};
</script>

<style scoped lang="scss">
$bg_color: #3c64dc;
::v-deep .el-step__head.is-success {
  color: $bg_color;
  border-color: $bg_color;
}
::v-deep .el-step__title.is-success {
  color: #666;
}
::v-deep .el-step__description.is-success {
  color: #666;
}
::v-deep .el-step__title.is-process {
  color: $bg_color;
}
::v-deep .el-step__description.is-process {
  color: $bg_color;
}
::v-deep .el-step__head.is-process .el-step__icon.is-text {
  background: $bg_color;
  color: #fff;
  border: none;
}
::v-deep .el-step__description {
  font-size: 13px;
}
::v-deep .el-step__title{
    font-size: 14px;
}
</style>