<template>
  <view v-if="isFromReadonly" class="ml-date-picker is-readonly">
    <view class="ml-date-picker-readonly-content">{{ modelValue }}</view>
  </view>
  <FixUniDatetimePicker v-else :class="className" v-model="selectVal" type="date" :start="minDate" :end="maxDate" :placeholder="placeholder" @change="changeEvent" :clearIcon="clearable" :border="border"/>
</template>

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

export default defineComponent({
  name: 'MlDatePicker',
  options: {
    virtualHost: true
  },
  components: {
    FixUniDatetimePicker
  },
  props: {
    modelValue: String,
    border: {
      type: Boolean,
      default: false
    },
    clearable: Boolean,
    minDate: [String, Number],
    maxDate: [String, Number],
    placeholder: {
      type: String,
      default: '请选择日期'
    },
    className: String
  },
  inject: {
    form: {
      from: 'mlForm',
      default: null
    }
  },
  data () {
    return {
      selectVal: ''
    }
  },
  computed: {
    isFromReadonly () {
      const form: any = this.form
      return form ? form.readonly : false
    }
  },
  watch: {
    modelValue (value) {
      this.selectVal = value
    }
  },
  created () {
    if (this.modelValue) {
      this.selectVal = this.modelValue
    }
  },
  methods: {
    changeEvent (value: any) {
      this.$emit('update:modelValue', value)
      this.$emit('change', { value })
    }
  }
})
</script>

<style lang="scss">
.ml-date-picker-readonly-content {
  padding: 20rpx 4rpx;
}
</style>
