import React, { useEffect, useMemo, useRef, useState } from "react";
import { Dropdown, Menu, Button, message } from "antd";
import AutoTable from "@/components/AutoTable";
// import defaultFields from "./fields";
import { doFetch } from "@/utils/doFetch";
import DrawInitForm from "@/components/DrawInitForm";
import getPrem from "@/utils/getPrem"; //权限判断fn
import { useReactToPrint } from "react-to-print";
import { useModel } from "umi";
import PrintDom from "./printdom";
import { PrintQrCode } from "@/components/PrintCode";

const keytoval = {
    one: 1,
    two: 2,
    three: 3,
    four: 4,
  },
  items = [
    {
      key: "one",
      label: <a>生产领料出库</a>,
    },
    {
      key: "two",
      label: <a>销售出库</a>,
    },
    {
      key: "three",
      label: <a>报废出库</a>,
    },
    {
      key: "four",
      label: <a>其他出库</a>,
    },
  ],
  itemz = {
    one: "生产领料出库",
    two: "销售出库",
    three: "报废出库",
    four: "其他出库",
  };

const defaultFields = {
  four: {
    materieOutstoreNo: {
      value: null,
      type: "input",
      title: "出库单号",
      name: ["materieOutstoreNo"],
      required: false,
      placeholder: "不填写系统自动生成",
    },
    storeId: {
      value: null,
      type: "select",
      title: "出库仓库",
      name: ["storeId"],
      required: true,
      options: {
        database: () =>
          doFetch({
            url: "/ngic-auth/sysStore/selectionBox",
            params: { factoryIdList: [] },
          }),
        params: {},
      },
    },
    remark: {
      value: null,
      type: "textarea",
      title: "备注",
      name: ["remark"],
      required: false,
      col: {
        span: 24,
      },
    },
    materialList: {
      value: [],
      title: "物料信息",
      type: "table",
      col: { span: 24 },
      name: ["materialList"],
      required: true,
      linkconfig: {
        urlchangeval: {
          //根据url接口 改变某个value
          database: (params) =>
            doFetch({
              url: "/ngic-workmanship/pmMaterie/queryById",
              params,
            }),
          params: { materieId: "linked" },
          effectresult: {
            specificationModel: "specificationModel", //key 为列表更新值  value为response 返回值
            ironLoss: "ironLoss",
            usableNum: "usableNum",
            outstroeNum: "outstroeNum",
          },
        },
      },
      columns: [
        {
          title: (
            <span>
              物料编码-名称 <b style={{ color: "red" }}>*</b>
            </span>
          ),
          dataIndex: "materieId",
          key: "materieId",
          valueType: "select",
          fieldProps: {
            allowClear: true,
            showSearch: true,
          },
          formItemProps: () => {
            return {
              rules: [{ required: true, message: "此项为必填项" }],
            };
          },
          editable: true,
        },
        {
          title: <span>规格型号</span>,
          dataIndex: "specificationModel",
          key: "specificationModel",
          readonly: "specificationModel",
        },
        {
          title: "铁损",
          dataIndex: "ironLoss",
          key: "ironLoss",
          readonly: "ironLoss",
        },
        {
          title: "片厚",
          dataIndex: "sheetThickness",
          key: "sheetThickness",
          // readonly: "sheetThickness",
        },
        {
          title: "牌号",
          dataIndex: "shopSign",
          key: "shopSign",
          readonly: "shopSign",
        },
        {
          title: (
            <span>
              出库数量<b style={{ color: "red" }}>*</b>
            </span>
          ),
          dataIndex: "outstroeNum",
          key: "outstroeNum",
          formItemProps: () => {
            return {
              rules: [{ required: true, message: "此项为必填项" }],
            };
          },
          valueType: "digit",
        },
        {
          title: "可用库存",
          dataIndex: "usableNum",
          key: "usableNum",
          readonly: "usableNum",
        },
        {
          title: "库存单位",
          dataIndex: "productionUnitName",
          key: "productionUnitName",
          readonly: "productionUnitName",
        },

        {
          title: "操作",
          valueType: "option",
          width: 70,
          render: (text, record, _, action) => [
            <a key="delete" onClick={() => {}}>
              删除
            </a>,
          ],
        },
      ],
      rowKey: "id",
    },
  },
  detail: (setselected, dom) => ({
    totalCard: [
      //物料详情
      {
        cardTitle: "基本信息",
        itemData: [
          {
            title: "出库单号",
            key: "materieOutstoreNo",
          },
          {
            title: "出库类型",
            key: "outstoreTypeName",
          },
          {
            title: "出库仓库",
            key: "storeName",
          },
          {
            title: "相关单号",
            key: "businessNo",
          },
          {
            title: "创建人",
            key: "createUserName",
          },
          {
            title: "创建时间",
            key: "createTime",
          },
          {
            title: "状态",
            key: "statusName",
          },
          {
            title: "完成时间",
            key: "finishTime",
          },
          {
            title: "备注",
            key: "remark",
            noshow: "100%",
          },
          {
            title: "工单条形码",
            key: "qrCodeUrl",
            type: "img",
            noshow: true,
            width: 100,
          },
        ],
      },
      {
        cardTitle: "物料信息列表",
        extraContent: dom,
        itemData: [
          {
            key: "materialList",
            type: "table",
            col: { span: 24 },
            columns: [
              {
                title: "物料编码 - 名称",
                dataIndex: "materieName",
                key: "materieName",
                search: false,
                render: (dom, row) => {
                  return (
                    (row.materieCode ?? "") + " - " + (row.materieName ?? "")
                  );
                },
              },
              {
                title: "出库数量",
                dataIndex: "outstroeNum",
                key: "outstroeNum",
                search: false,
              },
              {
                title: "库存单位",
                dataIndex: "productionUnitName",
                key: "productionUnitName",
                search: false,
              },
              {
                title: "未下架数量",
                dataIndex: "remainderNums",
                key: "remainderNums",
                search: false,
              },
            ],
            pagination: "false",
            rowKey: "id",
            expandable: {
              expandedRowRender: (record) => (
                <Table
                  style={{ marginLeft: 48 }}
                  columns={[
                    {
                      title: "库位名称",
                      dataIndex: "storePositionName",
                      key: "storePositionName",
                      search: false,
                      formItemProps: () => {
                        return {
                          rules: [{ required: true, message: "此项为必填项" }],
                        };
                      },
                    },
                    {
                      title: "批次号/SN号",
                      dataIndex: "materieControlNo",
                      key: "materieControlNo",
                      search: false,
                    },
                    {
                      title: "供应商编号-名称",
                      dataIndex: "supplierNo",
                      key: "supplierNo",
                      search: false,
                      render: (dom, row) => {
                        return (
                          (row?.supplierNo ?? "") +
                          " - " +
                          (row?.supplierName ?? "")
                        );
                      },
                    },
                    {
                      title: "下架数量",
                      dataIndex: "outstroeNum",
                      key: "outstroeNum",
                      search: false,
                    },
                  ]}
                  dataSource={record.downloadList}
                  pagination={false}
                />
              ),
            },
            rowSelection: {
              onChange: (selectedRowKeys, selectedRows) => {
                setselected(selectedRows);
              },
            },
          },
        ],
      },
      {
        cardTitle: "强制关单信息",
        itemData: [
          {
            title: "关单人",
            key: "closeUserName",
          },
          {
            title: "关单时间",
            key: "closeTime",
          },
        ],
      },
      {
        cardTitle: "下架明细",
        noPrint: true,
        itemData: [
          {
            key: "materialDownloadList",
            type: "table",
            col: { span: 24 },
            columns: [
              {
                title: "物料编码 - 名称",
                dataIndex: "materieName",
                key: "materieName",
                search: false,
                render: (dom, row) => {
                  return (
                    (row.materieCode ?? "") + " - " + (row.materieName ?? "")
                  );
                },
              },
              {
                title: "出库数量",
                dataIndex: "outstroeNum",
                key: "outstroeNum",
                search: false,
              },
              {
                title: "库存单位",
                dataIndex: "productionUnitName",
                key: "productionUnitName",
                search: false,
              },
            ],
            expandable: {
              defaultExpandAllRows: true,
              expandedRowRender: (record) => (
                <Table
                  style={{ marginLeft: 48 }}
                  columns={[
                    {
                      title: "库位名称",
                      dataIndex: "storePositionName",
                      key: "storePositionName",
                      search: false,
                      formItemProps: () => {
                        return {
                          rules: [{ required: true, message: "此项为必填项" }],
                        };
                      },
                    },
                    {
                      title: "批次号/SN号",
                      dataIndex: "materieControlNo",
                      key: "materieControlNo",
                      search: false,
                    },
                    {
                      title: "供应商编号 - 名称",
                      dataIndex: "supplierNo",
                      key: "supplierNo",
                      search: false,
                      render: (dom, row) => {
                        return (
                          (row.supplierNo ?? "") +
                          " - " +
                          (row.supplierName ?? "")
                        );
                      },
                    },
                    {
                      title: "下架数量",
                      dataIndex: "outstroeNum",
                      key: "outstroeNum",
                      search: false,
                    },
                    {
                      title: "备注",
                      dataIndex: "remark",
                      key: "remark",
                      search: false,
                    },
                    {
                      title: "操作人",
                      dataIndex: "downloadUserName",
                      key: "downloadUserName",
                      search: false,
                    },
                    {
                      title: "操作时间",
                      dataIndex: "downloadTime",
                      key: "downloadTime",
                      search: false,
                    },
                  ]}
                  dataSource={record.downloadList}
                  pagination={false}
                />
              ),
            },
            pagination: "false",
          },
        ],
      },
    ],
  }),
  dooutside: (fid, storeId) => ({
    totalCard: [
      //物料详情
      {
        cardTitle: "基本信息",
        itemData: [
          {
            title: "出库单号",
            key: "materieOutstoreNo",
          },
          {
            title: "出库类型",
            key: "outstoreTypeName",
          },
          {
            title: "出库仓库",
            key: "storeName",
          },
          {
            title: "相关单号",
            key: "businessNo",
          },
          {
            title: "备注",
            key: "remark",
          },
          {
            title: "创建人",
            key: "createUserName",
          },
          {
            title: "创建时间",
            key: "createTime",
          },
          {
            title: "状态",
            key: "statusName",
          },
        ],
      },
      {
        cardTitle: "物料信息列表",
        extra: true,
        extrapath: "/ngic-workmanship/wmsMaterieOutstore/download",
        extrakey: "submits", //redux key
        itemData: [
          {
            key: "materialList",
            type: "table",
            col: { span: 24 },
            columns: [
              {
                title: "物料编码 - 名称",
                dataIndex: "materieName",
                key: "materieName",
                search: false,
                render: (dom, row) => {
                  return (
                    (row.materieCode ?? "") + " - " + (row.materieName ?? "")
                  );
                },
              },
              {
                title: "出库数量",
                dataIndex: "outstroeNum",
                key: "outstroeNum",
                search: false,
              },
              {
                title: "库存单位",
                dataIndex: "productionUnitName",
                key: "productionUnitName",
                search: false,
              },
              {
                title: "未下架数量",
                dataIndex: "remainderNums",
                key: "remainderNums",
                search: false,
              },
            ],
            expandable: {
              expandedRowRender: (record) => (
                <EditUpload record={record} fid={fid} storeId={storeId} />
              ),
            },
          },
        ],
      },
    ],
  }),
};

