<template>
  <FixUniDatetimePicker :class="className" :value="selectVal" type="datetime" :start="minDate" :end="maxDate" :hide-second="hideSecond" @change="changeEvent" :border="border" :clear-icon="clearable" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import FixUniDatetimePicker from '../fix-uni-datetime-picker/fix-uni-datetime-picker.vue'

export default defineComponent({
  name: 'MlDatetimePicker',
  options: {
    virtualHost: true
  },
  components: {
    FixUniDatetimePicker
  },
  props: {
    modelValue: String,
    border: {
      type: Boolean,
      default: false
    },
    minDate: [String, Number],
    maxDate: [String, Number],
    clearable: Boolean,
    hideSecond: Boolean,
    className: String
  },
  data () {
    return {
      selectVal: ''
    }
  },
  watch: {
    value (value) {
      this.selectVal = value
    }
  },
  created () {
    if (this.modelValue) {
      this.selectVal = this.modelValue
    }
  },
  methods: {
    changeEvent (value: any) {
      this.selectVal = value
      this.$emit('update:modelValue', value)
      this.$emit('change', { value })
    }
  }
})
</script>
