<template>
  <LjDetail
    name="bednetInterfaceDetail"
    ref="LjDetailRef"
    v-bind="detailProps"
    :data="mainData"
    v-model:order-status="orderStatus"
    :action="orderDefaultAction"
    @after-mounted="funcAfterMound"
    :if-layout-editable="false"
    :search-col="{ xs: 3, sm: 3, md: 3, lg: 3, xl: 3 }"
    :basic-group-col="{ xs: 3, sm: 3, md: 3, lg: 3, xl: 3 }"
  >
    <template #bednetYW>
      <LjVxeTable
        ref="VxeTableMxRef"
        row-key="key"
        table-cls=""
        :data="bednetYWList"
        :columns="columns_yw"
        :dwname="DwnameEnum.bednetInterfaceYw"
        :request-auto="false"
        :table-props="tableProps_mx"
        :tool-button="[]"
        :auto-load-layout="false"
        collapseButtons
        :cellClassName="cellClassNameFn"
      >
      </LjVxeTable>
    </template>
    <template #tabNavRight="scope" v-if="orderStatus">
      <div class="flx-center flx-end flx-1" v-if="scope.active == 'bednetQD'">
        <LjHeaderMenu group-cls="flx-end" :action="qdAction"></LjHeaderMenu>
      </div>
    </template>
    <template #bednetQD>
      <LjFoldLayout ref="LjFoldLayoutRef" v-bind="layoutSetting">
        <template #left>
          <LjVxeTable
            ref="YwTableRef"
            row-key="key"
            table-cls="h-full"
            :data="bednetYWList"
            :columns="columns_yw_qd"
            :dwname="DwnameEnum.bednetInterfaceYw"
            :request-auto="false"
            :table-props="tableProps_mx"
            :tool-button="[]"
            :auto-load-layout="false"
            collapseButtons
          >
          </LjVxeTable>
        </template>
        <div class="main-box flx-col">
          <LjVxeTable
            ref="QdTableRef"
            row-key="key"
            table-cls="h-full"
            :data="bednetQDList"
            :columns="columns_qd"
            :dwname="DwnameEnum.bednetInterfaceQd"
            :request-auto="false"
            :table-props="tableProps_qd"
            :tool-button="['setting']"
            collapseButtons
            @setMergeCells="resetMergeCellsQd"
            @row-dragend="autoRowDragend"
          >
          </LjVxeTable>
        </div>
      </LjFoldLayout>
    </template>
  </LjDetail>

  <LjDialog ref="LjDialogQdRowAdd" class="is-selector" :style="{ padding: 0 }" width="480px">
    <template #header>
      <div class="flx-1">
        <span class="text-h5-b">产品清单新增</span>
      </div>
    </template>
  </LjDialog>
  <MattressDialog ref="MattressDialogRef" v-bind="MattressDialogProps" />
  <MtrldefErpDialog ref="MtrldefErpDialogRef" v-bind="MtrldefErpDialogProps" />
</template>

<script setup lang="tsx" name="bednetInterfaceDetail">
import { ref, watch, reactive, inject, onMounted, computed, nextTick, onBeforeMount } from "vue";
import { DwnameEnum } from "@/enums/dwnameEnum";
import LjDetail from "@/components/LjDetail/index.vue";
import { DetailProp } from "@/components/LjDetail/interface";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
import { useHooks } from "./hooks/index";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { CommonDynamicSelect, GetERPWrkGrpList, GetERPWrkGrpList2 } from "@/api/modules/common";
import { SaveMattressInterface, GetResetWiptype, UpdateL1Basicinfo } from "@/api/modules/quote";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import mittBus from "@/utils/mittBus";
import { MittEnum } from "@/enums/mittEnum";
import MattressDialog from "@/views/system/selector/mattress/index.vue";
import MtrldefErpDialog from "@/views/system/selector/mtrldefErp/index.vue";
import { formatToDate } from "@/utils/dateUtil";
import LjFoldLayout from "@/components/LjFoldLayout/index.vue";
import { detailAction } from "@/components/LjDetail/interface";
import { transformTreeData, autoMergeCells, isFilterPrice } from "@/utils/index";
import LjDialog from "@/components/LjDialog/index.vue";

