<template>
  <LjSelectorSelect
    ref="selectStationRef"
    v-model:value="props.value"
    value-key="mtrlid"
    :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: 120px; max-width: 120px; min-width: 120px">
            {{ $t("table.u_mtrl_price.name") }}
          </div>
          <div class="table-td pr-4" style="width: 60px; max-width: 60px; min-width: 60px" v-if="isBuliao">
            {{ $t("table.u_mtrl_price.cloth_width") }}
          </div>
          <div class="table-td pr-4" style="width: 60px; max-width: 60px; min-width: 60px" v-if="isBuliao">
            {{ $t("table.u_mtrl_price.gram_weight") }}
          </div>
          <div class="table-td pr-4" style="width: 60px; max-width: 60px; min-width: 60px">
            {{ $t("table.u_mtrl_price.thickness") }}
          </div>
          <div class="table-td pr-4" style="width: 60px; max-width: 60px; min-width: 60px">
            {{ $t("table.u_mtrl_price.priceunit") }}
          </div>
          <div class="table-td pr-4" style="width: 60px; max-width: 60px; min-width: 60px" v-if="pricePower">
            {{ $t("table.u_mtrl_price.pricelistprice") }}
          </div>
          <div class="table-td pr-4" style="width: 180px; max-width: 180px; min-width: 180px">
            {{ $t("table.u_mtrl_price.dscrp") }}
          </div>
          <!-- <div class="table-td pr-4" style="width: 60px">{{ $t("table.u_outrepdef.outrepdscrp") }}</div>
          <div class="table-td pr-4" style="width: 30px">{{ $t("table.u_outrepdef.isuse") }}</div> -->
        </div>
      </div>
    </template>
    <el-option
      v-for="item in options"
      :key="item.mtrlid"
      :label="item.name"
      :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; max-width: 120px; min-width: 120px"
            class="table-td pr-4 text-ellipsis-two break-word"
            :title="item.mtrlname"
          >
            {{ item.mtrlname }}
          </div>
          <div style="width: 60px; max-width: 60px; min-width: 60px" class="table-td pr-4 text-ellipsis-two break-word">
            {{ Number(item.cloth_width) }}
          </div>
          <div style="width: 60px; max-width: 60px; min-width: 60px" class="table-td pr-4 text-ellipsis-two break-word">
            {{ Number(item.gram_weight) }}
          </div>
          <div style="width: 60px; max-width: 60px; min-width: 60px" class="table-td pr-4 text-ellipsis-two break-word">
            {{ Number(item.thickness) }}
          </div>
          <div style="width: 60px; max-width: 60px; min-width: 60px" class="table-td pr-4 text-ellipsis-two break-word">
            {{ item.priceunit }}
          </div>
          <div style="width: 60px; max-width: 60px; min-width: 60px" class="table-td mr-4 overflow-hidden" v-if="pricePower">
            {{ isFilterPrice(item.pricelistprice) }}
          </div>
          <div
            style="width: 180px; max-width: 180px; min-width: 180px"
            class="table-td pr-4 text-ellipsis-two break-word"
            :title="item.dscrp"
          >
            {{ item.dscrp }}
          </div>
        </div>
      </template>
    </el-option>
    <!-- <template #footer>
      <el-radio-group v-model="isuse" size="small" @change="remoteMethod">
        <el-radio-button label="全部" value="全部" />
        <el-radio-button label="有效" value="有效" />
        <el-radio-button label="无效" value="无效" />
      </el-radio-group>
    </template> -->
  </LjSelectorSelect>
</template>

<script lang="ts" setup name="SelectorMtrldefSelect">
import { ref, computed, nextTick } from "vue";
import { CommonDynamicSelect } from "@/api/modules/common";
import { DwnameEnum } from "@/enums/dwnameEnum";
import LjSelectorSelect from "@/components/LjSelector/select.vue";
import { useUserStore } from "@/stores/modules/user";
import { isFilterPrice } from "@/utils/index";

interface ProTableProps {
  value: any;
  mtrltype: any;
  pricelistid?: any;
  pricelistidfn?: any;
  [key: string]: any;
}

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

const options = ref<any[]>([]);
// const isuse = ref("有效");
const selectStationRef = ref();

const pricePower = computed(() => {
  return userInfo.rsltFunids.includes(96);
});

