<template>
  <view class="comp_form_input_date">
			<uni-datetime-picker type="datetimerange" :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'
import { getCarryData, clearCarryData } from '../js/index'


const props = <any>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 dateString = <any>ref([]);


const getPlaceholder = () => {
  let text:any = translate('please select')
  if(props.controls[props.KEY].disabled){
    text = ''
  }
  return text
}

const change = (e:any) => {
  emit('change:data', e)
}

onBeforeMount(async() => {
})
onMounted(()=>{
  if(props.data[props.KEY]){
    dateString.value = props.data[props.KEY].split(',')
  }else if(props.controls[props.KEY].def_value){
    dateString.value = props.controls[props.KEY].def_value
  }
  Value.value = dateString.value
  emit('change:data', dateString.value)
})
onUnmounted(() => {
})


watch(
  ()=>Value.value,
  ()=>{
    if(Value.value){
      dateString.value = props.data[props.KEY]
    }else{
      dateString.value = null
    }
    if(Value.value){
      getCarryData({ formData:props.data, key:props.KEY, carry: props.controls[props.KEY]['carry'],  })
    }else{
      clearCarryData({ formData:props.data, key:props.KEY, carry: props.controls[props.KEY]['carry'] })
    }
  },
  { 
    immediate: true,
  }
) 



</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>
