<template>
  <picker :mode="props?.mode || 'date'" @change="onChange" :end="getDay(-3)" :start="getDay()">
    <view class="nchl_day_picker">
      <text>{{ selectValue }}</text>
      <uni-icons v-if="props?.icon" :type="props?.icon" :size="props?.iconSize || 19" color="#555"></uni-icons>
    </view>
  </picker>
</template>
<style lang="scss" scoped>
.nchl_day_picker {
  color: #333;
  font-size: 28rpx;
  display: flex;
  align-items: center;

  text {
    padding-right: 10rpx;
  }
}
</style>
<script setup lang="ts">
import { getDay } from '@/common/libraries/day'
import { onMounted, ref, watch } from 'vue'

interface EnumItem {
  text?: string
  value?: string
}
const props = defineProps([
  'Enums',
  'title',
  'pickerIndex',
  'value',
  'borderTop',
  'required',
  'valueModel',
  'icon',
  'iconSize',
  'mode'
])

const selectValue = ref('')
const emit = defineEmits(['change', 'update:valueModel'])
const onChange = (e: any) => {
  selectValue.value = e?.detail?.value
  emit('update:valueModel', e?.detail?.value)
  emit('change', e?.detail?.value)
}

watch(
  () => props?.valueModel,
  val => {
    selectValue.value = val
  }
)

onMounted(() => {
  if (props?.valueModel) {
    selectValue.value = props?.valueModel
  } else {
    selectValue.value = getDay()
    emit('update:valueModel', selectValue.value)
  }
})
</script>
