<template>
  <LjSelector
    ref="LjSelectorRef"
    :title="`${$t('business.selector.mtrlprice.title')} ${subtitle ? '(' + subtitle + ')' : ''}`"
    v-model:value="selectList"
    v-bind="$attrs"
    :item-key="TABLE_KEY"
    :layout="layout"
    @change-value="autoUpdateTableCheckbox"
  >
    <template #default>
      <LjVxeTable
        ref="LjTableRef"
        table-cls=""
        :columns="selColumns"
        :request-api="getData"
        :data-callback="dataCallback"
        :init-param="initParams"
        :dwname="DwnameEnum.mtrlPrice"
        pagination
        :search-col="tableSearchCol"
        :table-events="tableEvents"
        :table-props="tableProps"
        :tool-button="['refresh', 'setting', 'search']"
        :auto-load-layout="false"
        collapse-buttons
        :page-change-call-back="autoUpdateTableCheckbox"
      >
        <template #tableHeader>
          <el-input
            v-model="searchInput"
            size="default"
            class="mb-8"
            :prefix-icon="Search"
            clearable
            @input="disshow"
            @clear="() => disshow('')"
            placeholder="物料名称/备注"
          ></el-input>
        </template>
      </LjVxeTable>
    </template>
  </LjSelector>
</template>

<script lang="tsx" setup name="SelectorMtrldefDialog">
import { reactive, toRefs, ref, onMounted, nextTick, inject, watch, computed } from "vue";
// import LjDialog from "@/components/LjDialog/index.vue";
// import LjFoldLayoutDouble from "@/components/LjFoldLayoutDouble/index.vue";
import LjVxeTable from "@/components/LjVxeTable/index.vue";
// 注意: 需要按需引入使用到的第三方UI组件
// import { ElDialog, ElButton } from "element-plus";

import { useOutrep } from "./hooks/index";
import { useI18n } from "vue-i18n";
import { DwnameEnum } from "@/enums/dwnameEnum";
import { cloneDeep, pick, defaultsDeep } from "lodash-es";
import { CommonDynamicSelect } from "@/api/modules/common";
// import LjHeaderMenu from "@/components/LjHeaderMenu/indexde.vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";

import LjSelector from "@/components/LjSelector/index.vue";
import { throttle } from "lodash-es";
import { Search } from "@element-plus/icons-vue";
// import variables from "@/styles/js.module.scss";

// const props = withDefaults(defineProps<{}>(), {});

const { t } = useI18n();
const { columns } = useOutrep(t);
const selColumns: any = computed(() => {
  // let selCol: any = { type: "checkbox", width: 50, fixed: "left" };
  let selCol: any = { type: "radio", width: 50, fixed: "left" };
  let _columns = cloneDeep(columns);
  // console.log(" _columns.unshift(selCol); :>> ", _columns.unshift(selCol));
  _columns.unshift(selCol);
  console.log("_columns :>> ", _columns);
  return _columns;
});

/**
 * @description 已选列表
 */
const selectList = ref<any>([]);
const TABLE_KEY = "mtrlid";
const layout = { first: { left: { hidden: true } } };

const LjSelectorRef = ref();
const LjTableRef = ref();
// const _variables: any = variables;
const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);

const initParams = ref<any>({});
const searchInput = ref("");
const tableSearchCol = { xs: 4, sm: 5, md: 6, lg: 6, xl: 8 };
const tableProps = {
  height: "auto",
  editConfig: { trigger: "click", mode: "cell" },
  rowConfig: { isCurrent: true, isHover: true, useKey: true, keyField: TABLE_KEY }
};

const subtitle = ref("");

/**
 * @description 鼠标单击表格
 */
const handleClickTable = async ({ row, column, rowIndex }: any) => {
  const $table = LjTableRef.value.element;
  if ($table) {
    selectList.value = [row];
    $table.setRadioRow(row);
  }
};

/**
 * @description 鼠标双击表格
 */
const handleDBlClickTable = async ({ row, column, rowIndex }: any) => {
  const $table = LjTableRef.value.element;
  if ($table) {
    selectList.value = [row];
    $table.setRadioRow(row);

    LjSelectorRef.value.funcSubmit();
  }
};

// 返回绑定的事件
const tableEvents = {
  "cell-dblclick": handleDBlClickTable,
  "cell-click": handleClickTable
};

