<template>
  <div class="statusBar" style="padding: 0 0 12px 0">
    <el-steps :active="sIndex" align-center :size="'mini'" :process-status="(sIndex+1)===options.length?'finish':'process'">
      <!-- : index === sIndex
            ? 'el-icon-s-check' -->

      <el-step
        :title=" item.value+ '-' +item.label"
        :icon="index <= sIndex ? 'el-icon-success' : ''"
        v-for="(item, index) in options"
        :key="item.value + index"
      ></el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  name: "statusBar",
  props: ["options", "status", "newTime"],
  /**
   * 属性集合
   * @param {Array}       options                 : 状态条数组        必填
   * @param {String}       status                  : 当前状态          必填
   */
  watch: {
    newTime: function (val) {
      if (val) {
        this.getList();
      }
    },
  },
  mounted() {
    this.getList();
  },
  data() {
    return {
      sIndex: 0,
    };
  },
  methods: {
    getList() {
      this.sIndex = this.options.findIndex((v) => v.value === this.status);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
