
<template>
  <el-popover placement="bottom-start" trigger="click" :width="props.width" ref="popoverRef">
    <template #reference>
      <el-input  style="width: 100%;"
                       v-model="keyword"
                       :prefix-icon="Plus"
                       :placeholder="props.placeholder"
                       :style="{'width': props.width+'px'}"
                       clearable
                       @input="changeInput"
                       class="no-border-input"
                       :disabled="disabled"
      >
      </el-input>
    </template>
    <div class="container">
      <el-table
          :data="searchList"        style="width: 100%"
          @row-click="clickRow"
          :show-header="props.showHeader"
          max-height="200px"
      >
        <el-table-column
            v-for="item in showConfig"
            :prop="item.prop"
            :label="item.label"
            show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </div>
  </el-popover>
</template>

<script setup lang="ts">import { ref } from "vue";
import { post } from "@/utils/request.ts";
import { Plus } from "@element-plus/icons-vue";

const keyword = ref("");
const popoverRef = ref();

interface showConfig {
  prop: string;
  label: string;
}

const props = defineProps({
  requestApi: {
    type: String,
    default: ""
  },
  width: {
    type: Number,
    default: 1000
  },
  showConfig: {
    type: Array as () => showConfig[],
    default: () => []
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  placeholder: {
    type: String,
    default: ""
  },
  disabled: {
    type: Boolean,
    default: false
  }
});

const searchList = ref([]);

const changeInput = (inputStr: string) => {
  if (!props.requestApi || props.requestApi === "") {
    return;
  }
  post(props.requestApi, { keyword: keyword.value }).then((res: any) => {
    searchList.value = res;
  });
};

const emit = defineEmits(['selectedCallBack']);

const clickRow = (row: any) => {
  emit('selectedCallBack', row);
  popoverRef.value.hide();
};

const beforeShow = () => {
  if (searchList.value.length === 0) {
    popoverRef.value.hide();
  }
};


</script>

<style scoped lang="scss">
.no-border-input {
  :deep(.el-input__wrapper) {
    border: none !important;
    box-shadow: none !important;
  }

  :deep(.el-input__inner) {
    border: none !important;
    box-shadow: none !important;
  }
}
</style>