
import { useRef, useState, useEffect } from 'react';
import { connect } from '@umijs/max';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import {
    ProFormText,
    ProFormSegmented,
    ProFormSelect,
    ProForm,

} from '@ant-design/pro-components';
import { ConfigProvider, Flex, Space, Modal, message, Row, Col, Switch } from 'antd';
import { GetActivityaddressCate, PostActivityaddressAdd, PostActivityaddressUpdate , GetActivityaddressDetail} from '@/apis/api';

import MapComponent from '@/components/Common/map';

const PagesMainActivityListCreate: React.FC = ({ dispatch, dictModel, openModel, id }: any) => {
    const formRef = useRef<ProFormInstance>();
    const [openPreview, setOpenPreview] = useState(false);
    const [detail, setDetail] = useState<ActiveType.list | null>(null)
    const [mapSwitch, setMapSwitch] = useState<boolean>(false); // 选择地图
    const [lat, setLat] = useState<string | number>('');
    const [lng, setLng] = useState<string | number>('');

    useEffect(() => {
        setOpenPreview(openModel.openModal)
    }, [openModel.openModal])



    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#4FBE70',
                    }
                }}
            >
                <Modal
                    open={openPreview}
                    title={id ? '编辑活动地址' : '添加活动地址'}
                    centered
                    maskClosable={false}
                    footer={null}
                    destroyOnClose
                    width={1000}
                    onCancel={() => {
                        dispatch({ type: 'openModel/getOpenModal', payload: false })
                    }}
                >
                    <ProForm<ActiveType.list >
                        formRef={formRef}
                        request={async () => {
                            if (id) {
                                let res = await GetActivityaddressDetail({ id: id })
                                setDetail(res.data)
                                return res.data;
                            } else {
                                return {
                                    address: '',
                                    store_name: '',
                                    lat: '',
                                    lng: '',
                                    contact_person: '',
                                    mobile: '',
                                    audit_mobile: '',
                                    communal: '',
                                    cate: ''
                                }
                            }
                        }}
                        submitter={{
                            searchConfig: {
                                resetText: '取消',
                                submitText: '保存',
                            },
                            render: (_, dom) => { return <Flex justify='flex-end'> <Space>{dom}</Space></Flex> },
                            onReset: () => {
                                setDetail(null)
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            }
                        }}
                        onFinish={async (values) => {
                            console.log(values)
                            if (id) {
                                values.id = id;
                                let res = await PostActivityaddressUpdate(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            } else {
                                let res = await PostActivityaddressAdd(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            }
                        }}
                    >
                        <Row gutter={[16, 16]}>
                            <Col span={24}>
                                <Row gutter={[16, 16]}>
                                    {/* <Col span={24}>
                                        <Switch checked={mapSwitch} checkedChildren='地图已显示' unCheckedChildren="地图已关闭" onChange={(val) => {
                                            setMapSwitch(val)
                                        }} />
                                    </Col>
                                    <Col span={8}>
                                        <ProFormText
                                            label="经度"
                                            name="lng"
                                            placeholder="请选择打开地图并选择经度"
                                            disabled
                                            rules={[{
                                                required: true, message: '请选择打开地图并选择经度',
                                            }]}
                                        />
                                    </Col>
                                    <Col span={8}>
                                        <ProFormText
                                            label="纬度"
                                            name="lat"
                                            disabled
                                            placeholder="请选择打开地图并选择纬度"
                                            rules={[{
                                                required: true, message: '请选择打开地图并选择纬度',
                                            }]}
                                        />
                                    </Col> */}
                                    <Col span={8}>
                                        <ProFormText
                                            label="门店地址"
                                            name="address"
                                            placeholder="请在地图上选择或输入门店地址"
                                            rules={[{ required: true, message: '请在地图上选择或输入门店地址' }]}
                                        />
                                    </Col>
{/* 
                                    {
                                        mapSwitch && <Col span={24}>
                                            <MapComponent lat={lat} lng={lng} getLoc={(values) => {
                                                formRef.current.setFieldsValue({
                                                    latitude: values.latlng.lat,
                                                    longitude: values.latlng.lng,
                                                    address: values.poiaddress
                                                })
                                                setLat(values.latlng.lat)
                                                setLng(values.latlng.lng)
                                                setMapSwitch(false)
                                            }}></MapComponent>
                                        </Col>
                                    } */}
                                </Row>
                            </Col>
                            <Col span={24}>
                                <ProFormText
                                    label="门店名"
                                    name="store_name"
                                    placeholder="请输入门店名"
                                    rules={[{ required: true, message: '请输入门店名' }]}
                                />
                            </Col>
                            <Col span={12}>
                                <ProFormText
                                    label="联系人"
                                    name="store_name"
                                    placeholder="请输入联系人"
                                    rules={[{ required: true, message: '请输入联系人' }]}
                                />

                            </Col>
                            <Col span={12}>
                                <ProFormText
                                    label="联系电话"
                                    name="mobile"
                                    placeholder="请输入联系电话"
                                    rules={[{ required: true, message: '请输入联系电话' }]}
                                />

                            </Col>
                            <Col span={12}>
                                <ProFormText
                                    label="审核电话"
                                    name="audit_mobile"
                                    placeholder="请输入审核电话"
                                    rules={[{ required: true, message: '请输入审核电话' }]}
                                />

                            </Col>
                            <Col span={12}>
                                <ProFormText
                                    label="所属社区"
                                    name="communal"
                                    placeholder="请输入所属社区"
                                    rules={[{ required: true, message: '请输入所属社区' }]}
                                />
                            </Col>
                            <Col span={12}>
                                <ProFormSelect
                                    label="地址分类"
                                    name="cate"
                                    request={async (keyword) =>
                                        GetActivityaddressCate({ page: 1, pagesize: 100, keyword: keyword.keyWords }).then(res => {
                                            return res.data.activity_address_cate.map((item : object) => ({
                                                label: item,
                                                value: item,
                                            }));
                                        })
                                    }
                                    placeholder="请搜索选择地址分类"
                                />
                            </Col>
                        </Row>
                    </ProForm>
                </Modal>
            </ConfigProvider>
        </>
    );
};



export default connect(({ dictModel, openModel }: any) => ({
    dictModel, openModel
}))(PagesMainActivityListCreate);