<template>
  <div class="form-item-box zj-email-wrap" :style="{ width: width }">
    <el-autocomplete v-model="props.email" v-bind="$attrs" :placeholder="placeholder" :fetch-suggestions="querySearch"
      :trigger-on-focus="false" class="inline-input" @select="handleSelect" @input="onInput" />
    <!-- <el-icon class="errorIcon">
      <circle-close-filled />
    </el-icon>
    <el-icon class="checkIcon">
      <circle-check-filled />
    </el-icon> -->
  </div>
</template>

<script setup>
import { COMPONENT_WIDTH } from '@/constant';
import { ref, defineProps, defineEmits, defineExpose, onMounted } from "vue";
const props = defineProps({
  //获取组件传值
  placeholder: {
    default: "请填写邮箱",
    type: String
  },
  email: {
    default: "",
    type: String
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  }
});

const emits = defineEmits(["update:email"]);
const onInput = (e) => {
  emits("update:email", e);
};
const restaurants = ref([]);
const createFilter = (queryString) => {
  return (item) => {
    return item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};
const querySearch = (queryString, callback) => {
  let results = JSON.parse(JSON.stringify(restaurants.value)); //把数组的浅复制换成深复制
  if (queryString.indexOf("@") > -1) {
    results.length = 0;
    callback(results);
    return false;
  }
  for (let item in results) {
    results[item].value = queryString + "" + restaurants.value[item].value;
  }
  callback(results);
};

const loadAll = () => {
  return [
    { value: "@qq.com" },
    { value: "@mosty.com" },
    { value: "@163.com" },
    { value: "@outlook.com" },
    { value: "@sohu.com" }
  ];
};
const handleSelect = (item) => {
  emits("update:email", item.value);
};

onMounted(() => {
  restaurants.value = loadAll();
});
</script>

<style lang="scss" scoped>
.zj-email-wrap {
  ::v-deep .el-autocomplete {
    width: 100%;
  }
}
</style>