interface detailProp {
  /**
   * @argument any 页面数据
   */
  data?: any;
  /**
   * @argument string 请求数据的api ==> 非必传
   */
  requestApi?: (params: any) => Promise<any>;
  /**
   * @argument any 基础信息，表格展示数据
   */
  // columns?: any;
  /**
   * @description 是否可编辑
   */
  status: "edit" | "new" | string;
  enum?: any;
}

const props = withDefaults(defineProps<detailProp>(), {});
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const {
  VxeTableMxRef,
  YwTableRef,
  QdTableRef,
  orderStatus,
  LjDetailRef,
  columns_detail,
  columns_yw,
  columns_yw_qd,
  columns_qd,
  mainData,
  editType,
  bednetYWList,
  bednetQDList,
  MattressDialogRef,
  MattressDialogProps,
  MtrldefErpDialogRef,
  MtrldefErpDialogProps,
  tableProps_mx,
  tableProps_qd,
  workgrpEnum,
  workgrpEnum2,
  configureTypeEnum,
  RetriveMattressInterface,
  RefreshBedNetInterfaceList,
  RefreshBedNetInterfaceQdList,
  fModelChoseMattress,
  toExcel,
  toCreateMtrl,
  toCreateORDelMtrlPf,
  JS2Audit,
  resetMergeCellsQd
} = useHooks(t);
const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);

const initParams = ref({ bednetid: 0 as Number });

const layoutSetting = reactive({});

const detailProps = reactive<DetailProp>({
  dwname: DwnameEnum.bednetInterfaceDetail,
  columns: columns_detail,
  basicDefault: {},
  header: {
    foldright: {
      width: 80
    },
    fieldNames: {
      code: "sptcode",
      codeLabel: t("table.u_spt.sptcode") + "：",
      name: "name"
    }
  },
  mould: [
    {
      id: "bednetYW",
      type: "table",
      label: "产品配置"
    },
    {
      id: "bednetQD",
      type: "table",
      label: "产品清单"
    }
  ]
});

const loadingStatus = reactive({
  save: false,
  synchsL1: false
});

const cellClassNameFn = (data: any, editable) => {
  let { column, row } = data;
  if (editable) {
    if (column.field == "bj_pzname") {
      if (
        ["垫层", "辅料"].includes(row.itemname) ||
        [
          "边带",
          "面层裥棉图案",
          "底层裥棉图案",
          "大侧裥棉图案",
          "小侧1裥棉图案",
          "小侧2裥棉图案",
          "小侧3裥棉图案",
          "拉手刺绣及其他工艺项目所有"
        ].includes(row.bj_pzname)
      ) {
        return "vxecol-danger";
      }
    }
  }
  return null;
};

const moveData = async (index: number, nextIndex: number) => {
  const $table = QdTableRef.value.element;
  let { visibleData } = $table.getTableData();
  const curRecords = $table?.getCurrentRecord();

  let prevRow = visibleData[nextIndex];
  visibleData[nextIndex] = visibleData[index];
  visibleData[index] = prevRow;

  visibleData.map((o, idx) => {
    o.printid = idx + 1;
    return o;
  });

  $table.reloadData(visibleData);
  await $table.setCurrentRow(curRecords);
  resetMergeCellsQd(() => {
    setTimeout(() => {
      $table.scrollToRow(curRecords);
    }, 0);
  });
};

