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 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: "documentsCode",
          key: "documentsCode",
        },
        {
          title: "操作时间",
          dataIndex: "operateTime",
          key: "operateTimeList",
          width: 300,
          valueType: "dateRange",
          render: (_, row) => {
            return <div>{row.operateTime}</div>;
          },
        },
        {
          title: "操作人",
          dataIndex: "operateUserName",
          key: "operateUserName",
        },
        // {
        //   title: "单据类型",
        //   dataIndex: "instoreTypeName",
        //   search: false,
        //   key: "instoreType",
        // },
        {
          title: "物料编码",
          dataIndex: "materieCode",
          search: false,
          key: "materieCode",
        },
        {
          title: "物料名称",
          dataIndex: "materieName",
          key: "materieName",
        },
        {
          title: "批次号",
          dataIndex: "materieControlNo",
          search: false,
          key: "materieControlNo",
        },
        {
          title: "库存数量",
          dataIndex: "stockNumNow",
          key: "stockNumNow",
          search: false,
        },
        {
          title: "来源库位",
          dataIndex: "sourceStorePositionName",
          search: false,
          key: "sourceStorePositionName",
        },
        {
          title: "目标库位",
          dataIndex: "targetStorePositionName",
          search: false,
          key: "targetStorePositionName",
        },
        {
          title: "单据状态",
          dataIndex: "documentsState",
          key: "documentsState",
          search: false,
          render: (_, row) => {
            if (row?.documentsState == "0") {
              return "待执行";
            } else if (row?.documentsState == "1") {
              return "执行中";
            } else if (row?.documentsState == "2") {
              return "已执行";
            }
          },
        },
      ];
    } else {
      return [
        {
          title: "单据编号",
          dataIndex: "documentsCode",
          key: "documentsCode",
        },
        {
          title: "完成时间",
          dataIndex: "finishTime",
          key: "finishTimeList",
          width: 300,
          valueType: "dateRange",
          render: (_, row) => {
            return <div>{row.operateTime}</div>;
          },
        },
        {
          title: "操作人",
          dataIndex: "operateUserName",
          key: "operateUserName",
        },

        {
          title: "物料编码",
          dataIndex: "materieCode",
          search: false,
          key: "materieCode",
        },
        {
          title: "物料名称",
          dataIndex: "materieName",
          search: false,
          key: "materieName",
        },
        {
          title: "批次号",
          dataIndex: "materieControlNo",
          search: false,
          key: "materieControlNo",
        },
        {
          title: "库存数量",
          dataIndex: "stockNumNow",
          key: "stockNumNow",
          search: false,
        },
        {
          title: "来源库位",
          dataIndex: "sourceStorePositionName",
          search: false,
          key: "sourceStorePositionName",
        },
        {
          title: "目标库位",
          dataIndex: "targetStorePositionName",
          key: "targetStorePositionName",
        },
        {
          title: "单据状态",
          dataIndex: "documentsState",
          key: "documentsState",
          search: false,
          render: (_, row) => {
            return "已完成";
          },
        },
      ];
    }
  }, [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],
    //               outstoreType: 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/wmsMoveStock/queryList"
        : "/ngic-workmanship/wmsMoveStockHis/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) => {
              delete it.usableNum;
              delete it.id;
              return it;
            });
            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/wmsMaterieStockStore/selectbox/usableStock",
                  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/wmsMaterieStockStore/queryStoreOne",
                        params,
                      }),
                    params: { materieId: "linked", storeId: changedValues[i] },
                    effectresult: {
                      productionUnit: "productionUnit", //key 为列表更新值  value为response 返回值
                      productionUnitName: "productionUnitName",
                      usableNum: "usableNum",
                      outstroeNum: "outstroeNum",
                    },
                  },
                };
                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>
                        出库数量 <b style={{ color: "red" }}>*</b>
                      </span>
                    ),
                    dataIndex: "outstroeNum",
                    key: "outstroeNum",
                    formItemProps: () => {
                      return {
                        rules: [{ required: true, message: "此项为必填项" }],
                      };
                    },
                    valueType: "digit",
                    fieldProps: {
                      precision: 3,
                    },
                    editable: true,
                  },
                  {
                    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,
                };
                return {
                  ...s,
                  fields: newfields,
                };
              });
            }
          }
        }}
        reload={reload}
      />
    </div>
  );
}

export default Outstore;