import React, { useState, useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import { Drawer, Row, Col, Modal, Form, Input, Button, InputNumber, TreeSelect, Popconfirm, message } from 'antd';
import ProTable from '@ant-design/pro-table';
import { page, add, del, update } from './service';

const PayTemplate = () => {
  const actionRef = useRef();
  const [form] = Form.useForm();
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [currentRow, setCurrentRow] = useState({});
  
  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: '规则名称是唯一的key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: 'APPID',
      dataIndex: 'appId',
      valueType: 'textarea',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: 300,
      render: (_, record) => [
        <a
          key={record.id}
          onClick={async () => {
            form.setFieldsValue(record);
            setCurrentRow(record);
            setDrawerVisible(true);
          }} >
          更新
        </a>,
        <Popconfirm
          title="确定要删除吗？"
          onConfirm={() => {
            var input = [record.id];
            del(input).then((re) => {
              if (re.data) {
                message.success('删除成功');
                actionRef.current.reloadAndRest();
              } else {
                message.error('删除失败');
              }
            });
          }}
          okText="确定"
          cancelText="取消"
        >
          <a key={record.id} >
            删除
          </a>
        </Popconfirm>


      ],
    },
  ];
  return (
    <PageContainer header={{
      title: '',
      breadcrumb: {},
    }}>
      <ProTable
        toolBarRender={() => {
          return <Button
            type="primary"
            key="primary"
            onClick={() => {
              form.resetFields();
              setDrawerVisible(true) 
              }} >
            <PlusOutlined /> 新建
          </Button>
        }}
        headerTitle=""
        actionRef={actionRef}
        rowKey="id"
        search={false}
        request={async (params) => {
          var queryData = [];
          var total = 0;
          await page(JSON.stringify(params)).then((re) => {
            queryData = re.data.data;
            total = re.data.total;
          });
          return {
            data: queryData,
            success: true,
            total: total,
          };
        }}
        columns={columns}
        pagination={{ defaultPageSize: 10 }}
      />
      {/* ------------------------ */}

      <Modal open={drawerVisible} onOk={() => { form.submit() }} onCancel={() => { setDrawerVisible(false) }}>
        <Form 
          form={form}
          preserve={false}
          layout="horizontal"
          labelCol={{ span: 4 }}
          onFinish={async (value) => {
            if (value.id) {
              update(value).then((re) => {
                if (re.data) {
                  message.success('修改成功');
                  setDrawerVisible(false);
                  actionRef.current.reloadAndRest();
                } else {
                  message.error(re.errors||'修改失败');
                }
              });
            } else {
              add(value).then((re) => {
                if (re.data) {
                  message.success('添加成功');
                  setDrawerVisible(false);
                  actionRef.current.reloadAndRest();
                } else {
                  message.error(re.errors||'添加失败');
                }
              });

            }
          }}
        >
          <Form.Item name="id" hidden={true}>
            <Input />
          </Form.Item>
          <br />
          <Form.Item name="appId" label="APPID"  rules={[{ required: true, max: 500 }]}>
            <Input placeholder="请输入appid" />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
};

export default PayTemplate;