const toMove = async (action: number) => {
  const $table = QdTableRef.value.element;
  let curRecords = $table?.getCurrentRecord();

  let visibleData = $table.getTableData().visibleData;

  if (!curRecords) {
    ElMessage.warning("请先选择要移动的行");
    return;
  }

  let curIdx = visibleData.findIndex(t => t === curRecords);
  console.log("curIdx :>> ", curIdx);

  if (action == 1) {
    // 上移
    if (curIdx == 0) {
      ElMessage.warning("已经是第一条了");
      return;
    }
    moveData(curIdx, curIdx - 1);
  } else if (action == -1) {
    // 下移
    if (curIdx == visibleData.length - 1) {
      ElMessage.warning("已经是最后一条了");
      return;
    }

    moveData(curIdx, curIdx + 1);
  }
};

const qdAction: detailAction[] = [
  buttonDefault({
    label: "增行",
    clickFunc: () => {
      interIndex.value = -1;
      LjDialogQdRowAdd.value.show();
    }
  }),
  buttonDefault({
    label: "插行",
    divider: true,
    clickFunc: () => {
      const $table = QdTableRef.value.element;
      const curRecords = $table?.getCurrentRecord();
      if (curRecords) {
        interIndex.value = $table.getRowIndex(curRecords);
      }
      LjDialogQdRowAdd.value.show();
    }
  }),
  buttonDefault({
    label: "上移",
    clickFunc: () => toMove(1)
  }),
  buttonDefault({
    label: "下移",
    clickFunc: () => toMove(-1),
    divider: true
  }),
  buttonDefault({
    label: "批量设置",
    clickFunc: async () => {
      let _cur = QdTableRef.value.currentEditCell;

      if (!["wrkgrpid", "wrkgrpid2", "actual_useqty"].includes(_cur.field)) {
        return ElMessage.warning("此列暂不支持批量设置(仅支持实际用量、工组)");
      }
      const $table = QdTableRef.value.element;

      const { visibleData } = $table.getTableData();
      let _data = [];

      if (visibleData) {
        let _val = visibleData[_cur.rowIndex];
        _data = visibleData.map((o, idx) => {
          if (o.actual_useqty > 0 && idx > _cur.rowIndex) {
            o[_cur.field] = _val[_cur.field];
            if (_cur.field == "wrkgrpid1") {
              o.wrkgrpcode1 = _val.wrkgrpcode1;
            } else if (_cur.field == "wrkgrpid2") {
              o.wrkgrpcode2 = _val.wrkgrpcode2;
            }
          }
          if (_cur.field == "actual_useqty") {
            if (o.useqty > 0 && idx > _cur.rowIndex) {
              o[_cur.field] = _val[_cur.field];
            }
          }
          return o;
        });

        await $table.reloadData(_data);
        resetMergeCellsQd();

        ElMessage.success("批设成功（有实际用量的数据行）");
      }
    }
  })
];