const remoteMethod = async (queryString: string) => {
  console.log("remoteMethod props :>> ", props, queryString);
  loading.value = true;
  let _pid = props.pricelistidfn && props.pricelistidfn();
  console.log("_pid :>> ", _pid);

  // if (!_pid) {
  //   return false;
  // }

  if (props.mtrltype == 1201) {
    // 顶布裥棉
    options.value = [
      {
        label: "顶布裥棉1",
        mtrlid: 1,
        mtrltype: 1201,
        mtrlname: "顶布裥棉1",
        priceunit: "",
        price: 0,
        gram_weight: 0,
        cloth_width: 0,
        if_inputqty: 0,
        if_areaprice: 0,
        if_subspecs: 0,
        thickness: 0,
        dscrp: "",
        createtime: null,
        createby: "",
        pricelistprice: 0,
        price_formula: "",
        erp_mtrlid: 0,
        erp_mtrlcode: "",
        erp_mtrlname: "",
        erp_mtrlmode: "",
        erp_unit: "",
        erp_mtrlengname: ""
      },
      {
        label: "顶布裥棉2",
        mtrlid: 2,
        mtrltype: 1201,
        mtrlname: "顶布裥棉2",
        priceunit: "",
        price: 0,
        gram_weight: 0,
        cloth_width: 0,
        if_inputqty: 0,
        if_areaprice: 0,
        if_subspecs: 0,
        thickness: 0,
        dscrp: "",
        createtime: null,
        createby: "",
        pricelistprice: 0,
        price_formula: "",
        erp_mtrlid: 0,
        erp_mtrlcode: "",
        erp_mtrlname: "",
        erp_mtrlmode: "",
        erp_unit: "",
        erp_mtrlengname: ""
      },
      {
        label: "顶布裥棉3",
        mtrlid: 3,
        mtrltype: 1201,
        mtrlname: "顶布裥棉3",
        priceunit: "",
        price: 0,
        gram_weight: 0,
        cloth_width: 0,
        if_inputqty: 0,
        if_areaprice: 0,
        if_subspecs: 0,
        thickness: 0,
        dscrp: "",
        createtime: null,
        createby: "",
        pricelistprice: 0,
        price_formula: "",
        erp_mtrlid: 0,
        erp_mtrlcode: "",
        erp_mtrlname: "",
        erp_mtrlmode: "",
        erp_unit: "",
        erp_mtrlengname: ""
      },
      {
        label: "顶布裥棉4",
        mtrlid: 4,
        mtrltype: 1201,
        mtrlname: "顶布裥棉4",
        priceunit: "公斤",
        price: 0,
        gram_weight: 0,
        cloth_width: 0,
        if_inputqty: 0,
        if_areaprice: 0,
        if_subspecs: 0,
        thickness: 0,
        dscrp: "",
        createtime: null,
        createby: "",
        pricelistprice: 0,
        price_formula: "",
        erp_mtrlid: 0,
        erp_mtrlcode: "",
        erp_mtrlname: "",
        erp_mtrlmode: "",
        erp_unit: "",
        erp_mtrlengname: ""
      }
    ];
  } else {
    let newParams: any = {};
    newParams.pageindex = 1;
    newParams.pagesize = 5;
    newParams.queryParams = {
      keyword: queryString,
      arg_mtrltype: props.mtrltype,
      arg_pricelistid: _pid ?? props.pricelistid
    };
    newParams.dsname = "web_mtrl_choose";
    console.log("newParams :>> ", newParams);
    let result = await CommonDynamicSelect(newParams, DwnameEnum.mtrlPrice);

    console.log("result.datatable :>> ", result.datatable);
    if (result.datatable.length) {
      // options.value = result.datatable.map(item => {
      //   item.label = item.cuscode;
      //   return item;
      // });
      options.value = result.datatable;
    } else {
      options.value = [
        {
          label: "暂无数据",
          disabled: true
        }
      ];
    }
  }

  loading.value = false;
};

const handleSelect = (item: any) => {
  console.log("handleSelect 手动选择 :>> ", item);
  emit("select", item);
  // emit("select", item, () => {
  //   console.log("handleSelect 手动选择 :>>endsss :>> ", selectStationRef.value);
  //   // nextTick(() => {
  //   selectStationRef.value.element.blur();
  //   // });
  // });
};

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

const isBuliao = computed(() => {
  return props.mtrltype === 3;
});
</script>

<style lang="scss">
.lj-select-mtrldef__popper {
  max-width: 520px !important;
  min-width: 520px !important;
}
</style>
