<script lang="ts">
import Vue, { PropType, defineComponent } from 'vue';
import { mapGetters } from 'vuex';

interface Dot {
  stateBackground: string;
  stateDisplay: string;
}

export default defineComponent({

  name: 'DotState',

  props:      {
    value: {
      type:    Object as PropType<Dot>,
      default: null
    },
    color: {
      type:    String,
      default: null
    },
    label: {
      type:    String,
      default: null
    }
  },
  
  computed: {
    ...mapGetters({ t: 'i18n/t' }),
    bg(): string | null {
      return this.value?.stateBackground || this.color;
    },

    msg(): string | null {
      let text = this.value?.stateDisplay || this.label;
      let zhText = this.t(`stateLabel.${ text }`)
      return zhText ? zhText : text
    }
    
  }
});
</script>

<template>
  <div style="display: flex;flex-direction: row;align-items: center;">
    <div :class="{ [bg]: true }"></div>
    <span style="margin-left: 5px;">{{ msg }}</span>
    
  </div>
  
</template>
<style lang="scss" scoped>
  .bg-error {
    width: 10px; /* 圆点的宽度 */
    height: 10px; /* 圆点的高度 */
    background-color: #DD0C17; /* 圆点的颜色 */
    border-radius: 50%; /* 设置为圆形 */
  }
  .bg-darker {
    width: 10px; /* 圆点的宽度 */
    height: 10px; /* 圆点的高度 */
    background-color: #DD0C17; /* 圆点的颜色 */
    border-radius: 50%; /* 设置为圆形 */
  }
  .bg-success {
    width: 10px; /* 圆点的宽度 */
    height: 10px; /* 圆点的高度 */
    background-color: #95F204 !important; /* 圆点的颜色 */
    border-radius: 50%; /* 设置为圆形 */
  }
  .bg-warning {
    width: 10px; /* 圆点的宽度 */
    height: 10px; /* 圆点的高度 */
    background-color: #DAC342; /* 圆点的颜色 */
    border-radius: 50%; /* 设置为圆形 */
  }
  .bg-info {
    width: 10px; /* 圆点的宽度 */
    height: 10px; /* 圆点的高度 */
    background-color: #1890FF; /* 圆点的颜色 */
    border-radius: 50%; /* 设置为圆形 */
  }
</style>
