<template>
  <widget-wrapper v-bind="$props" ref="widget" class="q-my-md">
    <q-select v-model="ffs" :options="options" v-bind="$vnode.data && $vnode.data.props"></q-select>
  </widget-wrapper>
</template>

<script lang="ts">
import { Component, Prop, Mixins, Watch } from 'vue-property-decorator'
import { FormWidget, ValidatedField, WidgetWrapper } from '@devsun/form-generator'
import * as _ from 'lodash'

const options1 = ['Не подтверждено', 'Не актуальный']
const options2 = ['Не актуальный', 'Ошибочный']

@Component({
  components: {
    WidgetWrapper,
  },
})
export default class CustomSelect extends Mixins(ValidatedField, FormWidget) {
  @Prop() value: any
  @Prop() model: any
  @Prop() fieldNode: any
  options: any = []

  ffs: any = ''

  @Watch('ffs')
  watcher(val: any) {
    this.$refs.widget.inputEvents?.input(val)
  }

  @Watch('model', { deep: true })
  watcher2() {
    if (this.model.id) {
      this.$set(this, 'options', options2)
    } else {
      this.$set(this, 'options', options1)
    }

    const val = _.get(this.model, this.fieldNode.name)

    if (val) {
      this.ffs = this.options.find((it: any) => (it.label || it) === val) || val
    } else {
      this.ffs = this.options[0]
    }

    this.$refs.widget.inputEvents?.input(this.ffs)
  }

  mounted() {
    this.watcher2()
  }

  $refs!: {
    widget: any
  }
}
</script>
