<template>
  <!-- 审核的基本信息 -->
  <div>
    <el-card class="card" shadow="hover">
      <el-descriptions title="流程基本信息">
        <el-descriptions-item
          :label="item.label"
          v-for="(item, index) in approvleTableTitle"
          :key="index"
          >{{ info[item.prop] }}</el-descriptions-item
        >
      </el-descriptions>
    </el-card>
    <el-card shadow="hover" class="card">
      <h3>详细流程节点</h3>
      <el-steps :active="historyChecks.length">
        <el-step
          v-for="(item, index) in historyChecks"
          :title="getStepTitle(item)"
          :key="index"
          :icon="getStepIcon(item)"
        >
          <div slot="description">
            <div class="name">{{ item.createName }}</div>
            <div class="time">{{ item.createTime }}</div>
            <div class="desc">{{ item.remark }}</div>
          </div>
        </el-step>
      </el-steps>
    </el-card>
    <el-card v-if="isShowApprovalForm">
       <h3>请审批</h3>
      <ApprovalForm />
    </el-card>
  </div>
</template>

<script>
import { approvleTableTitle } from "../../config";
import { historyChecks } from "../../mock";
import ApprovalForm from "./ApprovalForm.vue";
export default {
  name: "AprrovalInfo",
  components: {
    ApprovalForm,
  },
  props: {
    // 审核的信息
    info: {
      type: Object,
      default: () => ({}),
    },
    // 是否展示审核的表单
    isShowApprovalForm: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    getStepTitle(item) {
      return (item) => {
        switch (item.checkStatus) {
          case 0:
            return "发起审核";
          case 1:
            return "审核通过";
          case -2:
            return "驳回";
        }
      };
    },
    getStepIcon(item) {
      return (item) => {
        switch (item.checkStatus) {
          case 0:
            return "el-icon-s-promotion";
          case 1:
            return "el-icon-s-claim";
          case -2:
            return "el-icon-circle-close";
        }
      };
    },
  },
  data() {
    return {
      approvleTableTitle,
      historyChecks, //mock历史记录，后期通过后端接口返
    };
  },
};
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 20px;
}
</style>
