<template>
  <div class="main-box">
    <LjFoldLayout ref="LjFoldLayoutRef" v-bind="layoutSetting" :dwname="dwname">
      <template #left>
        <div class="main-box flx-col">
          <LjVxeTable
            ref="VxeTableLeftRef"
            row-key="contfigtypeid"
            :columns="columns_left"
            :request-api="getTypeData"
            :data-callback="callback_left"
            :dwname="dwname_left"
            :table-props="tableProps"
            :table-events="tableEvents_left"
            :auto-load-layout="false"
            pagination
          >
            <!-- 表格 header 按钮 -->
            <template #tableHeader>
              <el-button-group>
                <el-button @click="handleOpenNewLeftTable">{{ $t("common.add") }}</el-button>
                <el-button @click="fDelete(0)">{{ $t("common.delText") }}</el-button>
                <!-- <el-button>{{ $t("common.disable") }}</el-button> -->
              </el-button-group>
            </template>
          </LjVxeTable>
        </div>
      </template>
      <div class="main-box flx-col">
        <LjVxeTable
          ref="VxeTableMidRef"
          row-key="pzid"
          :columns="columns_mid"
          :request-api="getCodeData"
          :data-callback="callback_mid"
          :dwname="dwname_mid"
          :table-props="tableProps"
          :table-events="tableEvents_mid"
          :init-param="initParams_mid"
          :auto-load-layout="false"
          pagination
        >
          <!-- 表格 header 按钮 -->
          <template #tableHeader>
            <el-button-group>
              <el-button @click="handleOpenNewMidTable">{{ $t("common.add") }}</el-button>
              <el-button @click="fDelete(1)">{{ $t("common.delText") }}</el-button>
              <!-- <el-button>{{ $t("common.disable") }}</el-button> -->
            </el-button-group>
          </template>
        </LjVxeTable>
      </div>
      <template #right>
        <div class="main-box flx-col">
          <LjVxeTable
            ref="VxeTableRightRef"
            row-key="pzid"
            :columns="columns_right"
            :request-api="getCodeMxData"
            :data-callback="callback_right"
            :dwname="dwname_right"
            :table-props="tableProps"
            :table-events="tableEvents_right"
            :init-param="initParams_right"
            :auto-load-layout="false"
            pagination
          >
            <!-- 表格 header 按钮 -->
            <template #tableHeader>
              <el-button-group>
                <el-button @click="handleOpenNewRightTable">{{ $t("common.add") }}</el-button>
                <el-button @click="fDelete(2)">{{ $t("common.delText") }}</el-button>
                <!-- <el-button>{{ $t("common.disable") }}</el-button> -->
              </el-button-group>
            </template>
          </LjVxeTable>
        </div>
      </template>
    </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" :type="detailType" />
    </div>
  </LjDialog>
</template>

<script setup lang="ts" name="baseinfo_configurelist">
import { ref, onMounted, provide } from "vue";
import { getConfigureTypeList, getConfigureCodeList, getConfigureCodeMxList } from "@/api/modules/basicinfo";
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";

const dwname = "web_configure_code";
const dwname_left = "web_configure_typelist";
const dwname_mid = "web_configure_codelist";
const dwname_right = "web_configure_codemxlist";

const mainData = ref({});
const initParams_mid = ref({ typeid: 0 as Number });
const initParams_right = ref({ pzid: 0 as Number, typeid: 0 as Number });
const detailType = ref(0);
const tableProps = {
  height: "auto",
  editConfig: { trigger: "click", mode: "cell" }
  // rowClassName: rowClsNameFunc
  // exportConfig: {
  //   filename: t("menu.saletaskmx") + formatToDate(new Date(), "YYYY-MM-DD HH:mm:ss")
  // }
};

const layoutSetting = {
  dwname: dwname,
  left: {
    width: 30
  },
  right: {
    width: 30
  }
};

