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: "其他入库",
  };

function Instore(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: "materieInstoreNo",
          key: "materieInstoreNo",
          render: (dom, record) => {
            return (
              <a
                onClick={async () => {
                  const detail = defaultFields.detail(
                    setSelectKeys,
                    PrintButton
                  );
                  setdrawprops((s) => ({
                    ...s,
                    visible: true,
                    //查看详情 props
                    val: "detail",
                    title: `查看详情`,
                    ...detail,
                    totalPath:
                      "/ngic-workmanship/wmsMaterieInstore/getInStoreInfoById",
                    totalParams: { id: record.id },
                    extra: (
                      <Button
                        onClick={async () => {
                          handlePrint();
                        }}
                      >
                        打印
                      </Button>
                    ),
                  }));
                }}
              >
                {dom}
              </a>
            );
          },
        },
        {
          title: "入库类型",
          dataIndex: "instoreTypeName",
          key: "instoreType",
          valueType: "select",
          options: [
            {
              label: "采购入库",
              value: "1",
            },
            {
              label: "生产入库",
              value: "2",
            },
            {
              label: "退料入库",
              value: "3",
            },
            {
              label: "其他入库",
              value: "4",
            },
          ],
        },
        {
          title: "入库仓库",
          dataIndex: "storeName",
          key: "storeId",
          fieldProps: {
            allowClear: true,
            showSearch: true,
          },
          options: {
            database: () =>
              doFetch({
                url: "/ngic-auth/sysStore/selectionBox",
                params: { factoryIdList: [] },
              }),
            params: {},
          },
          valueType: "select",
        },
        {
          title: "相关单号",
          dataIndex: "businessNo",
          key: "businessNo",
        },
        {
          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.doinsert(record.id, record.storeId);
                  setdrawprops((s) => ({
                    ...s,
                    visible: true,
                    //查看详情 props
                    val: "detail",
                    title: `上架采集`,
                    totalPath:
                      "/ngic-workmanship/wmsMaterieInstore/getInStoreInfoById",
                    totalParams: { id: record.id },
                    extra: null,
                    ...extra,
                  }));
                  setInitialState((s) => {
                    return {
                      ...s,
                      submit: {},
                    };
                  });
                }
              ),
              getPrem("equipmentCustomer_deleteById", action, "关单", null, {
                title: "确认关单？",
                onConfirm: () => {
                  doFetch({
                    url: "/ngic-workmanship/wmsMaterieInstore/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/wmsMaterieInstore/deleteById",
                      params: { id: record.id },
                    }).then((res) => {
                      if (res.code == "0000") {
                        reload();
                      }
                    });
                  },
                }),
            ];
          },
        },
      ];
    } else {
      return [
        {
          title: "入库单号",
          dataIndex: "materieInstoreNo",
          key: "materieInstoreNo",
          render: (dom, record) => {
            return (
              <a
                onClick={() => {
                  setdrawprops((s) => ({
                    ...s,
                    visible: true,
                    //查看详情 props
                    val: "detail",
                    title: `查看详情`,
                    ...defaultFields?.detail,
                    totalPath:
                      "/ngic-workmanship/wmsMaterieInstoreHis/getInStoreInfoById",
                    totalParams: { id: record.id },
                    extra: null,
                  }));
                }}
              >
                {dom}
              </a>
            );
          },
        },
        {
          title: "入库类型",
          dataIndex: "instoreTypeName",
          key: "instoreType",
          valueType: "select",
          options: [
            {
              label: "采购入库",
              value: "1",
            },
            {
              label: "生产入库",
              value: "2",
            },
            {
              label: "退料入库",
              value: "3",
            },
            {
              label: "其他入库",
              value: "4",
            },
          ],
        },
        {
          title: "入库仓库",
          dataIndex: "storeName",
          key: "storeId",
          fieldProps: {
            allowClear: true,
            showSearch: true,
          },
          options: {
            database: () =>
              doFetch({
                url: "/ngic-auth/sysStore/selectionBox",
                params: { factoryIdList: [] },
              }),
            params: {},
          },
          valueType: "select",
        },
        {
          title: "相关单号",
          dataIndex: "businessNo",
          key: "businessNo",
        },
        {
          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",
          key: "finishTime",
          valueType: "dateRange",
          formItemProps: {
            name: "finishTimeList",
          },
        },
        {
          title: "状态",
          dataIndex: "statusName",
          key: "status",
          valueType: "select",
          options: [
            {
              label: "已上架",
              value: "2",
            },
            {
              label: "已关单",
              value: "4",
            },
          ],
        },
      ];
    }
  }, [activeTabKey]);

  const tableprops = {
    ...props,
    pageextra:
      activeTabKey == "1" ? (
        <Dropdown
          placement="bottomRight"
          overlay={
            <Menu
              onClick={(e) => {
                setdrawprops((s) => ({
                  ...s,
                  visible: true,
                  title: "新增" + itemz[e.key],
                  fields: defaultFields[e.key],
                  instoreType: keytoval[e.key],
                  val: "add", //类型
                  extra: null,
                }));
              }}
              items={items}
            />
          }
        >
          <Button type="primary">新增</Button>
        </Dropdown>
      ) : (
        "none"
      ),
    tabList: [
      {
        tab: "未完成",
        key: "1",
      },
      {
        tab: "已完成",
        key: "2",
      },
    ],
    activeTabKey,
    onTabChange,
    columns,
    path:
      activeTabKey == "1"
        ? "/ngic-workmanship/wmsMaterieInstore/queryList"
        : "/ngic-workmanship/wmsMaterieInstoreHis/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 res = await doFetch({
              url: "/ngic-workmanship/wmsMaterieInstore/saveInStore",
              params: { ...value, instoreType: drawprops.instoreType },
            });
            if (res.code == "0000") {
              reload();
            }
          }
        }}
        reload={reload}
      />
    </div>
  );
}

export default Instore;