<template>
  <view class="comp_form_query_date">

    <!-- <view class="input" @click="showPicker()">{{desc || '请选择'}}</view> -->
    
			<uni-datetime-picker type="datetime" :clear-icon="false" :placeholder="getPlaceholder()" v-model="dateString" @change="change" :disabled="controls[KEY].disabled"/>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { translate } from '@/common/utils/language/index'
import dayjs from 'dayjs'


const props = defineProps({
  KEY: { type: String, required: true, }, // 组件字段
  data: { type: String, default: '', }, // 组件数据 v-modal
  controls: { type: Object, default: () => {}, }, // 组件配置
})
const Value:any = computed({ //v-modal:data
  get: () => props.data[props.KEY],
  set: v => emit('update:data', v)
})
const emit = defineEmits(['update:data','change:data','focus','blur', 'clear'])


const show_picker = ref(true);
const dateString = ref('');

const getDateTime = (date) =>{
  return `${getDate(date)} ${getTime(date)}`
}
const getPlaceholder = () => {
  let text:any = translate('please select')
  if(props.controls[props.KEY].disabled){
    text = ''
  }
  return text
}
const getDate = (date,) => {
  date = new Date(date)
  const year = date.getFullYear()
  const month = date.getMonth()+1
  const day = date.getDate()
  return `${year}-${addZero(month)}-${addZero(day)}`
}

const addZero = (num) => {
  if (num < 10) {
    num = `0${num}`
  }
  return num
}
const getTime = (date ) => {
  date = new Date(date)
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
  return `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
}


const showClearIcon = ref(false)

const change = (e:any) => {
  emit('change:data', e)
  showClearIcon.value = Value.value ? true : false
}
const clear = () => {
  Value.value = ''
  emit('change:data', '')
  showClearIcon.value = false
}
const showPicker = () => {
  show_picker.value = true
}

onBeforeMount(async() => {
  dateString.value = dayjs().format('YYYY-MM-DD 00:00:00')
  Value.value = dateString.value
  emit('change:data', dateString.value)
})
onMounted(()=>{
})
onUnmounted(() => {
})





</script>

<style lang="scss">
.comp_form_query_date{
  
  width: 100%;
  box-sizing: border-box;
  background: #eee;
  border-radius: 10rpx;
  position: relative;

  > view.uni-date{
    background: none;
  }

  .icon-calendar{
    .uniui-calendar{
      margin-right: 10rpx;
    }
  }
}
</style>
