<template>
  <div class="state-box">
    <span v-if="this.injectData.status === 1">
      <svg-icon icon-class="yellow_dot" class="tip"/>
      在途
    </span>
    <span v-if="this.injectData.status === 2">
      <svg-icon icon-class="blue_dot" class="tip"/>
      已下发
    </span>
    <span v-if="this.injectData.status === 3">
      <svg-icon icon-class="green_dot" class="tip" />
      已完成
    </span>
    <span v-if="this.injectData.status === 4">
      <svg-icon icon-class="orange_dot" class="tip" />
      待下发
    </span>
  </div>
</template>
<script>
export default {
  name: 'OrderStatus',
  props: {
    injectData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      beilv: 1
    }
  },
  mounted() {
    this.beilv = document.getElementById('container').offsetWidth / 1920
    window.addEventListener('resize', () => {
      if (this.isFullScreen) {
        this.beilv = document.body.offsetWidth / 1920
      } else {
        this.beilv = document.getElementById('container').offsetWidth / 1920
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.state-box {
  .tip {
    font-size: calc(14px * var(--beilv));
    vertical-align: middle;
  }
}
</style>
