<template>
<el-form-item :prop="prop" :label="label" :label-width="options.labelWidth" :rules="rules">
  <el-cascader v-model="value" style="width: 100%; min-height: 33px;" v-bind="props" @change="onChange"></el-cascader>
</el-form-item>
</template>

<script lang="ts">

import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { CascaderOptions, CascaderDef } from '../../type'
import FieldMixins from './FieldMixins'

@Component
export default class CascaderControl extends mixins(FieldMixins) {
  get options () {
    return Object.assign(new CascaderOptions(), this.def?.options)
  }

  get props () {
    return {
      props: this.options?.props,
      disabled: this.disabled,
      placeholder: this.options?.placeholder || `请选择${this.def?.label}`,
      clearable: this.options?.clearable,
      options: this.options?.options || [],
      collapseTags: this.options?.collapseTags,
      filterable: this.options?.filterable,
      filterMethod: this.options?.filterMethod
    }
  }

  onChange (val: any) {
    const fn = this.options?.onChange
    if (fn) fn({ value: this.value, form: this.actualForm, rowForm: this.rowForm, items: this.options?.options || [] })
  }

  @Watch('value') valueChange (newVal: any) {
    const fn = this.options?.onValueChange
    if (fn) fn({ value: newVal, form: this.actualForm, rowForm: this.rowForm, items: this.options?.options || [] })
  }

  def!: CascaderDef
}
</script>
