import { deleteStore, getStoreList, getStoreTypeList, storeExport } from '@/services/stock';
import { queryDict, queryTable } from '@/utils/request';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { useNavigate } from 'react-router-dom';
import { Button, message, Modal, Popconfirm } from 'antd';
import { useRef, useState } from 'react';
import OutAndIn from '../outAndIn';

const StockList = (props) => {
  const [isOpen, setIsOpen] = useState(false);
  const [modalData, setModalData] = useState({});
  // const [storeTypeDict, setStoreTypeDict] = useState([]);
  const actionRef = useRef();
  const formRef = useRef();
  const navigate = useNavigate();
  
  // useEffect(() => {
  //   getStoreTypeList({ pageSize: 9999, pageNum: 1 }).then((res) => {
  //     setStoreTypeDict(
  //       res?.records?.map((x) => ({
  //         label: x.name,
  //         value: x.id,
  //       })) || [],
  //     );
  //   });
  // }, []);

  const handleDelete = (id) => {
    if (id) {
      deleteStore(id).then((res) => {
        message.success('删除成功');
        actionRef.current.reload();
      });
    }
  };

  const onCancel = () => {
    setIsOpen(false);
    setModalData({});
  };

  const onExport = () => {
    storeExport(formRef.current.getFieldsValue());
  };

  const columns = [
    // {
    //   title: 'id',
    //   dataIndex: 'id',
    //   search: false,
    // },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '单位',
      dataIndex: 'unit',
      search: false,
    },
    {
      title: '分类',
      dataIndex: 'typeId',
      valueType: 'select',
      // option: storeTypeDict,
      request: () => queryDict(getStoreTypeList)(),
    },
    {
      title: '库存',
      dataIndex: 'amount',
      search: false,
    },

    {
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (_, record) => [
        <Button
          key={1}
          style={{ padding: 0 }}
          type="link"
          onClick={() => {
            console.log(record, 'record');
            setModalData(record);
            setIsOpen(true);
          }}
        >
          出入库
        </Button>,
        <Button
          key={2}
          style={{ padding: 0 }}
          type="link"
          onClick={() => {
            navigate(`/stock/edit?id=${record.id}`);
          }}
        >
          修改
        </Button>,

        <Popconfirm
          key={3}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record.id)}
          okText="确定"
          cancelText="取消"
        >
          {/* manualPush */}
          <Button style={{ padding: 0 }} type="link">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable
        actionRef={actionRef}
        formRef={formRef}
        rowKey="id"
        toolBarRender={() => [
          <Button
            key="2"
            type="primary"
            onClick={() => {
              navigate('/stock/edit');
            }}
          >
            新增
          </Button>,
          <Button
            key="2"
            type="primary"
            onClick={() => {
              onExport();
            }}
          >
            导出
          </Button>,
        ]}
        request={queryTable(getStoreList)}
        columns={columns}
      />
      <Modal open={isOpen} footer={null} onCancel={onCancel}>
        <OutAndIn
          data={modalData}
          onCancel={onCancel}
          onSuccess={() => {
            actionRef.current.reload();
            onCancel();
          }}
        />
      </Modal>
    </PageContainer>
  );
};

export default StockList;
