<template>
  <a-input
      v-model:value="modelV"
      :placeholder="placeholder"
      :show-count="showCount"
      :maxlength="maxlength"
      :validate="validate"
      @change="validateProName"
  />
  <div style="color: red; font-size: 10px" v-if="modelV && !validated">
    名称重复，请重新输入
  </div>
</template>
<script setup>
import {defineProps, defineEmits, watch, ref, onMounted} from "vue";
import {validateName} from "@/api/index1";
import {throttle} from "@/api/method";

const props = defineProps({
  value: {
    type: String,
  },
  id: {
    type: String,
  },
  placeholder: {
    type: String,
  },
  type: {
    type: Number,
    default: 1,
  },
  maxlength: {
    type: Number,
    default: 30,
  },
  showCount: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits({});

const modelV = ref();

const validating = ref(false)
const validated = ref(true)

onMounted(() => {
  modelV.value = props.value;
});

watch(
    () => props.value,
    () => {
      if (props.value !== modelV.value) {
        modelV.value = props.value;
      }
    }
);

watch(modelV, () => {
  emit("update:value", modelV.value);
});

function validate() {
  console.log('validate')
  ;
}

function validateNameFun() {
  validateName({name: props.value, type: props.type, id: props.id}).then(res => {
        validating.value = false
        validated.value = res.data.data !== 1
      }
  )
}

const throttleValidateName = throttle(validateNameFun, 500)

function validateProName() {
  validating.value = true
  validated.value = true
  props.value && throttleValidateName()
}
</script>
<style lang="scss">

  .pro {
    .ant-input-affix-wrapper {
      padding: 4px 8px;
      border-radius: 8px;
    
    }
  }
  .road {
  .ant-input-affix-wrapper {
    padding: 0px 8px;
    border-radius: 8px;
  }
  }




.b_input,
.i1_input {
  .ant-input-affix-wrapper {
    position: relative;
    display: inline-block;
    width: 88%;
    min-width: 0;
    padding: 8px 17px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 1.5715;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    transition: all 0.3s;
    display: inline-flex;
  }
}
</style>