<script lang="ts" setup>
import { onMounted, ref } from 'vue';
// import { date } from 'quasar';
// import { isEmpty } from 'src/common/utils';
import ICON from 'src/config/icons';

interface Props {
  modelValue: any;
  dense?: boolean;
  disable?: boolean;
  readonly?: boolean;
  config?: any;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: null,
  dense: false,
  disable: false,
  readonly: false,
  config: () => {
    return {};
  },
});

const colorProxyDate = ref<any>(null);

onMounted(() => {
  //
});
</script>
<template>
  <q-input
    v-model="colorProxyDate"
    v-bind="config"
    :dense="config.dense === undefined ? props.dense : config.dense"
    :disable="config.disable === undefined ? props.disable : config.disable"
    :readonly="config.readonly === undefined ? props.readonly : config.readonly"
  >
    <template v-slot:append>
      <q-icon
        :name="ICON.takeColor"
        class="cursor-pointer"
        :style="{ color: colorProxyDate }"
      >
        <q-popup-proxy
          v-if="!props.readonly"
          transition-show="scale"
          transition-hide="scale"
          class="row"
        >
          <q-color v-model="colorProxyDate" v-bind="config" />
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>

<style lang="scss" scoped></style>