import React, { useState, useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { Drawer, Row, Col, Modal, Form, Input, Button, InputNumber, TreeSelect, Select, message } from 'antd';
import ProTable from '@ant-design/pro-table';
import Field from '@ant-design/pro-field';
import { CopyOutlined } from '@ant-design/icons';

import { useIntl, FormattedMessage } from 'umi';
import { getPayTemplatePageList, add, deletepaytemplate, update } from './service';

const PayTemplate = () => {
  const actionRef = useRef();
  const [currentRow, setCurrentRow] = useState({});
  //drawer 显示控制
  const [drawerVisible, setDrawerVisible] = useState(false);

  //请求详情
  const requestPayTemplate = async (fields) => {

    var data = {
      name: fields.name,
      id: fields.id
    };
    var list = [];
    fields.payTemplateOutDtoInfo.forEach(element => {
      if (element.payType == 1) {
        data.wxappId = element.appId;
        data.wxid = element.id;
        data.wxKey = element.key;
        data.wxpId = element.pId;
        data.wxpayType = 1;
        data.wxprivateKey = element.privateKey;
        data.wxpubLicKey = element.pubLicKey;
      } else {
        data.zfbappId = element.appId;
        data.zfbid = element.id;
        data.zfbKey = element.key;
        data.zfbpId = element.pId;
        data.zfbpayType = 2;
        data.zfbprivateKey = element.privateKey;
        data.zfbpubLicKey = element.pubLicKey;
      }

    });
    return data;
  };


  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: '规则名称是唯一的key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '名称',
      dataIndex: 'name',
      valueType: 'textarea',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key={record.id}
          onClick={async () => {
            var data = await requestPayTemplate(record);
            setCurrentRow(data);
            setDrawerVisible(true);
          }} >
          修改
        </a>,
           <a
           key={record.id}
           onClick={async () => {
            var input=[record.id];
            deletepaytemplate(input).then((re) => {
              if (re.data) {
                message.success('删除成功');
                actionRef.current.reload();
              } else {
                message.error('删除失败');
              }
            });
           }} >
           删除
         </a>
      ],
    },
  ];
  const intl = useIntl();
  return (
    <PageContainer>
      <ProTable
        toolBarRender={() => {
          return <Button
            type="primary"
            key="primary1"
            onClick={() => {
              setCurrentRow({});
              setDrawerVisible(true);

            }}
          >
            <PlusOutlined /> 新建
          </Button>
        }}
        headerTitle="支付配置"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        request={async (params) => {
          var queryData = [];
          var total = 0;
          await getPayTemplatePageList(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 }}
      />
      {/* ------------------------ */}
      <Drawer
        title="支付配置"
        key="1"
        placement="right"
        size="large"
        width="900"
        onClose={() => {
          setDrawerVisible(false);
        }}
        visible={drawerVisible}
        destroyOnClose
      >
        <Form
          preserve={false}
          layout="horizontal"
          initialValues={currentRow}
          labelCol={{
            span: 4,
          }}
          onFinish={async (value) => {
            if (value.id) {
              update(value).then((re) => {
                if (re.data) {
                  message.success('修改成功');
                  setDrawerVisible(false);
                  actionRef.current.reload();
                } else {
                  message.error('修改失败');
                }
              });
            } else {
              add(value).then((re) => {
                if (re.data) {
                  message.success('添加成功');
                  setDrawerVisible(false);
                  actionRef.current.reload();
                } else {
                  message.error('添加失败');
                }
              });

            }
          }}
        >
          <Form.Item name="id" hidden={true}>
            <Input />
          </Form.Item>
          <Form.Item name="name" label="名称" rules={[{ required: true, max: 20 }]}>
            <Input placeholder="请输入名称" />
          </Form.Item>
          <Row>
            <Col span={11} >
              <h3>微信</h3>
              <Form.Item name="wxid" hidden={true}>
                <Input />
              </Form.Item>
              <Form.Item name="wxappId" label="AppId" rules={[{ required: true, max: 3000 }]}>
                <Input placeholder="请输入appId" />
              </Form.Item>
              <Form.Item name="wxpId" tooltip="微信的MCHid" label="MchId" rules={[{ required: true, max: 3000 }]}>
                <Input placeholder="请输入MchId" />
              </Form.Item>
              <Form.Item name="wxKey" tooltip="微信的aAppKey" label="AppKey" rules={[{ required: true, max: 3000 }]}>
                <Input placeholder="请输入AppKey" />
              </Form.Item>
              <Form.Item name="wxpubLicKey" tooltip="证书 " label="证书" rules={[{ required: true, max: 3000 }]}>
                <Input placeholder="请输入证书" />
              </Form.Item>
              <Form.Item name="wxprivateKey" tooltip="密码" label="密码" rules={[{ required: true, max: 3000 }]}>
                <Input placeholder="请输入密码" />
              </Form.Item>
            </Col>
            <Col span={2} ></Col>
            <Col span={11} >
              <h3>支付宝</h3>
              <Form.Item name="zfbid" hidden={true}>
                <Input />
              </Form.Item>
              <Form.Item name="zfbappId" label="AppId" rules={[{ required: true, max: 3000 }]}>
                <Input placeholder="请输入appId" />
              </Form.Item>
              <Form.Item name="zfbpId" tooltip="支付宝的Pid" label="PId" rules={[{ required: true, max: 3000 }]}>
                <Input placeholder="请输入PId" />
              </Form.Item>
              <Form.Item name="zfbKey" tooltip="支付宝的pk" label="PK" rules={[{ required: true, max: 3000 }]}>
                <Input placeholder="请输入PK" />
              </Form.Item>
              <Form.Item name="zfbpubLicKey" tooltip="公钥 " label="公钥" rules={[{ required: true, max: 3000 }]}>
                <Input placeholder="请输入公钥" />
              </Form.Item>
              <Form.Item name="zfbprivateKey" tooltip="私钥" label="私钥" rules={[{ required: true, max: 3000 }]}>
                <Input placeholder="请输入私钥" />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </PageContainer>
  );
};

export default PayTemplate;
