<template>
<el-form-item :prop="prop" :label="label" :label-width="options.labelWidth" :rules="rules">
 <el-time-picker v-model="value" v-bind="props" style="width: 100%;">
  </el-time-picker>
</el-form-item>
</template>

<script lang="ts">

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

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

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

  get props () {
    return {
      disabled: this.disabled,
      isRange: this.type === 'timerange',
      valueFormat: this.options?.format,
      clearable: this.options?.clearable,
      placeholder: this.options?.placeholder || `请选择${this.def?.label}`
    }
  }

  def!: TimeDef
}
</script>