const orderDefaultAction = [
  buttonDefault({
    label: t("common.cancelText"),
    icon: "iconchevron-left",
    limited: () => {
      return !orderStatus.value;
    },
    clickFunc: item => {
      const _cur = mainData.value[0];
      router.push({
        name: "bednetInterfaceDetail",
        params: {
          id: _cur.bednetid
        },
        query: {
          code: _cur.bednetcode
        },
        replace: true
      });
    }
  }),
  buttonDefault({
    label: t("common.saveText"),
    loading: () => loadingStatus.save,
    limited: () => !orderStatus.value,
    clickFunc: async item => {
      try {
        await LjDetailRef.value.toValidateForm();

        let $tableYW = VxeTableMxRef.value.element;
        let { visibleData } = $tableYW.getTableData();
        visibleData.map(o => {
          console.log("tableYW visibleData o :>> ", o);
          if (
            ["垫层", "辅料"].includes(o.itemname) ||
            [
              "边带",
              "面层裥棉图案",
              "底层裥棉图案",
              "大侧裥棉图案",
              "小侧1裥棉图案",
              "小侧2裥棉图案",
              "小侧3裥棉图案",
              "拉手刺绣及其他工艺项目所有"
            ].includes(o.bj_pzname)
          ) {
            if (o.bj_namemx == "") {
              VxeTableMxRef.value.scrollTo(o, "bj_namemx");
              throw new Error("产品配置：【" + o.bj_pzname + "】的明细是必填项，请输入/选择");
            }
          }
          return o;
        });

        ElMessageBox.confirm("是否确定要保存吗?", "询问", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning"
        }).then(async () => {
          loadingStatus.save = true;
          try {
            const res = await SaveMattressInterface({
              mattress: LjDetailRef.value?._mainData,
              interfaceList: bednetYWList.value,
              qdList: bednetQDList.value
            })
              .then(res => {
                ElNotification({
                  title: "温馨提示",
                  message: t("sys.api.sueccessToSave"),
                  type: "success"
                });

                const _cur = LjDetailRef.value?._mainData;
                router.push({
                  name: "bednetInterfaceDetail",
                  params: {
                    id: _cur.bednetid
                  },
                  query: {
                    code: _cur.bednetcode
                  },
                  replace: true
                });
                // LjDetailRef.value.refresh();
                loadingStatus.save = false;
              })
              .catch(error => {
                console.log("error !! :>> ", error);
                loadingStatus.save = false;
              });
          } catch (error) {
            loadingStatus.save = false;
            ElMessage.error(t("sys.api.operationFailed"));
          }
        });
      } catch (error) {
        console.log("errorerrorerrorerror :>> ", typeof error, error);
        if (error.hasOwnProperty("message")) {
          ElMessage.error(error.message);
        } else {
          for (const key in error) {
            if (Object.prototype.hasOwnProperty.call(error, key)) {
              const element = error[key];
              ElMessage.error(element[0].message);
            }
          }
        }

        return false;
      }
    }
  }),
  [
    buttonDefault({
      label: "刷新带出配置",
      limited: () => {
        return !orderStatus.value || editType.value == 3;
      },
      clickFunc: item => {
        RefreshBedNetInterfaceList(LjDetailRef.value?._mainData.bednetid, 1, LjDetailRef.value?._mainData.erp_configcodetype);
      }
    }),
    buttonDefault({
      label: "复制配置",
      limited: () => {
        return !orderStatus.value || editType.value == 3;
      },
      clickFunc: item => {
        fModelChoseMattress().then((res: any) => {
          RefreshBedNetInterfaceList(res.bednetid, 1);
        });
      }
    }),
    buttonDefault({
      label: "重新生成配置项目",
      limited: () => {
        return !orderStatus.value || editType.value != 1;
      },
      disabledTextCallBack: (data: any) => {
        if (data.yw_flag == 1) {
          return "已业务补充审核，无法操作";
        }
        return "";
      },
      clickFunc: item => {
        RefreshBedNetInterfaceList(LjDetailRef.value?._mainData.bednetid, 0, LjDetailRef.value?._mainData.erp_configcodetype);
      }
    })
  ],
  [
    buttonDefault({
      label: "刷新清单",
      limited: () => {
        return !orderStatus.value;
      },
      clickFunc: item => {
        RefreshBedNetInterfaceQdList(LjDetailRef.value?._mainData.bednetid, 1);
      }
    }),
    buttonDefault({
      label: "复制清单",
      limited: () => {
        return !orderStatus.value;
      },
      clickFunc: item => {
        fModelChoseMattress().then((res: any) => {
          RefreshBedNetInterfaceQdList(res.bednetid, 1, 0);
        });
      }
    }),
    buttonDefault({
      label: "重新生成清单",
      limited: () => {
        return !orderStatus.value;
      },
      clickFunc: item => {
        RefreshBedNetInterfaceQdList(LjDetailRef.value?._mainData.bednetid, 0);
      }
    })
  ],
  [
    buttonDefault({
      label: "增行",
      limited: () => {
        return !orderStatus.value;
      },
      clickFunc: item => {}
    }),
    buttonDefault({
      label: "插行",
      limited: () => {
        return !orderStatus.value;
      },
      clickFunc: item => {},
      divider: true
    }),
    buttonDefault({
      label: "上移",
      limited: () => {
        return !orderStatus.value;
      },
      clickFunc: item => {}
    }),
    buttonDefault({
      label: "下移",
      limited: () => {
        return !orderStatus.value;
      },
      clickFunc: item => {},
      divider: true
    })
  ],
  buttonDefault({
    label: "覆盖配置到副规格产品",
    limited: () => {
      return !orderStatus.value || LjDetailRef.value?._mainData.child_count == 0;
    },
    disabledTextCallBack: (data: any) => {
      if (data.child_count == 0) {
        return "没有副规格产品，无法操作";
      }
      return "";
    },
    clickFunc: item => {
      alert("功能维护中!");
    }
  }),
  buttonDefault({
    label: "重置半成品归属列数据",
    limited: () => {
      return !orderStatus.value;
    },
    clickFunc: async () => {
      const $table = QdTableRef.value.element;
      if ($table) {
        const { visibleData } = $table.getTableData();

        let res = await GetResetWiptype({ qdList: visibleData });

        let arr = visibleData.map(o => {
          let _itm = res.qdList.find(itm => itm.printid == o.printid);

          if (_itm) {
            o.wip_type = _itm.wip_type;
            !o.wrkgrpcode2 && (o.wrkgrpcode2 = _itm.o.wrkgrpcode2);
          }
          return o;
        });

        $table.reloadData(arr);
        resetMergeCellsQd();
      }
    }
  }),
  [
    buttonDefault({
      label: "清单补充",
      power: 85,
      limited: () => {
        return !!orderStatus.value;
      },
      disabledTextCallBack: (data: any) => {
        if (data.js2_flag == 1) {
          return "已清单补充审核，无法修改";
        }
        return "";
      },
      clickFunc: item => {
        routeToEdit(3);
      }
    }),
    buttonDefault({
      label: "清单补充审核",
      power: 86,
      limited: () => {
        return !!orderStatus.value;
      },
      clickFunc: item => {
        const curRecords = [LjDetailRef.value?._mainData];

        JS2Audit(1, curRecords, () => {
          LjDetailRef.value.refresh();
        });
      }
    }),
    buttonDefault({
      label: "清单补充撤审",
      power: 87,
      limited: () => {
        return !!orderStatus.value;
      },
      clickFunc: item => {
        const curRecords = [LjDetailRef.value?._mainData];

        JS2Audit(0, curRecords, () => {
          LjDetailRef.value.refresh();
        });
      }
    })
  ],
  buttonDefault({
    label: "生成/更新物料",
    power: 88,
    limited: () => {
      return !!orderStatus.value;
    },
    clickFunc: item => {
      toCreateMtrl(1, [LjDetailRef.value?._mainData.bednetid]);
    }
  }),
  [
    buttonDefault({
      label: "生成金蝶清单",
      power: 90,
      disabledTextCallBack: (data: any) => {
        console.log("生成金蝶清单 disabledTextCallBack data", data);
        if (data.js2_flag == 0) {
          return "床垫清单未审核，无法生成金蝶清单";
        }

        return "";
      },
      limited: () => {
        return !!orderStatus.value;
      },
      clickFunc: item => {
        toCreateORDelMtrlPf(1, [LjDetailRef.value?._mainData.bednetid]);
      }
    })
  ],
  buttonDefault({
    label: "同步L1资料",
    loading: () => loadingStatus.synchsL1,
    clickFunc: async () => {
      try {
        loadingStatus.synchsL1 = true;
        let res = await UpdateL1Basicinfo();
        if (res) {
          ElNotification({
            title: "同步成功",
            message: `物料：${res.mtrlnum}个 <br/>工组：${res.wkgnum}个 <br/>物料类别：${res.mtrltypenum}个`,
            dangerouslyUseHTMLString: true,
            type: "warning"
          });
        }
        loadingStatus.synchsL1 = false;
      } catch (error) {
        loadingStatus.synchsL1 = false;
        console.error(error);
      }
    }
  }),
  buttonDefault({
    label: t("common.back"),
    clickFunc: item => {
      router.push(`/erpapi/mattressInterface/index`);
    }
  })
];