// const selectedLayout = ref<any>({
//   icon: "iconmove",
//   header: [
//     {
//       value: "name",
//       // icon: "iconuser-01",
//       textClassName: "text-ellipsis-one2"
//     },
//     {
//       value: "cuscode",
//       // label: "描述",
//       icon: "iconcode",
//       textClassName: "text-ellipsis-one2"
//     }
//   ]
//   // aside: {
//   //   value: "cuscode"
//   // }
// });

const dataCallback = (data: any) => {
  console.log("data :>> ", data);
  return {
    list: data.datatable,
    tableinfo: data.tableinfo,
    total: data.totalcnt,
    pageNum: data.pageindex,
    pageSize: data.pagesize
  };
};

const getData = (params: any) => {
  // console.log("getData params :>> ", params);
  let newParams: any = {};
  params.pageNum && (newParams.pageindex = params.pageNum);
  params.pageSize && (newParams.pagesize = params.pageSize);

  delete params.pageNum;
  delete params.pageSize;
  newParams.queryParams = initParams.value;
  console.log("params :>> ", newParams);
  newParams.dsname = "web_mtrl_choose";
  return CommonDynamicSelect(newParams, DwnameEnum.mtrlPrice);
};

const autoUpdateTableCheckbox = () => {
  const $table = LjTableRef.value.element;
  if ($table && selectList.value.length) {
    console.log("autoUpdateTableCheckbox selectLst.value :>> ", selectList.value);
    $table.clearCheckboxRow();
    let _rows: any = [];
    selectList.value.map((item: any) => {
      if ($table.getRowById(item[TABLE_KEY])) {
        _rows.push($table.getRowById(item[TABLE_KEY]));
      }
    });
    _rows.length && $table.setCheckboxRow(_rows, true);
  }
};

const getTypename = (ins_type: number) => {
  let ls_typename = "";
  switch (ins_type) {
    case 0:
      ls_typename = "钢线";
      break;
    case 1:
      ls_typename = "包边海绵";
      break;
    case 2:
      ls_typename = "无纺布";
      break;
    case 3:
      ls_typename = "布料";
      break;
    case 4:
      ls_typename = "裥绵海绵";
      break;
    case 5:
      ls_typename = "喷胶绵";
      break;
    case 6:
      ls_typename = "垫层";
      break;
    case 7:
      ls_typename = "毡类";
      break;
    case 8:
      ls_typename = "床垫辅料";
      break;
    case 9:
      ls_typename = "边带";
      break;
    case 10:
      ls_typename = "拉手";
      break;
    case 11:
      ls_typename = "刺绣位置";
      break;
    case 12:
      ls_typename = "大侧*上下压线位置";
      break;
    case 13:
      ls_typename = "外袋";
      break;
    case 14:
      ls_typename = "内袋";
      break;
    case 16:
      ls_typename = "PE";
      break;
    case 17:
      ls_typename = "外层PE";
      break;
    case 18:
      ls_typename = "PVC";
      break;
    case 19:
      ls_typename = "卷包包装";
      break;
    case 20:
      ls_typename = "牛皮纸袋";
      break;
    case 21:
      ls_typename = "蓝色PE护角";
      break;
    case 22:
      ls_typename = "无纺布袋";
      break;
    case 23:
      ls_typename = "牛皮袋护角";
      break;
    case 24:
      ls_typename = "编织袋";
      break;
    case 31:
      ls_typename = "拉链";
      break;
    case 32:
      ls_typename = "其他工艺";
      break;
    case 29:
      ls_typename = "顶布";
      break;
    case 1201:
      ls_typename = "顶布裥棉";
      break;
    case 201:
      ls_typename = "无纺布护角";
      break;
    case 33:
      ls_typename = "骨条";
      break;
    default:
      ls_typename = "类型未定义";
      break;
  }
  return ls_typename;
};

/**
 * @description 打开组件
 * @param params 入参
 */
const show = (params: any, label?: string) => {
  selectList.value = [];
  searchInput.value = "";

  subtitle.value = label ?? getTypename(params.arg_mtrltype);

  console.log("params :>> ", params, label ?? getTypename(params.mtrltype));

  console.log("show bfff initParams.value :>> ", initParams.value, params);
  initParams.value = defaultsDeep(params, initParams.value);
  console.log("show afff initParams.value :>> ", initParams.value);
  LjSelectorRef.value.show(initParams.value);
};

// 节流
const disshow = throttle((val: any) => {
  console.log("val :>> ", val);
  // initParams.value = defaultsDeep({ keyword: val }, initParams.value);
  initParams.value.keyword = val;

  console.log("disshow initParams.value :>> ", initParams.value);
}, 500);

defineExpose({
  show
});
</script>
