<!--
 * Ag Grid 自定义日期输入组件
  -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { date } from 'quasar';
import { isEmpty } from 'src/common/utils';

const props = defineProps<{
  params: any;
}>();

defineExpose({
  getDate,
  setDate,
  setInputAriaLabel,
  onClear,
});

// ref
const eInput = ref<any>(null);
const qDateRef = ref<any>(null);

const proxyDate = ref<any>('2012/');

onMounted(() => {
  console.log('props.params', props.params);
});

function proxyShow() {
  let dateHtml = qDateRef.value.$el;
  dateHtml.classList.add('ag-custom-component-popup');
}

function getDate() {
  return new Date(proxyDate.value);
}

function setDate(data: any) {
  const formattedString = date.formatDate(data, 'YYYY/MM/DD');
  proxyDate.value = formattedString;
}

function setInputAriaLabel(label: any) {
  eInput.value.setAttribute('aria-label', label);
}

function onClear() {
  eInput.value.value = null;
  proxyDate.value = null;
  props.params.api.setFilterModel(null);
}

function onOk() {
  if (isEmpty(proxyDate.value)) {
    onClear();
  } else {
    eInput.value.value = proxyDate.value;
    props.params.onDateChanged();
  }
}

function inputChange(inputEvent: any) {
  proxyDate.value = inputEvent.currentTarget.value;
}
</script>
<template>
  <div class="my-ag-grid-date-component">
    <div
      class="ag-input-wrapper custom-date-filter"
      role="presentation"
      ref="flatpickr"
    >
      <input
        type="text"
        ref="eInput"
        data-input
        placeholder="YYYY/MM/DD"
        style="width: 100%"
        @input="inputChange"
      />
      <q-icon class="my-icon" name="bi-calendar4-week">
        <q-popup-proxy
          @show="proxyShow"
          cover
          transition-show="scale"
          transition-hide="scale"
        >
          <q-date v-model="proxyDate" minimal ref="qDateRef">
            <div class="row items-center justify-end q-gutter-sm">
              <q-btn
                label="取消"
                color="primary"
                size="sm"
                outline
                v-close-popup
              />
              <q-btn
                label="确定"
                color="primary"
                size="sm"
                unelevated
                v-close-popup
                @click="onOk"
              />
            </div>
          </q-date>
        </q-popup-proxy>
      </q-icon>
      <q-icon
        class="my-icon my-icon-clear"
        name="bi-x-lg"
        title="清除"
        data-clear
        @click="onClear"
      />
    </div>
  </div>
</template>
<style lang="scss">
.my-ag-grid-date-component {
  box-sizing: border-box;
  // border: 1px solid red;
  width: 100%;

  .custom-date-filter {
    width: 100%;
    position: relative;
    > input {
      cursor: pointer;
      overflow: visible;
      text-transform: none;
      outline: none;
      flex: 1 1 auto;
      margin: 0;
      width: 100%;
      background-color: var(--ag-background-color);
      border: var(--ag-borders-input) var(--ag-input-border-color);
      color: var(--my-ag-grid-primary);
      // 5px + 13px + 2px + 13px + 2px
      padding-right: 35px;
      padding-left: var(--ag-grid-size);
      padding-top: 1px;
      padding-bottom: 1px;
      min-height: calc(var(--ag-grid-size) * 4);
      min-width: 0;
      border-radius: var(--ag-border-radius);
      &:focus {
        outline: none;
        box-shadow: var(--ag-input-focus-box-shadow);
        border-color: var(--ag-input-focus-border-color);
      }
      &::-webkit-input-placeholder {
        /* WebKit, Blink, Edge */
        color: rgba(0, 0, 0, 0.205);
        font-size: 12px;
      }
    }
    .my-icon {
      position: absolute;
      right: 5px;
      color: var(--my-ag-grid-primary);
      cursor: pointer;
      &:hover {
        color: var(--my-ag-grid-active);
      }
    }
    .my-icon-clear {
      // 5px + 13px + 2px
      right: 20px;
    }
  }
}
</style>
