import { Component, Watch } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import {
  FormWidget,
  ValidatedField,
  WidgetWrapper,
} from '@devsun/form-generator/dist';
import cloneDeep from 'lodash/cloneDeep';
import get from 'lodash/get';

@Component({
  components: {
    WidgetWrapper,
  },
})
export default class MzSelect extends mixins(ValidatedField, FormWidget) {
  $refs!: {
    widget: WidgetWrapper;
  };

  dictionaryModel: string[] = [];

  @Watch('dictionaryModel')
  changeValue(newValue: any) {
    this.$refs.widget.inputEvents?.input({
      ...newValue,
    });
  }

  get label(): string {
    return this.fieldNode?.rawAttrs?.label || '';
  }

  get card() {
    return cloneDeep(
      this.$store.getters['registryService/services/servicesCard']
    );
  }

  get interagencies() {
    return get(this.card, 'interagencies', []);
  }

  get options() {
    return this.interagencies.map((item) => item.class);
  }

  created() {
    if (this.value.__id) {
      this.dictionaryModel = this.value.__id;
    }
  }
}
