<template>
  <el-date-picker
    v-model="value"
    :type="attrs.type"
    :placeholder="attrs.placeholder?attrs.placeholder:'请选择'"
    :readonly="attrs.readonly"
    :disabled="attrs.disabled"
    :clearable="attrs.clearable"
    :start-placeholder="attrs.startPlaceholder"
    :end-placeholder="attrs.endPlaceholder"
    :editable="attrs.editable?false:true"
    :format="attrs.format"
    :align="attrs.align"
    @change="onChange"
  >
  </el-date-picker>
</template>

<script setup>
  import Format from '@/benyun/utils/dateFormat'
  
  import { computed,getCurrentInstance,nextTick  } from "vue";
  const { proxy,ctx:that } = getCurrentInstance();

  const value = ref('')
  const config = ref({})
  const emit = defineEmits();
  const props = defineProps({
    propConfig:{},
    propValue:{},
    parentValue:{}
  })
  const attrs = computed({
    get() {
      return config.value.attr ? config.value.attr : {};
    }
  })
  // 清空数据
  const clearValue = () => {
    value.value = ''
  }
  //设置配置
  const setConfig = c => {
    if(c){
      config.value = c;
    }
  }

  //获取配置
  const getConfig = () => {
    return proxy.lodash.cloneDeep(config.value)
  }
  const setValue = data => {
    if(data){
      value.value = proxy.lodash.cloneDeep(data);
    }else{
      value.value = '';
    }
  }

  const getValue = () => {
    return proxy.lodash.cloneDeep(value.value);
  }
  const defaultHandle = () => {
    if(attrs.value.defaultNow){
      value.value = setFormat(new Date());
      onChange();
    }
  }
  const setFormat = v => {
    if(!v){
      return v;
    }
    let val = '';
    let type = 'yyyy-MM-dd';
    if(attrs.value.type == 'date'){
      type = 'yyyy-MM-dd'
    }else if(attrs.value.type == 'datetime'){
      type = 'yyyy-MM-dd HH:mm:ss'
    }else if(attrs.value.type == 'year'){
      type = 'yyyy'
    }else if(attrs.value.type == 'month'){
      type = 'yyyy-MM'
    }else if(attrs.value.type == 'dates'){
      type = 'yyyy-MM-dd'
    }else if(attrs.value.type == 'week'){
      type = 'yyyy 第 WW 周'
    }else if(attrs.value.type == 'datetimerange'){
      type = 'yyyy-MM-dd HH:mm:ss'
    }else if(attrs.value.type == 'daterange'){
      type = 'yyyy-MM-dd'
    }else if(attrs.value.type == 'monthrange'){
      type = 'yyyy-MM'
    }

    if(attrs.value.type == 'dates' || attrs.value.type == 'datetimerange' || attrs.value.type == 'daterange' || attrs.value.type == 'monthrange'){
      if(v && v.constructor == Array){
        val = []
        for(const item of v){
          val.push(Format(item,type))
        }
      }else{
        val = Format(v,type);
      }
      
    }else{
      val = Format(v,type)
    }
    
    return val;
  }
  const onChange = () => {
    value.value = setFormat(value.value);
    emit('onChange',value.value);
  }
  if(props.propConfig){
    setConfig(props.propConfig)
  }
  if(props.propValue){
    setValue(props.propValue)
  }
  defineExpose({
    getValue,setValue,getConfig,setConfig,clearValue
  })
</script>

<style lang="scss" scoped>

</style>