import { DownloadOutlined } from '@ant-design/icons';
import { Button, message, Input, Drawer } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import ExportJsonExcel from 'js-export-excel';
import {
  getStockItemList,
  updateStockItem,
  getProductPage,
  getOrgPage,
  getUintList,
} from './service';

//页面 相当于 class
const StockItemManage = () => {
  /** 新建/更新窗口的弹窗 */
  const [createModalVisible, handleModalVisible] = useState(false);
  /** 分布更新窗口的弹窗 */

  const [showDetail, setShowDetail] = useState(false);
  //绑定
  const actionRef = useRef();
  const [currentRow, setCurrentRow] = useState();

  //选中的行
  const [selectedRowsState, setSelectedRows] = useState([]);

  const [dataList, setDataList] = useState([]);

  //机构变量
  const [orgEnum, setOrgEnum] = useState();
  const [orgArray, setOrgArray] = useState([]);

  //物料变量
  const [productEnum, setProductEnum] = useState();
  const [productArray, setProductArray] = useState([]);

  const [uintListEnum, setUintEnum] = useState();

  //初始化数据
  useEffect(() => {
    //初始化物料
    const initProduct = (val) => {
      var data = getProductPage({ current: 1, pageSize: 1000 }).then((data) => {
        var list = {};
        let list2 = [];
        data.data.data.forEach((item) => {
          list2.push({
            text: item.name,
            id: item.id,
          });
          list[item.id] = { text: item.name };
        });

        setProductArray(list2);
        setProductEnum(list);
      });
    };

    //初始化机构
    const initOrg = (val) => {
      var data = getOrgPage({ current: 1, pageSize: 1000 }).then((data) => {
        var list = {};
        let list2 = [];
        data.data.data.forEach((item) => {
          list2.push({
            text: item.name,
            id: item.id,
          });
          list[item.id] = { text: item.name };
        });

        setOrgArray(list2);
        setOrgEnum(list);
      });
    };

    //初始化包装单位
    const initUintList = (val) => {
      var data = getUintList().then((data) => {
        var list = {};
        data.data.forEach((item) => {
          list[item.id] = { text: item.name };
        });
        setUintEnum(list);
      });
    };

    initProduct();
    initOrg();
    initUintList();
  }, []);

  /**
   * 导出
   */
  function handleExport() {
    const { ReqDetailList } = dataList; // 网络请求命名空间
    const option = {};
    var excelColumns = [];
    columns.map((item, index) => {
      if (index > 1) {
        excelColumns.push(item);
      }
    });
    option.fileName = '库存报表';
    option.datas = [
      {
        sheetData: dataList.map((item) => {
          const result = {};
          columns.forEach((c, index) => {
            if (index > 1) {
              result[c.dataIndex] = item[c.dataIndex];
            }
          });
          return result;
        }),
        sheetName: '库存报表', // Excel文件名称
        sheetFilter: excelColumns.map((item) => item.dataIndex),
        sheetHeader: excelColumns.map((item) => item.title),
        columnWidths: excelColumns.map(() => 10),
      },
    ];

    const toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  }

  /** 国际化配置 */

  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: '规则名称是唯一的 key',
      hideInSearch: true,
      hideInTable: true,
      render: (dom, entity) => {
        return (
          <a
            onClick={() => {
              setCurrentRow(entity);
              setShowDetail(true);
            }}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: '机构名称',
      dataIndex: 'orgId',
      hideInTable: true,
      valueEnum: orgEnum,
    },
    {
      title: '收货机构',
      hideInSearch: true,
      dataIndex: 'orgName',
    },
    {
      title: '物料名称',
      hideInSearch: true,
      dataIndex: 'productName',
    },
    {
      title: '库存数量',
      dataIndex: 'stockQty',
      valueType: 'textarea',
      hideInSearch: true,
    },
    {
      title: '物料单位',
      hideInSearch: true,
      dataIndex: 'uintName',
    },
    {
      title: '物料编码',
      dataIndex: 'code',
      valueType: 'textarea',
      hideInSearch: true,
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="物料入库"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        columns={columns}
        toolBarRender={() => [
          <Button type="primary" key="primary" onClick={() => handleExport()}>
            <DownloadOutlined /> 导出
          </Button>,
        ]}
        //数据绑定
        request={async (params) => {
          var stockItemData = [];
          var total = 0;
          await getStockItemList(params).then((r) => {
            stockItemData = r.data.data;
            total = r.data.total;
            setDataList(r.data.data);
          });
          return {
            data: stockItemData,
            success: true,
            total: total,
          };
        }}
        // 每行选择点击事件
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
      ></ProTable>
    </PageContainer>
  );
};

export default StockItemManage;
