<script lang="ts" setup>
const props = defineProps<{
  placeholder: string;
  disabled?: boolean;
  api: any;
  modelValue?: string | number | undefined;
  valueKey?: string;
  labelKey?: string;
  tableColumn: any[];
}>();

const pagination = reactive<G.Pagination>({
  total: 1,
  pages: 1,
  current: 1,
  size: 20,
});

watch(props, () => {
  loadData();
});

const dropdown = ref();
const showDropdown = () => {
  dropdown.value.handleOpen();
  pageChangeHandler(1);
};
const tableValue = ref<GoodsTypes.SearchGoodsResult[]>([]);

function pageChangeHandler(currentPage: number) {
  pagination.current = currentPage;
  props.api({ size: 20, current: currentPage }).then((res: any) => {
    tableValue.value = res.data.records;
    pagination.pages = res.data.pages;
    pagination.total = res.data.total;
  });
}
const emit = defineEmits(["change", "update:modelValue"]);

const inputValue = ref("");
function currentChangeHandler(val?: any) {
  if (!val) return;
  inputValue.value = val[props.labelKey || "name"];
  emit("change", val);
  emit("update:modelValue", val[props.valueKey || "id"]);
  pagination.total = 0;
  pagination.pages = 1;
  pagination.current = 1;
  pagination.size = 0;
  tableValue.value = [];
  dropdown.value.handleClose();

  // if (val == null) {
  //   return;
  // }
  // formData.goodsName = val.goodsName;
  // formData.goodSn = val.sn;
  // formData.unit = val.unit;
  // formData.goodsCategoryId = val.goodsCategoryId;
  // goodsDropdown.value.handleClose();
}

function loadData() {
  if (props.modelValue) {
    props.api({ size: 50, current: 1 }).then((res: any) => {
      let list = res.data.records;
      let data = list.find((item: any) => item[props.valueKey || "id"] === props.modelValue);
      inputValue.value = data[props.labelKey || "name"];
    });
  }
}

// onMounted(loadData);

// defineExpose({
//   loadData,
// });
</script>

<template>
  <ElDropdown closable ref="dropdown" trigger="contextmenu" header="选择产品" placement="bottom">
    <ElInput @click="showDropdown" v-model="inputValue" :placeholder="placeholder" readonly> </ElInput>
    <template #dropdown>
      <div class="dropdown-table-wrapper" style="width: 500px">
        <ElTable ref="dropdownTable" :data="tableValue" cell-class-name="table-cell" class="table-list" empty-text="暂无数据" header-row-class-name="table-header" row-key="index" width="500" @current-change="currentChangeHandler">
          <ElTableColumn :label="item.label" :prop="item.prop" v-for="(item, i) in props.tableColumn" :key="i" />
          <!-- <ElTableColumn label="#" type="index" />
          <ElTableColumn label="名称" prop="goodsName" />
          <ElTableColumn label="规格" prop="specParams" />
          <ElTableColumn label="单位" prop="unit" /> -->
        </ElTable>
        <div class="select-page">
          <ElPagination :page-size="pagination.size" :total="pagination.total" layout="total, prev, pager, next" @change="pageChangeHandler" />
        </div>
      </div>
    </template>
  </ElDropdown>
</template>

<style lang="stylus" scoped>

.select-page{
    display: flex;
    justify-content: flex-end;
    padding: 8px;
}
</style>
