import React, { useState, useRef, useEffect } from 'react';
|
import { Col, Form, Input, Row, Checkbox, Slider, Select, Drawer, Space, Button, InputNumber, Card } from 'antd';
|
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
|
import {
|
BranchesOutlined,
|
BorderOuterOutlined,
|
} from '@ant-design/icons';
|
import { createStyles } from 'antd-style';
|
import * as Utils from '../utils'
|
import Http from '@/utils/http';
|
import MapSettings from './mapSettings';
|
import ConfigSettings from './configSettings';
|
|
const useStyles = createStyles(({ token, css }) => {
|
|
})
|
|
const Settings = (props) => {
|
const intl = useIntl();
|
const { styles } = useStyles();
|
const [activeTabKey, setActiveTabKey] = useState('map');
|
|
const [mapForm] = Form.useForm();
|
const [configForm] = Form.useForm();
|
|
const contentList = {
|
map: (
|
<MapSettings
|
refCurr={props.refCurr}
|
curSprite={props.curSprite}
|
setSpriteBySettings={props.setSpriteBySettings}
|
setDidClickSprite={props.setDidClickSprite}
|
onSubmit={props.onSubmit}
|
mapForm={mapForm}
|
/>
|
),
|
config: (
|
<ConfigSettings
|
refCurr={props.refCurr}
|
curSprite={props.curSprite}
|
setSpriteBySettings={props.setSpriteBySettings}
|
setDidClickSprite={props.setDidClickSprite}
|
onSubmit={props.onSubmit}
|
configForm={configForm}
|
/>
|
),
|
};
|
|
const handleCancel = () => {
|
props.onCancel();
|
};
|
|
const handleOk = () => {
|
if (activeTabKey === 'map') {
|
mapForm.submit();
|
}
|
if (activeTabKey === 'config') {
|
configForm.submit();
|
}
|
}
|
|
return (
|
<>
|
<Drawer
|
open={props.open}
|
onClose={handleCancel}
|
getContainer={props.refCurr}
|
rootStyle={{ position: "absolute" }}
|
mask={false}
|
width={570}
|
extra={
|
<Space>
|
<Button onClick={handleCancel}>
|
<FormattedMessage id='common.cancel' defaultMessage='取消' />
|
</Button>
|
<Button hidden={activeTabKey === 'map' || activeTabKey === 'config'} onClick={handleOk} type="primary">
|
<FormattedMessage id='common.submit' defaultMessage='保存' />
|
</Button>
|
</Space>
|
}
|
>
|
<Card
|
hoverable
|
bordered={false}
|
type='inner'
|
tabList={[
|
{
|
key: 'map',
|
tab: intl.formatMessage({ id: 'map.settings.map.param', defaultMessage: '地图参数' }),
|
icon: <BorderOuterOutlined />
|
|
},
|
{
|
key: 'config',
|
tab: intl.formatMessage({ id: 'map.settings.config.param', defaultMessage: '系统参数' }),
|
icon: <BranchesOutlined />
|
},
|
]}
|
activeTabKey={activeTabKey}
|
onTabChange={(key) => {
|
setActiveTabKey(key)
|
}}
|
tabProps={{
|
centered: true,
|
size: 'large',
|
type: "card",
|
style: {
|
}
|
}}
|
>
|
{contentList[activeTabKey]}
|
</Card>
|
|
</Drawer >
|
</>
|
)
|
}
|
|
export default Settings;
|
