<template>
  <view>
    <uv-form-item
      :labelWidth="100"
      :label="item?.taskFiledValue"
      :borderBottom="false"
      labelPosition="left"
      :required="item?.isMustfill == '1'"
    >
      <uni-datetime-picker
        :border="false"
        ref="calendarRef"
        type="daterange"
        :value="propsMessage"
        @change="change"
      />
      <template v-slot:right>
        <uv-icon name="arrow-right"></uv-icon>
      </template>
    </uv-form-item>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
const emmits = defineEmits(['update:dateRangeValue'])

let props = defineProps({
  item: Object,
  index: Number,
  dateRangeValue: String
})

const calendarRef = ref()

const change = (e: any[]) => {
  if (e.length) {
    const str = e.join('至')
    emmits('update:dateRangeValue', str)
  } else {
    emmits('update:dateRangeValue', '')
  }
}

const propsMessage = computed({
  get: () => {
    if (props.dateRangeValue) {
      return props.dateRangeValue.split('至')
    }
    return []
  },
  set: (val) => {
    emmits('update:dateRangeValue', val)
  }
})
</script>

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