<template>
  <widget-wrapper v-bind="$props" v-show="!isHidden">
    <base-label-value :padded-label="paddedGroups" class="q-my-md">
      <template v-slot:label>
        {{ fieldNode.label ? fieldNode.label : '' }}
      </template>
      <template v-slot:value>
        <q-skeleton type="QBadge" v-if="loading" />
        <q-badge
          v-else
          class="q-pa-sm"
          :style="{
            color: textColor,
            backgroundColor: bgColor,
          }"
        >
          {{ outValue }}
        </q-badge>
      </template>
    </base-label-value>
  </widget-wrapper>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import {
  ObjectMetaModelValue,
  WidgetWrapper,
} from '@devsun/form-generator/dist';
import get from 'lodash/get';
import { FormGeneratorNode } from '@devsun/form-generator';

@Component({
  components: {
    WidgetWrapper,
  },
})
export default class CardStatus extends Vue {
  @Prop() fieldNode: FormGeneratorNode;
  @Prop({ required: true }) value: ObjectMetaModelValue;

  @Prop({}) hideNulls!: boolean;
  @Prop({}) paddedGroups!: boolean;
  @Prop({}) dictionary!: string;

  private loading = true;

  get currentValue(): string {
    return this.value ? this.value.__id : '';
  }

  get outValue() {
    return get(this.referenceBook, [this.currentValue, 'value'], '');
  }

  get bgColor() {
    return get(this.referenceBook, [this.currentValue, 'bgcolor'], '#1976D2');
  }

  get textColor() {
    return get(this.referenceBook, [this.currentValue, 'textcolor'], '#fff');
  }

  async created() {
    this.loading = true;
    await this.$store.dispatch(
      'registryService/referenceBooks/initReferenceBooks',
      [
        {
          id: this.dictionary,
        },
      ]
    );
    this.loading = false;
  }

  get referenceBook() {
    return this.$store.getters['registryService/referenceBooks/referenceBooks'][
      this.dictionary
    ];
  }

  get isHidden(): boolean {
    return this.hideNulls && !this.currentValue;
  }
}
</script>
