<template>
  <LjSelector
    ref="LjSelectorRef"
    :title="`${$t('business.selector.softbedTemplate.title')}`"
    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.softbedQuoteChoose"
        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"
      >
      </LjVxeTable>
    </template>
  </LjSelector>
</template>

<script lang="tsx" setup name="SelectorSoftBedTemplateDialog">
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 { cloneDeep, pick, defaultsDeep } from "lodash-es";
import { CommonDynamicSelect } from "@/api/modules/common";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { ColumnProps, SearchProps } from "@/components/LjVxeTable/interface";
import LjSelector from "@/components/LjSelector/index.vue";

const { t } = useI18n();

const columns: ColumnProps<any>[] = [
  {
    field: "softbed_code",
    search: {
      el: "input",
      key: "arg_search",
      props: {
        placeholder: "软床报价唯一码/名称/编码"
      },
      order: 2,
      span: 2
    }
  }
];

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

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

const LjSelectorRef = ref();
const LjTableRef = ref();
const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);

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

/**
 * @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 dataCallback = (data: any) => {
  return {
    list: data.datatable,
    tableinfo: data.tableinfo,
    total: data.totalcnt,
    pageNum: data.pageindex,
    pageSize: data.pagesize
  };
};

const getData = (params: any) => {
  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;
  newParams.queryParams = params;
  newParams.dsname = "web_softbed_choose";
  return CommonDynamicSelect(newParams, DwnameEnum.softbedQuoteChoose);
};

const autoUpdateTableCheckbox = () => {
  const $table = LjTableRef.value.element;
  if ($table && selectList.value.length) {
    $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);
  }
};

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

defineExpose({
  show
});
</script>
