<template>
  <div
    class="dev-main-item"
    :data-ref="itemObj.ref"
    :data-type="itemObj.type"
    :style="{ width: (100 / 24 * itemObj.options.span).toFixed(5) + '%'}"
    @click.stop="itemClick(itemObj)"
  >
    {{ itemObj.options.labelName }}

    <template v-if="itemObj.options.type == 'time'">
      <el-time-picker
        v-model="value"
        :name="itemObj.options.name"
        :label="itemObj.options.label"
        :placeholder="itemObj.options.placeholder"
        :readonly="itemObj.options.readonly"
        :disabled="itemObj.options.disabled"
        :editable="itemObj.options.editable"
        :clearable="itemObj.options.clearable"
        :format="itemObj.options.format"
      />
    </template>

    <template v-else>
      <el-date-picker
        :key="itemObj.options.type"
        v-model="value"
        :type="itemObj.options.type"
        :name="itemObj.options.name"
        :label="itemObj.options.label"
        :placeholder="itemObj.options.placeholder"
        :start-placeholder="itemObj.options.startPlaceholder"
        :range-separator="itemObj.options.rangeSeparator"
        :end-placeholder="itemObj.options.endPlaceholder"
        :readonly="itemObj.options.readonly"
        :disabled="itemObj.options.disabled"
        :editable="itemObj.options.editable"
        :clearable="itemObj.options.clearable"
        :format="itemObj.options.format"
      />
    </template>

  </div>
</template>

<script>
import ApDevItemBase from './base/ApDevItemBase'

export default {
  name: 'ApDevDateTime',
  extends: ApDevItemBase,
  data() {
    return {
      value: ''
    }
  },
  created() {
    // 默认参数
    this.defaultOptions = {
      span: 12,
      type: 'date',
      editable: false,
      clearable: false
    }
  },
  methods: {

  }
}
</script>

<style scoped>

</style>
