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

<script lang="ts">

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

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

  get type () {
    return this.options.type
  }

  get props () {
    return {
      disabled: this.disabled,
      type: this.type,
      valueFormat: this.options?.format || ((this.type === 'daterange' || this.type === 'date') ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'),
      clearable: this.options?.clearable,
      rangeSeparator: '~',
      defaultTime: this.options?.defaultTime,
      startPlaceholder: '请选择开始日期',
      endPlaceholder: '请选择结束日期',
      placeholder: this.options?.placeholder || `请选择${this.def?.label}`,
      pickerOptions: {
        disabledDate: this.options?.disabledDate && this.options?.disabledDate({ form: this.actualForm, rowForm: this.rowForm })
      }
    }
  }

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

  def!: DateDef
}
</script>
