<template>
  <LjSelectorSelect
    ref="selectCustRepRef"
    v-model:value="props.value"
    value-key="repid"
    allow-create
    :loading="loading"
    :remote-method="remoteMethod"
    @select="handleSelect"
    @focus="handleFocus"
    @open-modal="openModal"
  >
    <template #header>
      <div class="table-header lj-select__table">
        <div class="table-tr">
          <div class="table-td pr-4" style="width: 60px">{{ $t("table.u_cust_rep.repname") }}</div>
          <div class="table-td pr-4" style="width: 60px">{{ $t("table.u_cust_rep.deptname") }}</div>
          <div class="table-td pr-4" style="width: 50px">{{ $t("table.u_cust_rep.duty") }}</div>
          <div class="table-td pr-4" style="width: 30px">{{ $t("table.u_cust_rep.sex") }}</div>
          <div class="table-td pr-4" style="width: 100px">{{ $t("table.u_cust_rep.officetel") }}</div>
          <div class="table-td pr-4" style="width: 100px">{{ $t("table.u_cust_rep.handtel") }}</div>
          <div class="table-td pr-4" style="width: 100px">{{ $t("table.u_cust_rep.mainproduct") }}</div>
          <div class="table-td pr-4" style="width: 100px">{{ $t("table.u_cust_rep.dscrp") }}</div>
        </div>
      </div>
    </template>
    <el-option
      v-for="item in options"
      :key="item?.repid"
      :label="item.repname"
      :value="item"
      class="lj-select__table pl-10 pr-10"
      :class="{
        'w-full': item.label
      }"
    >
      <div class="table-tr">
        <div style="width: 60px" class="table-td pr-4" :title="item.repname">{{ item.repname }}</div>
        <div style="width: 60px" class="table-td pr-4 text-ellipsis-one2" :title="item.deptname">{{ item.deptname }}</div>
        <div style="width: 50px" class="table-td pr-4 text-ellipsis-one2">{{ item.duty }}</div>
        <div style="width: 30px" class="table-td pr-4 text-ellipsis-one2">{{ item.sex }}</div>
        <div style="width: 100px" class="table-td pr-4 text-ellipsis-one2">{{ item.officetel }}</div>
        <div style="width: 100px" class="table-td pr-4 text-ellipsis-one2">{{ item.handtel }}</div>
        <div style="width: 100px" class="table-td pr-4 text-ellipsis-one2">{{ item.mainproduct }}</div>
        <div style="width: 100px" class="table-td pr-4 text-ellipsis-one2">{{ item.dscrp }}</div>
      </div>
    </el-option>
  </LjSelectorSelect>
</template>

<script lang="ts" setup name="SelectorCustRepSelect">
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;
  cusid?: string | number;
  [key: string]: any;
}

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

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

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

  let newParams: any = {};

  console.log("remoteMethod -___props :>> ", props);
  newParams.pageindex = 1;
  newParams.pagesize = 5;
  newParams.queryParams = {
    cusid: props.cusid,
    keyword: queryString
  };
  newParams.dsname = "web_cust_rep_ch";
  let result = await CommonDynamicSelect(newParams, DwnameEnum.custRepCh);

  if (result.datatable.length) {
    options.value = result.datatable.map(item => {
      item.label = item.cuscode;
      return item;
    });
  } else {
    options.value = [];
  }

  loading.value = false;
};

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

const handleFocus = () => {
  emit("focus", () => {
    selectCustRepRef.value.element.blur();
  });
};

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