<template>
  <n-date-picker
    v-model:value="state.val"
    :type="config && config.dateType ? config.dateType : 'daterange'"
    :start-placeholder="placeholder[0]"
    :end-placeholder="placeholder[1]"
    :clearable="clearable"
    :update-value-on-close="true"
    :close-on-select="true"
    :actions="null"
    @update:value="changeDate"
  >
    <template v-if="config?.icon" #date-icon>
      <n-icon />
    </template>
  </n-date-picker>
</template>
<script setup>
import {
  reactive,
  onBeforeMount,
  watch,
  getCurrentInstance,
  computed,
  nextTick,
} from "vue";

import { processError, processSuccess } from "@/utils/helper/message";
import { getParamsByObj } from "@/utils/helper/form";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;

const emit = defineEmits(["triggerChangeVal"]);
let props = defineProps({
  config: Object,
  clearable: {
    type: Boolean,
    default: () => true,
  },
  // format: {
  //   type: String,
  //   default: () => 'YYYY-MM-DD',
  // },
  placeholder: Array,
  clearCount: Number,
  val: {
    type: Array,
  },
});
const state = reactive({
  val: [],
  calcVal: ["", ""],
});
onBeforeMount(() => {
  state.val = props.val;
  if (Array.isArray(props.val) && props.val.length === 0) {
    state.val = null;
  }
});
//  :formatted-value='format' 与 val = null 有冲突
watch(
  () => props.val,
  () => {
    if (Array.isArray(props.val) && props.val.length === 0) {
      state.val = null;
    } else {
      state.val = props.val;
    }
  }
);
watch(
  () => props.clearCount,
  () => {
    nextTick(() => {
      if (Array.isArray(props.val) && props.val.length > 0) {
        state.val = props.val;
        return;
      }
      state.val = null;
    });
  }
);

// 确认 触发
const changeDate = (date, dateString) => {
  if (dateString) {
    state.calcVal[0] = dateString[0];
    state.calcVal[1] = dateString[1];
    emit("triggerChangeVal", { val: state.calcVal });
    return;
  }
  emit("triggerChangeVal", { val: [,] });
};

// 重置搜索
const resetSearch = () => {
  state.calcVal = ["", ""];
  emit("triggerChangeVal", { val: state.calcVal });
};
const getPopupContainer = () => {
  if (props.config?.config?.body) {
    return document.body;
  }
  return document.getElementById("flrangdatedom");
};
</script>

<style lang="scss" scoped>
:deep(.ant-picker-range) {
  border-radius: 20px;
  height: 32px;
  background-color: rgba($color: #777777, $alpha: 0.4);
  color: rgb(136, 136, 136);
  margin-right: 20px;
  margin-top: 8px;
}
</style>
