<template>
  <LjSelectorSelect
    ref="selectSoftBedTemplateRef"
    v-model:value="props.value"
    value-key="softbed_id"
    :loading="loading"
    v-bind="$attrs"
    :remote-method="remoteMethod"
    popper-class="lj-select-mtrldef__popper"
    @select="handleSelect"
    @open-modal="openModal"
  >
    <template #label v-if="$slots?.label">
      <slot name="label"></slot>
    </template>
    <template #header>
      <div class="table-header lj-select__table">
        <div class="table-tr">
          <div class="table-td pr-4" style="width: 200px; max-width: 200px; min-width: 200px">
            {{ $t("table.u_softbed.softbed_code") }}
          </div>
          <div class="table-td pr-4" style="width: 200px; max-width: 200px; min-width: 200px">
            {{ $t("table.u_softbed.template_code") }}
          </div>
          <div class="table-td pr-4" style="width: 80px; max-width: 80px; min-width: 80px">
            {{ $t("table.u_softbed.template_name") }}
          </div>
        </div>
      </div>
    </template>
    <el-option
      v-for="item in options"
      :key="item.softbed_id"
      :label="item.softbed_name"
      :value="item"
      class="lj-select__table pl-10 pr-10"
    >
      <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: 200px; max-width: 200px; min-width: 200px"
            class="table-td pr-4 text-ellipsis-one"
            :title="item.softbed_code"
          >
            {{ item.softbed_code }}
          </div>
          <div
            style="width: 200px; max-width: 200px; min-width: 200px"
            class="table-td pr-4 text-ellipsis-one"
            :title="item.softbed_relcode"
          >
            {{ item.softbed_relcode }}
          </div>
          <div style="width: 80px; max-width: 80px; min-width: 80px" class="table-td pr-4 text-ellipsis-one">
            {{ item.softbed_name }}
          </div>
        </div>
      </template>
    </el-option>
  </LjSelectorSelect>
</template>

<script lang="ts" setup name="SelectorSoftBedTemplateSelect">
import { ref, computed } 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 = {
    ...props,
    arg_search: queryString
  };
  newParams.dsname = "web_softbed_choose";
  let result = await CommonDynamicSelect(newParams, DwnameEnum.softbedQuoteChoose);

  if (result.datatable.length) {
    options.value = result.datatable;
  } else {
    options.value = [
      {
        label: "暂无数据",
        disabled: true
      }
    ];
  }

  loading.value = false;
};

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

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

const selectSoftBedTemplateRef = ref();
const toFocus = () => {
  selectSoftBedTemplateRef.value.elment.focus();
};

defineExpose({
  toFocus
});
</script>
