<template>
  <el-input v-model="keyword" style="width:100%;height: 100%" @input="changeInput" :disabled="disabled"
            placeholder="诊断选择" ref="inputRef"></el-input>

  <el-popover placement="bottom-start" trigger="click" :width="props.width" ref="popoverRef" @before-enter="beforeShow" :virtual-ref="inputRef" @hide ="afterShow">

    <div class="container" v-if="searchList.length > 0">
      <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, unref, watch} from "vue";
import {post} from "@/utils/request.ts";

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
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const inputRef = ref();



const searchList = ref([]);
const changeInput = (inputStr: string) => {
  unref(popoverRef).popperRef?.delayHide?.()
  if (!props.requestApi || props.requestApi === "") {
    return
  }
  let tempList = inputStr.split(",");
  let searchKeyword = tempList[tempList.length - 1];
  nameList.value = []
  selectList.value = selectList.value ? selectList.value.slice(0, tempList.length) : []
  let updateKeyword = false
  for (let i = selectList.value.length - 1; i >= 0; i--) {
    if (!tempList.includes(selectList.value[i].name)) {
      selectList.value.splice(i, 1);
      updateKeyword = true
    } else {
      nameList.value.push(selectList.value[i].name)
    }
  }
  if (updateKeyword) {
    keyword.value = nameList.value.length > 0 ? nameList.value.join(",") + "," : "";
  }
  post(props.requestApi, {keyword: searchKeyword}).then((res: any) => {
    searchList.value = res;
  })
}
const emit = defineEmits(['selectedCallBack'])
const clickRow = (row: any) => {
  selectList.value.push(row)
  nameList.value.push(row.name)
  keyword.value = nameList.value.join(",") + ","

  searchList.value = []
  popoverRef.value.hide()
}
const beforeShow = () => {
  if (searchList.value.length === 0) {
    popoverRef.value.hide()
  }
}
const afterShow = () => {
  if (nameList.value.length === 0){
    keyword.value = ""
  }else {
    keyword.value = nameList.value.join(",") + ","
  }

}


const selectList = ref<any>()
const nameList = ref<any>([]);
watch(selectList, (newVal, oldVal) => {
  emit('selectedCallBack', newVal)
}, {deep: true});
const init = (list: any, nList: any) => {
  selectList.value = list;
  nameList.value = nList;
  keyword.value = nameList.value.join(",") + ","
}
defineExpose({init})
</script>
<style scoped lang="scss">

</style>