<template>
  <view>
    <uv-form-item
      :labelWidth="100"
      :label="item?.taskFiledValue"
      :borderBottom="false"
      labelPosition="left"
      :required="item?.isMustfill == '1'"
      @click="showDateTime"
    >
      <uv-input
        input-align="right"
        v-model="propsMessage"
        disabled
        disabledColor="#ffffff"
        :placeholder="`请选择${item?.taskFiledValue}`"
        border="none"
      />
      <template v-slot:right>
        <uv-icon name="arrow-right"></uv-icon>
      </template>
    </uv-form-item>

    <uv-datetime-picker
      ref="datetimePicker"
      :minDate="minDate"
      :value="propsMessage"
      mode="datetime"
      @confirm="confirm"
    />
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import dayjs from 'dayjs'

const emmits = defineEmits(['update:dateTimeValue'])

let props = defineProps({
  item: Object,
  index: Number,
  disabled: Boolean,
  dateTimeValue: String
})

const minDate = ref()

const datetimePicker = ref()
const showDateTime = () => {
  if (props.disabled) return
  const timestamp = dayjs().subtract(15, 'day').valueOf()
  minDate.value = timestamp
  datetimePicker.value.open()
}
const confirm = (e: any) => {
  const date = dayjs(e.value).format('YYYY-MM-DD HH:mm')
  emmits('update:dateTimeValue', date)
}

const propsMessage = computed({
  get: () => {
    return props.dateTimeValue
  },
  set: (val) => {
    emmits('update:dateTimeValue', val)
  }
})
</script>

<style lang="scss" scoped></style>
