<template>
  <div class="table-box">
    <el-button-group>
      <el-button @click="handleOpenNewLevel">{{ $t("common.add") }}</el-button>
      <el-button @click="handleOpenModifyLevel">{{ $t("common.editText") }}</el-button>
      <el-button @click="handleDeleteCheckNode">{{ $t("common.delText") }}</el-button>
    </el-button-group>

    <TreeFilter
      ref="LjTreeRef"
      id="mtrltypeid"
      label="mtrltype"
      :searchable="false"
      :expand-on-click-node="true"
      :data-callback="dataCallback"
      :request-api="gMtrltypeList"
      @change="changeTreeFilter"
      v-if="isRouterShow"
    />
  </div>

  <LjDialog
    ref="LjDrawerRef"
    class="is-selector"
    v-bind="{
      ...drawerDefineProp
    }"
    :style="{ padding: 0 }"
  >
    <template #header>
      <div class="flx-1">
        <span class="text-h5-b">新增类别</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_bednettypelist">
import { ref, onMounted, nextTick } from "vue";
import Detail from "./detail.vue";
import { useHooks } from "./hooks/index";
import { useI18n } from "vue-i18n";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { cloneDeep } from "lodash-es";

const mainData = ref({} as any);

const { t } = useI18n();
const { LjTreeRef, LjDetailRef, fDelete, fSave, gMtrltypeList, fnSelMtrlTypeEnum } = useHooks(t);
const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);

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

// 注入刷新页面方法
const isRouterShow = ref(true);
const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);

const orderDefaultAction = [
  buttonDefault({
    label: t("common.cancelText"),
    icon: "iconchevron-left"
  }),
  buttonNew({
    label: t("common.saveText"),
    icon: "iconsave-01",
    clickFunc: item => {
      const save_data = orderStatus.value == "new" ? LjDetailRef.value?.infoParam : LjDetailRef.value?._mainData;
      fSave({ mtrltype: save_data }).then(() => {
        LjDrawerRef.value.hide();
        refresh();
      });
    }
  })
];
const orderEditAction = [
  buttonNew({
    label: t("common.saveText"),
    icon: "iconsave-01",
    clickFunc: item => {
      const save_data = LjDetailRef.value?._mainData;

      if (orderStatus.value == "new") {
        save_data.mtrltypeid = -1;
      }

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

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

const dataCallback = (data: any) => {
  // 生成物料类别枚举类
  enumMap.value.set("parentid", fnSelMtrlTypeEnum(data));
  return data;
};

const changeTreeFilter = (val: any) => {
  console.log("val :>> ", val);
  mainData.value = cloneDeep(val);
};

const LjDrawerRef = ref();
const handleOpenNewLevel = () => {
  mainData.value = {
    parentid: mainData.value.parentid
  };
  orderStatus.value = "new";
  LjDrawerRef.value.show();
};

const handleOpenModifyLevel = () => {
  orderStatus.value = "edit";
  LjDrawerRef.value.show();
};

const handleDeleteCheckNode = () => {
  const mtrltype = {
    mtrltypeid: mainData.value.mtrltypeid
  };
  fDelete(mtrltype).then(() => {
    refresh();
  });
};

const refresh = () => {
  setTimeout(() => {
    refreshCurrentPage(false);
    nextTick(() => {
      refreshCurrentPage(true);
    });
  }, 0);
};

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