<template>
  <el-input v-model="inputValue" @input="disshow" clearable @clear="handleClear" @keydown="handleKeydown">
    <template #suffix>
      <el-icon class="el-input__icon" v-if="loading">
        <Loading />
      </el-icon>
      <el-icon v-else-if="successState && !successNoMatchState" class="vxecol-green"><CircleCheckFilled /></el-icon>
      <el-icon v-else-if="successState && successNoMatchState" class="vxecol-gold"><WarningFilled /></el-icon>
      <el-icon v-else-if="successState" class="vxecol-green"><CircleCheckFilled /></el-icon>
      <el-icon v-else-if="errorState" class="vxecol-danger"><CircleCloseFilled /></el-icon>
      <el-icon v-else class="vxecol-gray" @click="openModal"><Search /></el-icon>
    </template>
  </el-input>
</template>

<script lang="ts" setup name="SelectorMtrldefSelect">
import { ref, computed, nextTick } from "vue";
import { GetERPMtrlPriceList } from "@/api/modules/common";
import { ElInput, ElIcon } from "element-plus";
import { Search, Loading, CircleCheckFilled, CircleCloseFilled, WarningFilled } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/modules/user";
import { throttle } from "lodash-es";

interface ProTableProps {
  value?: any;
  valueKey?: string;
  searchKey?: any;
  row?: any;
  setMtrlerp?: any;
}

// 默认值
const props = withDefaults(defineProps<ProTableProps>(), {
  // valueKey: "mtrlid"
});

const inputValue = computed({
  get: () => props.value,
  set: val => emit("update:value", val)
});

const { userInfo } = useUserStore();
const emit = defineEmits(["select", "update:value", "openModal", "clear"]);
const loading = ref(false);
const successState = ref(false);
const errorState = ref(false);
const successNoMatchState = ref(false);
const mtrldefList = ref<any[]>([]);

const disshow = throttle(async (queryString: any) => {
  console.log("disshow props :>> ", props, queryString);
  loading.value = true;
  errorState.value = false;
  successState.value = false;
  successNoMatchState.value = false;

  let newParams: any = {};
  newParams.pageindex = 1;
  newParams.pagesize = 5;
  // newParams.mtrlid = props.mtrlid;
  if (props.searchKey) {
    newParams[props.searchKey] = queryString;
  } else {
    newParams.keyword = queryString;
  }
  console.log("newParams :>> ", newParams);
  let result = await GetERPMtrlPriceList(newParams);

  mtrldefList.value = result.mtrldefList;
  console.log("result.datatable :>> ", result.mtrldefList);

  loading.value = false;

  if (result.mtrldefList.length > 1) {
    let matchItem = result.mtrldefList.find(o => o[props.searchKey] == queryString.trim());
    if (matchItem) {
      props.setMtrlerp(props.row, matchItem, props.searchKey);
    } else {
      successNoMatchState.value = true;
    }
    successState.value = true;
    setTimeout(() => {
      successState.value = false;
    }, 1200);
  } else if (result.mtrldefList.length == 1) {
    // emit("select", result.mtrldefList[0]);
    props.setMtrlerp(props.row, result.mtrldefList[0], props.searchKey);
    successState.value = true;
    setTimeout(() => {
      successState.value = false;
    }, 1200);
  } else {
    props.setMtrlerp(props.row, {}, props.searchKey);
    // emit("select", {});
    errorState.value = true;
    setTimeout(() => {
      errorState.value = false;
    }, 1200);
  }
}, 1000);

const openModal = (e: any) => {
  emit("openModal", e);
};

const handleClear = () => {
  emit("clear");
};
const handleKeydown = e => {
  console.log("handleKeydown e :>> ", e);
  // emit("clear");
  if (e.key == "Enter" && mtrldefList.value.length > 1) {
    emit("openModal", e);
  }
};
</script>
