<template>
  <div class="flow-stamp-container">
    <img
      v-if="status == STATUS.APPROVED"
      :style="styleObject"
      src="@/assets/stamp/approved.svg"
      alt=""
    />
    <img
      v-else-if="status == STATUS.REJECTED"
      :style="styleObject"
      src="@/assets/stamp/rejected.svg"
      alt=""
    />
    <img
      v-else-if="status == STATUS.UNDERWAY"
      :style="styleObject"
      src="@/assets/stamp/underway.svg"
      alt=""
    />
    <img
      v-else-if="status == STATUS.CANCELLED"
      :style="styleObject"
      src="@/assets/stamp/canceled.svg"
      alt=""
    />
  </div>
</template>

<script>
import { STATUS } from '@/views/workFlow/common/flowConstant';

export default {
  name: 'FlowStatusStamp',
  props: {
    status: {
      type: [Number, String],
      required: false
    },
    size: {
      type: Number,
      default: 48
    }
  },
  computed: {
    styleObject() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`
      };
    }
  },
  data() {
    return {
      STATUS
    };
  }
};
</script>

<style lang="less" scoped>
.flow-stamp-container {
  img {
    overflow: hidden;
    background-color: transparent;
    z-index: 999;
  }
}
</style>
