import { Vue, Component, Prop, Watch, Inject, Ref } from 'vue-property-decorator'
import { FieldDef } from '../../type'

@Component
export default class FieldMixins extends Vue {
  @Prop() def!: FieldDef

  @Inject() getForm!: () => Record<string, any>

  @Inject() getDisabled!: () => boolean

  @Inject({ default: () => () => null }) getRowForm!: () => Record<string, any>

  @Inject({ default: () => () => '' }) getProp!: () => string

  get rowForm () {
    return this.getRowForm()
  }

  get actualForm () {
    return this.getForm()
  }

  get form () {
    return this.rowForm || this.actualForm
  }

  get label (): string {
    return this.options?.showLabel ? (this.def?.label || '') : ''
  }

  get model (): string {
    return this.def?.model
  }

  get rules () {
    // const rules = this.def?.rules || []
    // if (this.def.type === 'upload') {
    //   rules.push({ validator: (this as any).uploadingValidator })
    // }
    return (this.def?.rules || []).map(v => {
      return Object.assign({ form: this.actualForm, rowForm: this.rowForm }, v)
    })
  }

  get disabled () {
    const vm = this as any
    if (vm.options?.editAble === true) {
      return false
    }
    if (vm.options?.editAble === false) {
      return true
    }
    return this.getDisabled() || resovle()
    function resovle (): boolean {
      const d = vm.options?.disabled
      if (typeof d === 'function') {
        return !!d({ value: vm.value, rowForm: vm.rowForm, form: vm.actualForm })
      }
      return d
    }
  }

  get defaultValue () {
    return this.options?.defaultValue
  }

  get value () {
    const v = this.form[this.model]
    if (v === undefined) {
      this.$set(this.form, this.model, this.defaultValue || null)
    }
    return this.form[this.model]
  }

  set value (val: any) {
    this.form[this.model] = val
  }

  get prop () {
    const p = this.getProp()
    return p ? `${p}.${this.model}` : this.model
  }

  // 需要各自的组件重写默认值
  get options () {
    return this.def?.options
  }

  // note: remove it beacause has issue on table removing items
  // beforeDestroy () {
  //   this.value = undefined
  // }
}