<template>
  <div>
    <a-timeline>
      <a-timeline-item
        v-for="(item, index) in processList"
        :key="index"
        :color="item.checkResult === 'PASS' ? 'green' : 'red'"
      >
        <div class="examine_progress mx-auto relative">
          <div class="flex justify-between">
            <span class="font-bold">{{ item.checkUserName }}</span>
            <span v-if="item.checkResult === 'PASS'" class="text-success"
              >通过</span
            >
            <span v-else class="text-error">拒绝</span>
          </div>
          <p class="my-2">{{ item.rejectReason }}</p>
          <p class="text-gray-400 mb-0">{{ item.checkTime }}</p>
        </div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script>
export default {
  name: "RepairProgress",
  props: {
    processList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    formatData(data, status) {
      const result = data.find((item) => item.value === status.toString());
      return result ? result.label : "";
    },
  },
};
</script>
<style lang="less" scoped>
.examine_progress {
  width: 96%;
  min-height: 58px;
  background: #fafafa;
  border-radius: 4px;
  padding: 5px 20px;
  &:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 8px solid #fafafa;
    position: absolute;
    top: 5px;
    left: -8px;
  }
}
</style>
