/**
 * 物料基础信息管理
 * @param Page
 * @returns
 */
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
 import { Button, Modal, Form, Input, message, Popconfirm, Tag} from 'antd';
 import { useRef, useState} from 'react';
 import MaterialsInfoAPI from '@/api/materialService'
const Index =()=> {
     //表单
  const [typeForm] = Form.useForm();
  //编辑/新增弹窗
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalText,setModalText] = useState<string>('新增信息');
  const actionRef = useRef<ActionType>();
  //方法
  const OnSubmit=async (values: MaterialsTypes.MaterialsInfo) =>{
    if (values.id) {
      
      const response = await MaterialsInfoAPI.Update(values);
      if (response.statusCode === 200) {
        message.success('修改成功');
        actionRef.current?.reload();
        setIsModalOpen(false);
      } else {
        message.error(response.errors || '修改失败');
      }
    } else {
      const response = await MaterialsInfoAPI.Add(values);
      if (response.statusCode === 200) {
        message.success('添加成功');
        actionRef.current?.reload();
        setIsModalOpen(false);
      } else {
        message.error(response.errors || '添加失败');
      }
    }
  }
  //表单名
  const columns: ProColumns<MaterialsTypes.MaterialsInfo>[] = [
    {
      title: '物料名称',
      dataIndex: 'name',
    },
    {
        title: '物料编码',
        dataIndex: 'code',
      },
      {
        title: '物料单位',
        dataIndex: 'unit',
        hideInSearch:true
      },
      {
        title: '每秒出水量(wos)',
        dataIndex: 'wos',
        hideInSearch:true
      },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (_, record) => [
        <Button
          key="edit"
          type="primary"
          ghost
          onClick={async () => {
            setIsModalOpen(true)
            setModalText('编辑信息');
            const copyFormData = JSON.parse(JSON.stringify(record));
            typeForm.setFieldsValue(copyFormData);
          }}
        >
          编辑
        </Button>,
        <Popconfirm
          key="del"
          title="确定要删除此条数据吗？"
          onConfirm={() => {
            const delData: MaterialsTypes.MaterialsInfo = {
              id: record.id,
              name: '',
              code: '',
              unit: ''
            };
            MaterialsInfoAPI.Del(delData).then((r) => {
              if (r.statusCode === 200) {
                message.success(r.statusCode === 200 ? '删除成功' : r.message);
                actionRef.current?.reload();
              }
            });
          }}
          onCancel={() => {
            message.info('已取消删除');
          }}
          okText="确认"
          cancelText="关闭"
        >
          <Button  type="primary" danger ghost>删除</Button>
        </Popconfirm>,
      ],
    },
  ];
  return (
    <>
    <ProTable<MaterialsTypes.MaterialsInfo>
        key="myTable"
        columns={columns}
        actionRef={actionRef}
        cardBordered
        request={async (params = {}) => {
          const jsonData: MaterialsTypes.MaterialsPage = {
            pageIndex: params.current || 1,
            pageSize: params.pageSize || 10,
            name: params.name || '',
            id: params.id,
            code:params.code,
            unit: params.unit,
            wos:'',
          };
          const response = await MaterialsInfoAPI.PagedList(jsonData);
          if (response.statusCode === 200) {
            return {
              data: response.data.items,
              success: true,
              total: response.data.total,
            };
          } else {
            return {
              data: [],
              success: false,
              total: 0,
            };
          }
        }}
        rowKey="id"
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
        headerTitle="物料列表"
        toolBarRender={() => [
          <Button
            key="button"
            type="primary"
            onClick={() => {
              typeForm.resetFields();
              setModalText('新增信息');
              setIsModalOpen(true);
            }}
          >
            添加物料
          </Button>,
        ]}
      />
       <Modal
        key="01"
        width={800}
        title={<Tag color="#cd201f">{modalText}</Tag>}
        open={isModalOpen}
        onCancel={() => {
          setIsModalOpen(false);
        }}
        footer={[
          <Button
            key="back"
            onClick={() => {
              setIsModalOpen(false);
            }}
          >
            返回
          </Button>,
          <Button key="submit" form="myForm" type="primary" htmlType="submit">
            提交
          </Button>,
        ]}
      >
        <Form
          form={typeForm}
          labelAlign='right'
          name="basic"
          id="myForm"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 12 }}
          onFinish={OnSubmit}
          autoComplete="off"
        >
          <Form.Item label="id" name="id" hidden>
            <Input />
          </Form.Item>
          <Form.Item
            label="物料名称"
            name="name"
            rules={[{ required: true, message: '此项必填！' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="物料编码"
            name="code"
            rules={[{ required: true, message: '此项必填！' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="物料单位"
            name="unit"
            rules={[{ required: true, message: '此项必填！' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="每秒出水量"
            name="wos"
            rules={[{ required: true, message: '此项必填！' }]}
          >
            <Input suffix='g' />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}
export default Index
