<template>
  <div v-if="!isSave">
    <a-input
      :class="[className, style && Object.keys(style).length > 0 ? 'customStyle' : '']"
      :style="{ width: width }"
      :size="size"
      v-model:value="value"
      :placeholder="placeholder"
      :maxlength="parseInt(maxlength)"
      :addonBefore="addonBefore"
      :addonAfter="addonAfter"
      :allowClear="allowClear"
      :disabled="disabled"
      :readonly="readonly"
      :bordered="bordered"
      @change="handleChange"
      @blur="emit('blur')"
      @click="emit('click')"
    >
      <template #prefix v-if="prefix">
        <Icon :icon="prefix" />
      </template>
      <template #suffix>
        <span v-if="isShowAi" class="text-[#c3c8cf] cursor-pointer text-sm" @click="showAiAnswer"
          >Ai</span
        >
        <Icon :icon="suffix" v-if="suffix" />
      </template>
    </a-input>
    <AiAnswerModal @register="registerModal" @get-fill-val="handleFill" />
  </div>
  <div v-else>{{ value }}</div>
</template>
<script lang="ts" setup>
  import { computed, onMounted, ref, watch } from 'vue';
  import { Icon } from '/@/components/Icon';
  import { AiAnswerModal } from '/@/components/AiAnswer';
  import { useModal } from '/@/components/Modal';

  const props = defineProps({
    size: String,
    value: {
      type: String,
    },
    defaultValue: {
      type: String,
      default: '',
    },
    placeholder: String,
    maxlength: {
      type: [String, Number],
      default: '',
    },
    addonBefore: String,
    addonAfter: String,
    allowClear: Boolean,
    disabled: Boolean,
    readonly: Boolean,
    prefix: String,
    suffix: String,
    bordered: {
      type: Boolean,
      default: true,
    },
    isSave: Boolean,
    style: Object,
    className: String,
    isShowAi: {
      type: Boolean,
      default: false,
    },
    width: String,
  });
  const value = ref('');
  const emit = defineEmits(['update:value', 'change', 'blur', 'click']);
  const [registerModal, { openModal }] = useModal();
  watch(
    () => props.value,
    (val) => {
      value.value = val || '';
      if (val !== undefined) emit('change', { target: { value: val } });
    },
  );
  watch(
    () => props.defaultValue,
    (val) => {
      if (val) {
        value.value = val;
        emit('update:value', val);
      }
    },
    {
      immediate: true,
    },
  );
  onMounted(() => {
    value.value = props.value || '';
  });
  const handleChange = (e) => {
    emit('update:value', e.target.value);
    emit('change', e);

    value.value = props.value === undefined ? e.target.value : props.value;
  };

  const showAiAnswer = () => {
    openModal();
  };

  const handleFill = (info) => {
    value.value = info;
    emit('update:value', value.value);
    emit('change');
  };
  const color = computed(() => {
    return props.style?.color;
  });
  const backgroundcolor = computed(() => {
    return props.style
      ? props.style['background-color'] || (props.disabled ? '#f5f5f5' : '#fff')
      : '#fff';
  });
  const border = computed(() => {
    return props.style?.border || '1px solid #d9d9d9';
  });
  const fontsize = computed(() => {
    return props.style ? props.style['font-size'] : '14px';
  });
  const fontstyle = computed(() => {
    return props.style ? props.style['font-style'] : 'normal';
  });
  const customwidth = computed(() => {
    return props.style?.width;
  });
  const height = computed(() => {
    return props.style?.height || '32px';
  });
  const textalign = computed(() => {
    return props.style ? props.style['text-align'] : 'left';
  });
</script>
<style scoped lang="less">
  .customStyle {
    width: v-bind(customwidth);
    height: v-bind(height);

    :deep(.ant-input-wrapper) {
      height: v-bind(height);
    }

    :deep(.ant-input-affix-wrapper) {
      background-color: v-bind(backgroundcolor);
      border: v-bind(border);
      width: inherit;
      height: v-bind(height);
    }

    :deep(.ant-input) {
      font-size: v-bind(fontsize);
      font-style: v-bind(fontstyle);
      color: v-bind(color);
      text-align: v-bind(textalign);
      background-color: inherit;

      &[disabled] {
        color: v-bind(color);
      }
    }
  }
</style>
