<template>
  <div class="main-box">
    <LjFoldLayout ref="LjFoldLayoutRef" v-bind="layoutSetting" :dwname="dwname">
      <template #left>
        <TreeFilter
          ref="LjTreeRef"
          id="mtrltypeid"
          title="物料分类"
          label="mtrltype"
          :expand-on-click-node="true"
          :request-api="getMtrlType"
          @change="changeTreeFilter"
        />
      </template>
      <div class="main-box flx-col">
        <LjVxeTable
          ref="VxeTableRef"
          row-key="mtrlid"
          :columns="columns"
          :request-api="getData"
          :data-callback="dataCallback"
          :dwname="dwname"
          :table-props="tableProps"
          :table-events="tableEvents"
          :tool-button="['export', 'refresh', 'setting', 'search', 'location']"
          :init-param="initParams"
          :auto-load-layout="false"
          pagination
        >
        </LjVxeTable>
      </div>
    </LjFoldLayout>
  </div>

  <LjDialog
    ref="LjDrawerRef"
    class="is-selector"
    v-bind="{
      ...drawerDefineProp
    }"
    :style="{ padding: 0 }"
  >
    <template #header>
      <div class="flx-1">
        <span class="text-h5-b">物料: {{ mtrlname }}</span>
      </div>
    </template>
    <div class="flx-1 h-full">
      <LjHeaderMenu :data="mainData" :action="orderStatus ? orderEditAction : orderDefaultAction" />
      <Detail class="flx-1" :data="mainData" :status="orderStatus" :enum="enumMap" />
    </div>
  </LjDialog>
</template>

<script setup lang="ts" name="baseinfo_erpmtrlprice_list">
import { ref, onMounted, provide } from "vue";
import Detail from "./detail.vue";
import { useHooks } from "./hooks/index";
import LjDialog from "@/components/LjDialog/index.vue";
import LjHeaderMenu from "@/components/LjHeaderMenu/index.vue";
import { useI18n } from "vue-i18n";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { cloneDeep } from "lodash-es";
import { GetERPMtrlPriceList, GetERPMtrlTypeList } from "@/api/modules/common";
import { transformTreeData, traverseNode } from "@/utils/index";

const dwname = "web_erpmtrlprice_list";
const mainData = ref({});
const tableProps = {
  height: "auto",
  editConfig: { trigger: "click", mode: "cell" }
};

const layoutSetting = {
  dwname: dwname,
  right: {
    hidden: true
  }
};

const { t } = useI18n();
const { VxeTableRef, LjDetailRef, VxeTableMxRef, columns, fSave, initParams } = useHooks(t);
const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);

const orderStatus = ref("");
const mtrlname = ref("");
const enumMap = ref(new Map());

const orderDefaultAction = [
  buttonDefault({
    label: t("common.cancelText"),
    icon: "iconchevron-left"
  }),
  buttonNew({
    label: t("common.saveText"),
    icon: "iconsave-01",
    clickFunc: item => {
      const save_data = LjDetailRef.value?._mainData;

      fSave({ mtrldefList: [save_data] }).then(() => {
        LjDrawerRef.value.hide();
      });
    }
  })
];
const orderEditAction = [
  buttonNew({
    label: t("common.saveText"),
    icon: "iconsave-01",
    clickFunc: item => {
      const save_data = LjDetailRef.value?._mainData;

      fSave({ mtrldefList: [save_data] }).then(() => {
        LjDrawerRef.value.hide();
      });
    }
  })
];

const changeTreeFilter = (val: any) => {
  console.log("val :>> ", val);
  // initParams.value.mtrltypeid = val.mtrltypeid;
  let mtrltypeids = [] as Number[];
  traverseNode(val, (node: any) => node?.mtrltypeid >= 0 && mtrltypeids.push(parseInt(node.mtrltypeid)));
  initParams.value.mtrltypeids = mtrltypeids.length > 0 ? mtrltypeids : undefined;
};

/*
 * @description 抽屉默认属性
 */
const drawerDefineProp = {
  draggable: true,
  overflow: true,
  width: "40%"
  // modalClass: "lj-file-dialog"
};

const getData = (params: any) => {
  let newParams: any = params;
  params.pageNum && (newParams.pageindex = params.pageNum);
  params.pageSize && (newParams.pagesize = params.pageSize);

  delete params.pageNum;
  delete params.pageSize;
  return GetERPMtrlPriceList(newParams);
};

const dataCallback = (data: any) => {
  return {
    list: data.mtrldefList,
    total: data.totalcnt,
    pageNum: data.pageindex,
    pageSize: data.pagesize
  };
};

const getMtrlType = async () => {
  const data = await GetERPMtrlTypeList();
  let arr = data.reList;
  arr.unshift({
    value: -1,
    text: "全部",
    data: {
      mtrltypeid: -1,
      mtrltype: "全部",
      inuse: 1,
      parentid: 0
    }
  });
  return transformTreeData(data.reList);
};

const LjDrawerRef = ref();
const handleDBlClickTable = ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }: any) => {
  // 弹窗
  mainData.value = cloneDeep(row);
  mtrlname.value = row.name;
  orderStatus.value = "edit";
  LjDrawerRef.value.show();
};

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