<template>
  <LjSelectorSelect
    ref="selectStationRef"
    v-model:value="props.value"
    value-key="stationid"
    allow-create
    :loading="loading"
    :remote-method="remoteMethod"
    :before-select="beforeSelect"
    @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: 120px">{{ $t("table.u_cust.freight") }}</div>
          <div class="table-td pr-4" style="width: 60px">{{ $t("table.u_cust.rep") }}</div>
          <div class="table-td pr-4" style="width: 100px">{{ $t("table.u_cust.freight_tele") }}</div>
          <div class="table-td pr-4" style="width: 60px">{{ $t("table.u_cust.cusareaname") }}</div>
        </div>
      </div>
    </template>
    <el-option
      v-for="item in options"
      :key="item.stationid"
      :label="item.stationid"
      :value="item"
      class="lj-select__table pl-10 pr-10"
      :class="{
        'w-full': item.label
      }"
    >
      <template v-if="item.label">
        <div class="table-tr w-full text-center">{{ item.label }}</div>
      </template>
      <template v-else>
        <div class="table-tr">
          <div style="width: 120px" class="table-td pr-4 text-ellipsis-one" :title="item.stationname">{{ item.stationname }}</div>
          <div style="width: 60px" class="table-td pr-4 text-ellipsis-one" :title="item.rep">{{ item.rep }}</div>
          <div style="width: 100px" class="table-td pr-4 text-ellipsis-one" :title="item.handtel">{{ item.handtel }}</div>
          <div style="width: 60px" class="table-td pr-4 text-ellipsis-one">{{ item.area }}</div>
        </div>
      </template>
    </el-option>
    <template #footer>
      <el-radio-group v-model="isShowAll" size="small" @change="() => remoteMethod(props.value)">
        <el-radio-button label="客户指定货运部" value="客户指定货运部" />
        <el-radio-button label="全部货运部" value="全部货运部" :disabled="power" />
      </el-radio-group>
    </template>
  </LjSelectorSelect>
</template>

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

interface ProTableProps {
  value: any;
  cusid?: string | number;
  power?: boolean;
  checkOption?: (params: any) => boolean;
  [key: string]: any;
}

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

const options = ref<any[]>([]);
const isShowAll = ref("客户指定货运部");

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

  let newParams: any = {};
  newParams.pageindex = 1;
  newParams.pagesize = 5;
  let _tab = 1;
  if (isShowAll.value === "全部货运部") {
    _tab = 0;
  }

  if (_tab) {
    // 客户指定
    newParams.queryParams = {
      cusid: props.cusid,
      keyword: queryString
    };
    newParams.dsname = "web_station_cust_ch";
  } else {
    newParams.queryParams = {
      keyword: queryString
    };
    newParams.dsname = "web_station_ch";
  }

  let result = await CommonDynamicSelect(newParams, DwnameEnum.stationCustCh);

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

  loading.value = false;
};

const beforeSelect = (item: any) => {
  if (props.checkOption(sysOptionEnum.sys_option_706) == "1" && item.flag == 0) {
    ElMessage.error("只能选择已审核的货运部");
    return false;
  }
  return true;
};

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

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

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