function Outstore(props) {
  const { initialState, setInitialState } = useModel("@@initialState");
  const [activeTabKey, onTabChange] = useState("1");
  const [selectKeys, setSelectKeys] = useState([]);

  let [drawprops, setdrawprops] = useState({
      title: "",
      visible: false,
      onClose: () => {
        setdrawprops((s) => ({
          ...s,
          visible: false,
          fields: {},
        }));
      },
      fields: {},
      width: 1200,
    }),
    actionRef = useRef(),
    ChildRef = null,
    printRef = useRef(),
    mutiPrintRef = useRef();

  //操作完成后刷新
  function reload() {
    actionRef.current.reload();
    ChildRef?.onRefresh();
    message.success("操作成功");
    setdrawprops((s) => ({
      ...s,
      visible: false,
      fields: {},
    }));
  }

  const handlePrint = useReactToPrint({
    content: () => printRef.current.dom.current,
  });

  const mutiPrint = useReactToPrint({
    content: () => mutiPrintRef.current.dom.current,
  });
  const PrintButton = (
    <Button
      disabled={!selectKeys.length}
      onClick={() => {
        mutiPrint();
      }}
    >
      打印
    </Button>
  );

  useEffect(() => {
    const detail = defaultFields.detail(setSelectKeys, PrintButton);
    setdrawprops((s) => ({
      ...s,
      ...detail,
    }));
  }, [selectKeys]);

  const columns = useMemo(() => {
    if (activeTabKey == "1") {
      return [
        {
          title: "出库单号",
          dataIndex: "materieOutstoreNo",
          key: "materieOutstoreNo",
          render: (dom, record) => {
            return (
              <a
                onClick={() => {
                  const detail = defaultFields.detail(
                    setSelectKeys,
                    PrintButton
                  );
                  setdrawprops((s) => ({
                    ...s,
                    visible: true,
                    //查看详情 props
                    val: "detail",
                    title: `查看详情`,
                    ...detail,
                    totalPath:
                      "/ngic-workmanship/wmsMaterieOutstore/getOutStoreInfoById",
                    totalParams: { id: record.id },
                    extra: (
                      <Button
                        onClick={async () => {
                          handlePrint();
                        }}
                      >
                        打印
                      </Button>
                    ),
                  }));
                }}
              >
                {dom}
              </a>
            );
          },
        },
        {
          title: "出库类型",
          dataIndex: "outstoreTypeName",
          key: "outstoreType",
          valueType: "select",
          search: false,
          options: [
            {
              label: "生产领料出库",
              value: "1",
            },
            {
              label: "销售出库",
              value: "2",
            },
            {
              label: "报废出库",
              value: "3",
            },
            {
              label: "其他出库",
              value: "4",
            },
          ],
        },
        {
          title: "出库仓库",
          dataIndex: "storeName",
          search: false,
          key: "storeId",
          fieldProps: {
            allowClear: true,
            showSearch: true,
          },
          options: {
            database: () =>
              doFetch({
                url: "/ngic-auth/sysStore/selectionBox",
                params: { factoryIdList: [] },
              }),
            params: {},
          },
          valueType: "select",
        },
        {
          title: "备注",
          dataIndex: "remark",
          key: "remark",
          search: false,
        },
        {
          title: "创建人",
          dataIndex: "createUserName",
          key: "createUserName",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
          valueType: "dateRange",
          formItemProps: {
            name: "createTimeList",
          },
        },
        {
          title: "状态",
          dataIndex: "statusName",
          key: "status",
          valueType: "select",
          options: [
            {
              label: "待下架",
              value: "0",
            },
            {
              label: "下架中",
              value: "1",
            },
          ],
        },
        {
          title: "操作",
          valueType: "option",
          width: 240,
          render: (text, record, _, action) => {
            return [
              getPrem(
                "equipmentCustomer_save",
                action,
                "下架采集",
                async () => {
                  let extra = defaultFields.dooutside(
                    record.id,
                    record.storeId
                  );
                  setdrawprops((s) => ({
                    ...s,
                    visible: true,
                    //查看详情 props
                    val: "detail",
                    title: `下架采集`,
                    ...extra,
                    totalPath:
                      "/ngic-workmanship/wmsMaterieOutstore/getOutStoreInfoById",
                    totalParams: { id: record.id },
                    extra: null,
                  }));
                  setInitialState((s) => {
                    return {
                      ...s,
                      submits: {},
                    };
                  });
                }
              ),
              getPrem("equipmentCustomer_deleteById", action, "关单", null, {
                title: "确认关单？",
                onConfirm: () => {
                  doFetch({
                    url: "/ngic-workmanship/wmsMaterieOutstore/close",
                    params: { id: record.id },
                  }).then((res) => {
                    if (res.code == "0000") {
                      reload();
                    }
                  });
                },
              }),
              record.status == 0 &&
                getPrem("equipmentCustomer_deleteById", action, "删除", null, {
                  title: "确认删除？",
                  onConfirm: () => {
                    doFetch({
                      url: "/ngic-workmanship/wmsMaterieOutstore/deleteById",
                      params: { id: record.id },
                    }).then((res) => {
                      if (res.code == "0000") {
                        reload();
                      }
                    });
                  },
                }),
            ];
          },
        },
      ];
    } else {
      return [
        {
          title: "出库单号",
          dataIndex: "materieOutstoreNo",
          key: "materieOutstoreNo",
          render: (dom, record) => {
            return (
              <a
                onClick={() => {
                  setdrawprops((s) => ({
                    ...s,
                    visible: true,
                    //查看详情 props
                    val: "detail",
                    title: `查看详情`,
                    ...defaultFields?.detail,
                    totalPath:
                      "/ngic-workmanship/wmsMaterieOutstoreHis/getOutStoreInfoById",
                    totalParams: { id: record.id },
                  }));
                }}
              >
                {dom}
              </a>
            );
          },
        },
        {
          title: "出库类型",
          dataIndex: "outstoreTypeName",
          search: false,
          key: "outstoreType",
          valueType: "select",
          options: [
            {
              label: "生产领料出库",
              value: "1",
            },
            {
              label: "销售出库",
              value: "2",
            },
            {
              label: "报废出库",
              value: "3",
            },
            {
              label: "其他出库",
              value: "4",
            },
          ],
        },
        {
          title: "出库仓库",
          search: false,
          dataIndex: "storeName",
          key: "storeId",
          fieldProps: {
            allowClear: true,
            showSearch: true,
          },
          options: {
            database: () =>
              doFetch({
                url: "/ngic-auth/sysStore/selectionBox",
                params: { factoryIdList: [] },
              }),
            params: {},
          },
          valueType: "select",
        },

        {
          title: "备注",
          dataIndex: "remark",
          key: "remark",
          search: false,
        },
        {
          title: "创建人",
          dataIndex: "createUserName",
          key: "createUserName",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
          valueType: "dateRange",
          formItemProps: {
            name: "createTimeList",
          },
        },
        {
          title: "完成时间",
          dataIndex: "finishTime",
          search: false,
          key: "finishTime",
          valueType: "dateRange",
          formItemProps: {
            name: "finishTimeList",
          },
        },
        {
          title: "状态",
          dataIndex: "statusName",
          search: false,
          key: "status",
        },
      ];
    }
  }, [activeTabKey]);

  const tableprops = {
    ...props,
    pageextra:
      activeTabKey == "1" ? (
        <Button
          type="primary"
          onClick={() => {
            setdrawprops((s) => ({
              ...s,
              visible: true,
              title: "新增" + itemz["four"],
              fields: defaultFields["four"],
              outstoreType: keytoval["four"],
              val: "add", //类型
              extra: null,
            }));
          }}
        >
          新增
        </Button>
      ) : (
        "none"
      ),
    tabList: [
      {
        tab: "未完成",
        key: "1",
      },
      {
        tab: "已完成",
        key: "2",
      },
    ],
    activeTabKey,
    onTabChange,
    columns,
    path:
      activeTabKey == "1"
        ? "/ngic-workmanship/wmsMaterieOutstore/queryList"
        : "/ngic-workmanship/wmsMaterieOutstoreHis/queryList",
  };

  return (
    <div>
      <div style={{ position: "fixed", bottom: -100000 }}>
        <PrintDom ref={printRef} {...drawprops} />
      </div>
      <div style={{ display: "none" }}>
        <PrintQrCode ref={mutiPrintRef} selectedItems={selectKeys} />
      </div>
      <AutoTable
        {...tableprops}
        actionRef={actionRef}
        onRef={(node) => (ChildRef = node)}
      ></AutoTable>
      <DrawInitForm
        {...drawprops}
        submitData={async (value) => {
          if (drawprops.val == "add") {
            let newfileds = JSON.parse(JSON.stringify(value));
            newfileds.materialList = newfileds?.materialList?.map((it) => {
              return {
                materieId: it?.materieId,
                outstroeNum: it?.outstroeNum,
              };
            });
            let res = await doFetch({
              url: "/ngic-workmanship/wmsMaterieOutstore/saveOutStore",
              params: { ...newfileds, outstoreType: drawprops.outstoreType },
            });
            if (res.code == "0000") {
              reload();
            }
          }
        }}
        onChange={async (changedValues, allValues) => {
          for (let i in changedValues) {
            if (i == "storeId") {
              let res = await doFetch({
                  url: "/ngic-workmanship/pmMaterie/selectboxByStoreId",
                  params: { storeId: changedValues["storeId"] },
                }),
                options = res?.data?.dataList;
              setdrawprops((s) => {
                let fields = JSON.parse(JSON.stringify(s.fields));
                for (let i in fields) {
                  fields[i].value = allValues[i];
                }
                fields["materialList"].linkconfig = {
                  urlchangeval: {
                    //根据url接口 改变某个value
                    database: (params) =>
                      doFetch({
                        url: "/ngic-workmanship/pmMaterie/queryById",
                        params,
                      }),
                    params: { materieId: "linked" },
                    effectresult: {
                      specificationModel: "specificationModel", //key 为列表更新值  value为response 返回值
                      ironLoss: "ironLoss",
                      usableNum: "usableNum",
                      outstroeNum: "outstroeNum",
                      sheetThickness: "sheetThickness",
                      shopSign: "shopSign",
                      usableNum: "usableNum",
                      productionUnitName: "productionUnitName",
                    },
                  },
                };
                fields["materialList"].columns = [
                  {
                    title: (
                      <span>
                        物料编码-名称 <b style={{ color: "red" }}>*</b>
                      </span>
                    ),
                    dataIndex: "materieId",
                    key: "materieId",
                    valueType: "select",
                    fieldProps: {
                      allowClear: true,
                      showSearch: true,
                      options,
                    },
                    formItemProps: () => {
                      return {
                        rules: [{ required: true, message: "此项为必填项" }],
                      };
                    },
                    editable: true,
                  },
                  {
                    title: <span>规格型号</span>,
                    dataIndex: "specificationModel",
                    key: "specificationModel",
                    readonly: "specificationModel",
                  },
                  {
                    title: "铁损",
                    dataIndex: "ironLoss",
                    key: "ironLoss",
                    readonly: "ironLoss",
                  },
                  {
                    title: "片厚",
                    dataIndex: "sheetThickness",
                    key: "sheetThickness",
                    readonly: "sheetThickness",
                  },
                  {
                    title: "牌号",
                    dataIndex: "shopSign",
                    key: "shopSign",
                    readonly: "shopSign",
                  },
                  {
                    title: (
                      <span>
                        出库数量<b style={{ color: "red" }}>*</b>
                      </span>
                    ),
                    dataIndex: "outstroeNum",
                    key: "outstroeNum",
                    formItemProps: () => {
                      return {
                        rules: [{ required: true, message: "此项为必填项" }],
                      };
                    },
                    valueType: "digit",
                  },
                  {
                    title: "可用库存",
                    dataIndex: "usableNum",
                    key: "usableNum",
                    readonly: "usableNum",
                  },
                  {
                    title: "库存单位",
                    dataIndex: "productionUnitName",
                    key: "productionUnitName",
                    readonly: "productionUnitName",
                  },

                  {
                    title: "操作",
                    valueType: "option",
                    width: 70,
                    render: (text, record, _, action) => [
                      <a key="delete" onClick={() => {}}>
                        删除
                      </a>,
                    ],
                  },
                ];
                fields["materialList"].value = undefined;
                let newfields = {
                  ...fields,
                };
                console.log("123123123131", newfields);
                return {
                  ...s,
                  fields: newfields,
                };
              });
            }
          }
        }}
        reload={reload}
      />
    </div>
  );
}

export default Outstore;
