<template>
  <LjSelectorSelect
    ref="selectStationRef"
    v-model:value="props.value"
    value-key="cusid"
    :loading="loading"
    :remote-method="remoteMethod"
    @select="handleSelect"
    @open-modal="openModal"
  >
    <template #header>
      <div class="table-header flx">
        <div class="flx-1 pr-4">{{ $t("table.u_cust.cuscode") }}</div>
        <div class="flx-1 pr-4">{{ $t("table.u_cust.name") }}</div>
        <div class="flx-1 pr-4">{{ $t("table.u_cust.simplename") }}</div>
        <div class="flx-1 pr-4">{{ $t("table.u_cust.rep") }}</div>
      </div>
    </template>
    <el-option v-for="item in options" :key="item.cusid" :label="item.cuscode" :value="item" class="flx pl-10 pr-10">
      <div class="flx-1 pr-4">{{ item.cuscode }}</div>
      <div class="flx-1 pr-4 text-ellipsis-one" :title="item.name">{{ item.name }}</div>
      <div class="flx-1 pr-4 text-ellipsis-one">{{ item.simplename }}</div>
      <div class="flx-1 pr-4 text-ellipsis-one">{{ item.rep }}</div>
    </el-option>
  </LjSelectorSelect>
</template>

<script lang="ts" setup name="SelectorCustSelect">
import { ref } from "vue";
import { CommonDynamicSelect } from "@/api/modules/common";
import { DwnameEnum } from "@/enums/dwnameEnum";
import LjSelectorSelect from "@/components/LjSelector/select.vue";

interface ProTableProps {
  value: any;
  [key: string]: any;
}

// 默认值
const props = withDefaults(defineProps<ProTableProps>(), {});
const emit = defineEmits(["select", "update:value", "openModal"]);
const loading = ref(false);

const options = ref<any[]>([]);

const remoteMethod = async (queryString: string) => {
  loading.value = true;

  let newParams: any = {};
  newParams.pageindex = 1;
  newParams.pagesize = 5;
  newParams.queryParams = {
    cuscode: queryString
  };
  newParams.dsname = "web_cust_crm_index";
  let result = await CommonDynamicSelect(newParams, DwnameEnum.custCrm);

  options.value = result.datatable.map(item => {
    item.label = item.cuscode;
    return item;
  });

  loading.value = false;
};

const handleSelect = (item: any) => {
  emit("select", item);
};

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