<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"
        >
          <span v-if="item.prop === 'checkStatus'">
            <el-tag
              size="mini"
              :type="
                $constantsTool.getTagTypeByValue('checkStatus', info[item.prop])
              "
            >
              {{
                $constantsTool.getLabelByValue("checkStatus", info[item.prop])
              }}
            </el-tag>
          </span>
          <span v-else>{{ info[item.prop] }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card shadow="hover" class="card">
      <h3>详细流程节点</h3>
      <el-steps
        :active="info.checkDetailList.length"
        align-center
        v-if="info.checkDetailList.length > 0"
      >
        <el-step
          v-for="(item, index) in info.checkDetailList"
          :title="item.statusName"
          :description="item.remark"
          :status="
            $constantsTool.getStepTypeByValue('checkStatus', item.status)
          "
          :key="index"
          :icon="$constantsTool.getIconByValue('checkStatus', item.status)"
        >
          <div slot="description">
            <div class="name">{{ item.optUserName }}</div>
            <div class="time">{{ item.createTime }}</div>
          </div>
        </el-step>
      </el-steps>
      <span v-else>无</span>
    </el-card>
    <el-card v-if="isShowApprovalForm">
      <h3>请审批</h3>
      <ApprovalForm :flowId="flowId" />
    </el-card>
  </div>
</template>

<script>
import { approvleTableTitle } from "../../config";
import ApprovalForm from "./ApprovalForm.vue";
export default {
  name: "AprrovalInfo",
  components: {
    ApprovalForm,
  },
  props: {
    // 审核的信息
    info: {
      type: Object,
      default: () => ({}),
    },
    flowId: {
      type: String,
      default: "",
    },
    // 是否展示审核的表单
    isShowApprovalForm: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    getStepTitle(item) {
      return (item) => {
        switch (item.checkStatus) {
          case 0:
            return "发起审核";
          case 1:
            return "审核通过";
          case -2:
            return "驳回";
        }
      };
    },
  },
  data() {
    return {
      approvleTableTitle,
    };
  },
  mounted() {
    console.log(this.info);
  },
};
</script>

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

  .name {
  }
  .status {
  }
}
</style>