const { t } = useI18n();
const {
  VxeTableLeftRef,
  VxeTableMidRef,
  VxeTableRightRef,
  LjDetailLeftRef,
  LjDetailMidRef,
  LjDetailRightRef,
  columns_left,
  columns_mid,
  columns_right,
  fSave,
  fDelete
} = 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 => {
      let save_data =
        detailType.value === 2
          ? LjDetailRightRef.value?._mainData
          : detailType.value === 1
          ? LjDetailMidRef.value?._mainData
          : LjDetailLeftRef.value?._mainData;
      if (orderStatus.value == "new") {
        save_data =
          detailType.value === 2
            ? LjDetailRightRef.value?.infoParam
            : detailType.value === 1
            ? LjDetailMidRef.value?.infoParam
            : LjDetailLeftRef.value?.infoParam;
      }
      fSave(detailType.value, { configure: save_data }).then(() => {
        LjDrawerRef.value.hide();
      });
    }
  })
];
const orderEditAction = [
  buttonNew({
    label: t("common.saveText"),
    icon: "iconsave-01",
    clickFunc: item => {
      let save_data =
        detailType.value === 2
          ? LjDetailRightRef.value?._mainData
          : detailType.value === 1
          ? LjDetailMidRef.value?._mainData
          : LjDetailLeftRef.value?._mainData;
      if (orderStatus.value == "new") {
        save_data =
          detailType.value === 2
            ? LjDetailRightRef.value?.infoParam
            : detailType.value === 1
            ? LjDetailMidRef.value?.infoParam
            : LjDetailLeftRef.value?.infoParam;
      }
      fSave(detailType.value, { configure: Object.assign({}, mainData.value, save_data) }).then(() => {
        LjDrawerRef.value.hide();
      });
    }
  })
];

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

const getTypeData = (params: any) => {
  return getConfigureTypeList(params);
};

const getCodeData = (params: any) => {
  return getConfigureCodeList(params);
};

const getCodeMxData = (params: any) => {
  return getConfigureCodeMxList(params);
};

const callback_left = (data: any) => {
  // 选中第一列
  if (data.datatable && data.datatable.length) {
    let row = data.datatable[0];
    initParams_mid.value.typeid = Number(row.contfigtypeid);
  }
  return dataCallback(data);
};

const callback_mid = (data: any) => {
  // 选中第一列
  if (data.datatable && data.datatable.length) {
    let row = data.datatable[0];
    initParams_right.value.pzid = Number(row.pzid);
    initParams_right.value.typeid = Number(row.typeid);
  }
  return dataCallback(data);
};

const callback_right = (data: any) => {
  return dataCallback(data);
};

const dataCallback = (data: any) => {
  if (data.tableinfo?.columns) {
    data.tableinfo?.columns.map((item: any) => {
      if (item?.enum) {
        enumMap.value.set(item.field, item.enum);
      }
    });
  }
  return {
    list: data.datatable,
    tableinfo: data.tableinfo,
    total: data.totalcnt,
    pageNum: data.pageindex,
    pageSize: data.pagesize
  };
};

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

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

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

const handleOpenNewLeftTable = () => {
  mainData.value = {
    contfigtypeid: 0
  };
  detailType.value = 0;
  orderStatus.value = "new";
  LjDrawerRef.value.show();
};

const handleOpenNewMidTable = () => {
  mainData.value = {
    typeid: initParams_mid.value.typeid,
    pzid: 0
  };
  detailType.value = 1;
  orderStatus.value = "new";
  LjDrawerRef.value.show();
};

const handleOpenNewRightTable = () => {
  mainData.value = {
    pzid: initParams_right.value.pzid,
    printid: 0
  };
  detailType.value = 2;
  orderStatus.value = "new";
  LjDrawerRef.value.show();
};

const handleClickLeftTable = ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }: any) => {
  initParams_mid.value.typeid = Number(row.contfigtypeid);
};

const handleClickMidTable = ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }: any) => {
  initParams_right.value.pzid = Number(row.pzid);
  initParams_right.value.typeid = Number(row.typeid);
};

const tableEvents_left = {
  "cell-dblclick": handleDBlClickLeftTable,
  "cell-click": handleClickLeftTable
};
const tableEvents_mid = {
  "cell-dblclick": handleDBlClickMidTable,
  "cell-click": handleClickMidTable
};
// 返回绑定的事件
const tableEvents_right = {
  "cell-dblclick": handleDBlClickRightTable
  // "cell-click": handleClickTable
};
</script>
