<template>
  <el-steps
    :active="active"
    align-center
    process-status="finish"
    style="padding: 12px 0 18px 0"
  >
    <el-step
      :title="tab.label"
      v-for="(tab, index) in dstatusOptions"
      :key="tab.name + index"
    ></el-step>
  </el-steps>
</template>

<script>
export default {
  props: ["dstatus"],
  data() {
    return {
      active: 0,
      status: this.dstatus,
      // 状态
      dstatusOptions: [
        { id: "1", label: "待业务审核" },
        { id: "2", label: "待财务审核" },
        { id: "3", label: "待财务核销票" },
        { id: "4", label: "退票已完成" },
      ],
    };
  },
  watch: {
    dstatus: function (val) {
      this.status = val;
      if (this.status !== "") {
        this.initForm();
      }
    },
  },

  methods: {
    async initForm() {
      this.active = this.dstatusOptions.findIndex((v) => v.id === this.dstatus);
    },
  },
};
</script>

<style>
</style>