<template>
  <div class="relative">
    <a-textarea
      ref="areaRef"
      :style="style"
      :key="updateKey"
      :size="size"
      v-model:value="data"
      :placeholder="placeholder"
      :maxlength="parseInt(maxlength)"
      :rows="rows"
      :showCount="showCount"
      :allowClear="allowClear"
      :disabled="disabled"
      :readonly="readonly"
      :autoSize="autoSize"
      @change="handleChange"
      @blur="emit('blur')"
      @click="emit('click')"
    />
    <a-button
      v-if="isPreviewComp"
      type="primary"
      @click="openCompModal"
      class="!absolute top-108px right-0"
      >预览</a-button
    >
    <span
      v-if="isShowAi && showAi"
      class="ai-box"
      @click="showAiAnswer"
      :style="{ left: `calc(${boxWidth} - 20px)` }"
      >Ai</span
    >
  </div>

  <AiAnswerModal @register="registerModal" @get-fill-val="handleFill" />

  <BasicModal title="组件预览" width="600px" :footer="null" @register="registerCompModal">
    <div class="p-4">
      <CustomComponent
        :type="compParams.zuJianLeiBie9003"
        :content="compParams.bianXieQu9373"
        :compUrl="compParams.zuJianDiZhi8745"
        allowClear
      />
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, watch, inject, onMounted } from 'vue';
  import { AiAnswerModal } from '/@/components/AiAnswer';
  import { BasicModal, useModal } from '/@/components/Modal';
  import CustomComponent from '/@/components/Form/src/components/CustomComponent.vue';

  const props = defineProps({
    size: String,
    value: {
      type: String,
      default: '',
    },
    defaultValue: {
      type: String,
      default: '',
    },
    placeholder: String,
    maxlength: {
      type: [String, Number],
      default: '',
    },
    rows: Number,
    allowClear: Boolean,
    disabled: Boolean,
    readonly: Boolean,
    showCount: Boolean,
    autoSize: Boolean,
    style: Object,
    isShowAi: {
      type: Boolean,
      default: false,
    },
    isPreviewComp: {
      type: Boolean,
      default: false,
    },
    width: String,
  });
  const compParams = inject<any>('compParams', {});
  const data = ref('');
  const updateKey = ref(0);
  const areaRef = ref();
  const showAi = ref(true);
  const boxWidth = ref('100%');
  const emit = defineEmits(['update:value', 'change', 'blur', 'click']);
  const [registerModal, { openModal }] = useModal();
  const [registerCompModal, { openModal: openCompModal }] = useModal();
  watch(
    () => props.autoSize,
    () => {
      updateKey.value++;
    },
    {
      immediate: true,
    },
  );
  watch(
    () => props.width,
    () => {
      showAi.value = false;
      setTimeout(() => {
        boxWidth.value = areaRef.value.resizableTextArea.textArea.offsetWidth + 'px';
        showAi.value = true;
      }, 300);
    },
  );
  watch(
    () => props.value,
    (val) => {
      data.value = val;
    },
  );
  watch(
    () => props.defaultValue,
    (val) => {
      if (val) {
        emit('update:value', val);
      }
    },
    {
      immediate: true,
    },
  );

  onMounted(() => {
    data.value = props.value;
  });
  const handleChange = (e) => {
    emit('update:value', e.target.value);
    emit('change', e);
    data.value = props.value === undefined ? e.target.value : props.value;
  };

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

  const handleFill = (info) => {
    data.value = info;
    emit('update:value', data.value);
    emit('change');
  };
</script>
<style lang="less" scoped>
  .ai-box {
    position: absolute;
    top: 2px;
    right: 6px;
    color: #c3c8cf;
    cursor: pointer;
    z-index: 999;
  }

  :deep(.ant-input-clear-icon) {
    right: v-bind("props.isShowAi ? '20px': '8px'");
  }
</style>
