import { ArrayDataOptions } from './../../type/common'
import { Vue, Component, Prop, Watch, Inject, Ref } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { FieldDef } from '../../type'
import FieldMixins from './FieldMixins'

@Component
export default class OptionFieldMixins extends mixins(FieldMixins) {
  // dataOptions 相关
  items: ArrayDataOptions = []

  get dataOptions () {
    const options = (this.options as any)?.options || {}
    if (typeof options === 'function') {
      const context = { form: this.getForm() }
      return options(context)
    }
    return options
  }

  @Watch('dataOptions', { immediate: true }) dataOptionsChange () {
    const vm = this as any
    if (!this.dataOptions) return
    if (this.dataOptions instanceof Promise) {
      this.dataOptions.then(data => {
        if (Array.isArray(data)) {
          this.items = data
        } else {
          this.items = transform(data)
        }
        postHandle()
      })
    } else {
      const data = this.dataOptions
      if (Array.isArray(data)) {
        this.items = data
      } else {
        this.items = transform(data)
      }
      postHandle()
    }

    function postHandle () {
      if (!vm.value || Array.isArray(vm.value)) return
      if (!vm.items.some((v: any) => v.__value === vm.value)) vm.value = vm.defaultValue || null
    }

    function transform (data: Record<string, string> = {}): ArrayDataOptions {
      return Object.entries(data).map(([k, v]) => {
        return {
          __label: v,
          __value: k
        }
      })
    }
  }
}