<template>
  <LjVxeTable
    ref="LjTableRef"
    :columns="columnsSim"
    :request-api="getData"
    :data-callback="dataCallback"
    :init-param="params"
    :dwname="DwnameEnum.mtrlwareStorageidChSaletask"
    pagination
    :search-col="tableSearchCol"
    :table-events="tableEvents"
    :table-props="showTableProps"
    :tool-button="['refresh', 'setting', 'search']"
    :auto-load-layout="false"
    collapse-buttons
    :page-change-call-back="autoUpdateTableCheckbox"
  >
  </LjVxeTable>
</template>

<script lang="tsx" setup name="SelectorMtrlwareSaletaskDialogMtrl">
import { reactive, toRefs, ref, onMounted, nextTick, inject, watch, computed } from "vue";
import LjVxeTable from "@/components/LjVxeTable/index.vue";

import { useI18n } from "vue-i18n";
import { DwnameEnum } from "@/enums/dwnameEnum";
import { CommonDynamicSelect } from "@/api/modules/common";

import { useMtrlwareSaletask } from "../hooks/index";
import { selectorMtrlwareProps } from "../interface/index";
import { defaultsDeep, pick, cloneDeep } from "lodash-es";

const props = withDefaults(defineProps<selectorMtrlwareProps>(), {
  params: () => ({}),
  selected: () => []
});
const emits = defineEmits(["update:params", "change"]);

const { t } = useI18n();
const { selectList, LjTableRef, columnsSim, clearCheckbox } = useMtrlwareSaletask(t);

const tableSearchCol = { xs: 4, sm: 5, md: 6, lg: 6, xl: 8 };
const TABLE_KEY = "mtrlid";
const defaultTableProps = {
  rowConfig: {
    keyField: TABLE_KEY
  }
};
const showTableProps = defaultsDeep(defaultTableProps, props.tableProps);

/**
 * @description 鼠标单击表格
 */
const handleClickTable = async (params: any) => {
  props.cellClick && props.cellClick(params);
};

/**
 * @description 当鼠标范围选择开始时会触发的事件
 */
const handleCheckboxRangeChange = (data: any) => {
  const $table = LjTableRef.value.element;
  selectList.value = data.records;
  emits("change", selectList.value, $table);
};

const handleCheckboxChange = (data: any) => {
  const $table = LjTableRef.value.element;
  console.log("mtrldef  handleCheckboxRangeChange data:>> ", data);
  !props.tabActive && (selectList.value = []);
  if (data.checked) {
    selectList.value.push(data.row);
  } else {
    selectList.value = selectList.value.filter((item: any) => item[TABLE_KEY] != data.row[TABLE_KEY]);
  }
  emits("change", selectList.value, $table);
};

// 返回绑定的事件
const tableEvents = {
  "checkbox-change": handleCheckboxChange,
  "checkbox-range-end": handleCheckboxRangeChange,
  "checkbox-all": handleCheckboxRangeChange,
  // "cell-dblclick": handleDBlClickTable,
  "cell-click": handleClickTable
};

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.lastOutware;
  delete params.pageNum;
  delete params.pageSize;
  params.scid = params.ori_scid;
  newParams.queryParams = pick(params, props.paramAttr);
  console.log("newParams :>> ", newParams);
  newParams.dsname = "web_mtrlware_storageid_ch_saletask_sim";

  return CommonDynamicSelect(newParams, DwnameEnum.mtrlwareStorageidChSaletask);
};

const autoUpdateTableCheckbox = () => {
  const $table = LjTableRef.value.element;
  if ($table && props.tabActive && props.selected.length) {
    $table.clearCheckboxRow();
    let _rows: any = [];
    props.selected.map((item: any) => {
      if ($table.getRowById(item[TABLE_KEY])) {
        _rows.push($table.getRowById(item[TABLE_KEY]));
      }
    });
    setTimeout(() => {
      _rows.length && LjTableRef.value.element.setCheckboxRow(_rows, true);
    }, 1);
  }
};

defineExpose({
  autoUpdateTableCheckbox,
  clearCheckbox
});
</script>
