<!--
 * @Author: Do not edit
 * @Date: 2024-06-24 15:03:19
 * @LastEditTime: 2024-07-08 08:48:58
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div>
    <span class="dot" :class="myClass"></span>
    <span>{{ state }}</span>
  </div>
</template>
<script>
export default {
  name: "statusChart",
  props: {
    injectData: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    state() {
      return ['未开始', '生产中', '已完成'][this.injectData.orderStatus]
    },
    myClass() {
      return ['yellow', 'blue', 'green'][this.injectData.orderStatus]
    }
  },
};
</script>
<style scoped>
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 8px;
}
.green {
  background: #10DC76;
}
.yellow {
  background: #FFBD02;
}
.blue {
  background: #3B79FF;
}
</style>
