import React from 'react';
import { Row, Col, Card, Divider, Input, Form, Space, Select, message, } from 'antd';
import Styles from './web.module.less';
export default function Web(props) {
    const { config, setValue } = props;
    const [messageApi] = message.useMessage();
    return (<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
            <Row>
                <Card className={Styles.tips}>
                    每种均可配置一个，相应的服务所使用的帐号请准确对应
                </Card>
            </Row>
            <Col flex="auto">
                <Divider orientation="left" className={Styles.title}>
                    网站-微信扫码
                </Divider>
                <Form colon={true} labelAlign="left" layout="vertical" style={{ marginTop: 10 }}>
                    <Form.Item label="appId">
                        <>
                            <Input placeholder="请输入appId" type="text" value={config?.wechat?.appId} onChange={(e) => setValue(`wechat.appId`, e.target.value)}/>
                        </>
                    </Form.Item>
                    <Form.Item label="appSecret">
                        <>
                            <Input placeholder="请输入appSecret" type="text" value={config?.wechat?.appSecret} onChange={(e) => setValue(`wechat.appSecret`, e.target.value)}/>
                        </>
                    </Form.Item>
                    <Form.Item label="授权回调域" 
    //name="domain"
    tooltip="授权回调域可选填，未填写的话，使用网页访问的域名当作授权回调域">
                        <>
                            <Input placeholder="请输入授权回调域" type="text" value={config?.wechat?.domain} onChange={(e) => setValue(`wechat.domain`, e.target.value)}/>
                        </>
                    </Form.Item>
                </Form>
            </Col>

            <Col flex="auto">
                <Divider orientation="left" className={Styles.title}>
                    网站-微信支付
                </Divider>
                <Form colon={true} labelAlign="left" layout="vertical" style={{ marginTop: 10 }}>
                    <Form.Item label="appId">
                        <>
                            <Input placeholder="请输入appId" type="text" value={config?.wechatPay?.appId} onChange={(e) => setValue(`wechatPay.appId`, e.target.value)}/>
                        </>
                    </Form.Item>
                    <Form.Item label="appSecret">
                        <>
                            <Input placeholder="请输入appSecret" type="text" value={config?.wechatPay?.appSecret} onChange={(e) => setValue(`wechatPay.appSecret`, e.target.value)}/>
                        </>
                    </Form.Item>
                </Form>
            </Col>

            <Col flex="auto">
                <Divider orientation="left" className={Styles.title}>
                    Location
                </Divider>
                <Form colon={true} labelAlign="left" layout="vertical" style={{ marginTop: 10 }}>
                    <Form.Item label="协议">
                        <>
                            <Select style={{ width: '100%' }} placeholder="请选择协议" value={config?.location?.protocol} onChange={(value) => {
            setValue(`location.protocol`, value);
        }} options={[
            {
                label: 'http:',
                value: 'http:',
            },
            {
                label: 'https:',
                value: 'https:',
            },
        ]}/>
                        </>
                    </Form.Item>
                    <Form.Item label="主机">
                        <>
                            <Input placeholder="请输入主机名" type="text" value={config?.location?.hostname} onChange={(e) => setValue(`location.hostname`, e.target.value)}/>
                        </>
                    </Form.Item>
                    <Form.Item label="端口">
                        <>
                            <Input placeholder="请输入端口" type="text" value={config?.location?.port} onChange={(e) => setValue(`location.port`, e.target.value || '')}/>
                        </>
                    </Form.Item>
                    <Form.Item label="扫码页" tooltip="扫码页可选填，未填写的话，使用wechatQrCode/scan">
                        <>
                            <Input placeholder="请输入扫码页" type="text" value={config?.location?.scanPage} onChange={(e) => setValue(`location.scanPage`, e.target.value)}/>
                        </>
                    </Form.Item>
                </Form>
            </Col>
        </Space>);
}