<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :title="inDialogTiltle"
      :visible.sync="inDialogVisible"
      :append-to-body="true"
      width="20%"
      @close="handleCloseDetail"
    >
      <el-steps class="teps-con" direction="vertical" :active="1">
        <el-step
          v-for="(item, index) in approvalList"
          :title="item.name"
          :description="item.time || ''"
        ></el-step>
      </el-steps>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDetail()">取 消</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>
<script>
import {
  getAllQuarter,
  getPurchasesByIds,
  getMaterialList,
  getDetailList,
} from "@/api/firstOrder/inbound";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      inDialogVisible: false,
      inDialogTiltle: "审批流程",
      approvalList: [
        {
          name: "张三",
          time: "2021-01-01 10:10:10",
          status: "通过",
        },
        {
          name: "张三1",
          time: "",
          status: "待审核",
        },
        {
          name: "张三3",
          time: "",
          status: "待审核",
        },
      ],
    };
  },

  mounted() {
    this.inDialogVisible = this.showDialog;
  },
  methods: {
    handleCloseDetail() {
      this.inDialogVisible = false;
      this.$emit("closeDialog");
    },
  },
};
</script>
<style lang="scss" scoped>
.form-title {
  font-size: 16px;
  font-weight: 600;
  padding: 18px 0;
}
.teps-con{
  margin:0 auto 0
}
:deep(.el-dialog__body) {
  height: 300px;
}
</style>