const routeToEdit = (type: any) => {
  console.log("routeToEdit mainData :>> ", mainData, route.fullPath);

  const _cur = mainData.value[0];
  router.push({
    name: "mattressInterfaceEditYw",
    params: {
      id: _cur.bednetid
    },
    query: {
      code: _cur.bednetcode,
      type: type
    },
    replace: true
  });
};

/**
 * @description 页面数据加载完成
 */
const funcAfterMound = async () => {
  console.log("onMounted detail sale start!!!! :>> ", orderStatus.value);
  if (!orderStatus.value) {
    // 详情页
    // gotoSummy(8000);
  } else {
    // 新增/编辑
    tableProps_mx.value.editConfig.enabled = true;
    tableProps_qd.value.editConfig.enabled = true;
  }
  console.log("onMounted detail sale start!!!! :>> ", tableProps_mx.value.editConfig);

  console.log("onMounted detail sale start LjDetailRef.value.mainData :>> ", LjDetailRef.value);

  if (orderStatus.value != "new") {
  }
};

onBeforeMount(() => {
  if (route.params?.id) {
    // 刷新数据
    initParams.value.bednetid = Number(route.params?.id);
    editType.value = Number(route.query?.type);
  }
});

onMounted(async () => {
  console.log("route onMounted:>> ", route);
  console.log("route onMounted:>> ", route.params);
  console.log("route onMounted:>> ", route.params.id);

  const result = await GetERPWrkGrpList();

  if (result.workgroupList) {
    workgrpEnum.value = result.workgroupList.map(item => {
      return {
        label: item.wrkGrpName,
        value: item.wrkGrpid,
        code: item.wrkgrpcode
      };
    });

    // columns_qd.value = columns_qd.value.map(item => {
    //   if (item.field == "wrkgrpid") {
    //     item.editRender.options = workgrpEnum.value;
    //   }
    //   return item;
    // });
  }

  const result2 = await GetERPWrkGrpList2();
  workgrpEnum2.value = result2.datatable ?? [];

  if (route.params?.id) {
    // 刷新数据
    console.log("detail onMounted initParams.value :>> ", initParams.value);
    console.log("领用工组领用工组领用工组领用工组 columns_qd.value :>> ", columns_qd.value);
    await RetriveMattressInterface(initParams.value.bednetid.valueOf());
  }
});

/** 发现4.11~4.13版本reloadData加载超慢放弃使用 */
const autoRowDragend = async data => {
  const $table = QdTableRef.value.element;

  $table.clearMergeCells();
  nextTick(() => {
    let mergeCells = autoMergeCells($table, ["itemname", "bj_pzname", "bj_pzname_mx_mx"]);
    $table.setMergeCells(mergeCells);
  });
};

const LjDialogQdRowAdd = ref();
const interIndex = ref(0);
const qdFormParam = ref({
  itemname: "",
  bj_pzname: "",
  bj_pzname_mx: "",
  u_mtrl_price_mtrlname: ""
});
const qdDefaultAction = [
  buttonDefault({
    label: t("common.cancelText"),
    icon: "iconchevron-left",
    clickFunc: item => {
      LjDialogQdRowAdd.value.hide();
    }
  }),
  buttonDefault({
    label: t("common.okText"),
    clickFunc: async item => {
      LjDialogQdRowAdd.value.hide();
    }
  })
];
</script>
