import React, { Suspense } from 'react';
import moment from 'moment'; // 时间相关引用，没有使用可以删除
import numeral from "numeral"; // 数字相关引用，没有使用可以删除
import { connect } from 'umi';
import { useRef, useState } from 'react';
import Draggable from 'react-draggable';
import SubMenu from "antd/lib/menu/SubMenu";
import useRequest from '@ahooksjs/use-request'; // 请求数据的引用
import ProCard from '@ant-design/pro-card'; // 卡片组件
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import ProForm, { ProFormDatePicker, ProFormDigit, ProFormSelect, ProFormText, ProFormTextArea, ProFormTreeSelect, ProFormUploadButton } from '@ant-design/pro-form';
import { MenuFoldOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Col, Drawer, message, Row, Popconfirm, Space, Image, Modal, Form, Switch, Menu, Avatar, Upload, Descriptions, Typography, Divider, Radio } from 'antd';
import type { CurrentUser } from "umi";
import type { ConnectState } from '@/models/connect';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import type { FormInstance } from 'antd';
import type { ServerpartModel } from './data';
import { getFieldEnum } from "@/services/options"; // 枚举和树相关的引用，没有使用可以删除
import { getList, updateserverpart, handleGetFieldEnumTree, handleGetSERVERPARTDetail, handleGetSERVERPARTTYPEList, handleGetFieEnumList } from './service'; // 接口相关对象的引用
import session from '@/utils/session';
import { handleNewGetSERVERPARTDetail, handleSynchroSERVERPART } from '@/pages/newDataAnalysis/service';
import LoadingBox from '@/pages/reports/Finance/businessAnalysis/components/loading';

const ServerpartTable: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
    const { currentUser } = props
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();

    const SERVERPART_TYPETree = session.get('SERVERPART_TYPETree')
    // 站点类型
    const SERVERPARTSITE_TYPETree = session.get('SERVERPARTSITE_TYPETree')
    // 方位区的枚举
    const shopregionObj = session.get('shopregionObj')
    const shopregionList = session.get('shopregionList')
    // 树相关的属性和方法
    const [currenMenu, setCurrenMenu] = useState<any>(); // 当前选中的左侧菜单
    const [selectedId, setSelectedId] = useState<[]>([])
    const [collapsible, setCollapsible] = useState<boolean>(false)
    // 请求服务区详情的时候 不显示右侧表单 且出现加载效果
    const [detailLoading, setDetailLoading] = useState<boolean>(false)
    // 当前选择的服务区详情
    const [serverPartDetail, setServerPartDetail] = useState<any>()
    // 区域的选择列表
    const [SPREGIONTYPE_IDLIST, setSPREGIONTYPE_IDLIST] = useState<any>()
    // 显示保存按钮
    const [showSave, setShowSave] = useState<boolean>(false)
    // 当前选择服务区的省份
    let currentServerPart: any = ''
    // 左侧树数据
    const [leftTreeData, setLeftTreeData] = useState<any>()
    // 加载服务区树
    const { loading: treeLoading, data: treeView = [] } = useRequest(async () => {
        // const req: any = {
        //     FieldExplainField: 'DIVISION_CODE',
        //     FieldEnumStatus: true,
        //     DataType: 1
        // }
        // const data = await handleGetFieldEnumTree(req)
        // console.log('alldsada', data);

        // return data
        handleGetLeftTree()
    })

    const handleGetLeftTree = async () => {
        const req: any = {
            FieldExplainField: 'DIVISION_CODE',
            FieldEnumStatus: true,
            DataType: 1
        }
        const data = await handleGetFieldEnumTree(req)
        console.log('alldsada', data);
        setLeftTreeData(data)
    }


    // 根据左侧选中的菜单加载右侧数据
    const loadSelectedId = (item?: any) => {
        console.log('item', item);

        setSelectedId(item.selectedKeys || []) // 选中的子菜单key
        const [type, value] = item.key.split('-')
        if (type === '2') {
            console.log('value', value);
            setCurrenMenu(value)
            handleGetDetail(value)
            setShowSave(true)
        } else {
            setShowSave(false)
            setSPREGIONTYPE_IDLIST([])
            setPartitionSelectList([])
            setServerPartDetail(undefined)
            setPartitionDisable(false)
            setServerPartType(0)
        }

        // if (type === '1' && item.keyPath) {
        //     const newCurrentMenu = item.keyPath.length > 1 ? item.keyPath[1].split('-')[1] : item.keyPath[0].split('-')[1]
        //     setCurrenMenu(newCurrentMenu)
        // }
        // else {
        //     const newCurrentMenu = value
        //     // 父级菜单新老相等 并且触发点击为 点击父级菜单
        //     if (newCurrentMenu === currenMenu && type === '0') {
        //         return
        //     }
        //     setCurrenMenu(newCurrentMenu)
        // }
        // actionRef?.current?.reload()
    }
    // 服务区类型
    const [serverPartType, setServerPartType] = useState<number>(2)
    // 服务区分区是否禁用
    const [partitionDisable, setPartitionDisable] = useState<boolean>(false)
    // 选的分区
    const [partitionSelectList, setPartitionSelectList] = useState<any>()

    // 生成左侧菜单
    const getMenuDom = (data: any[], callback: (item: any) => void) => {
        return (data.map((element: any) => {
            if (element.children && element.children.length > 0) {
                return (
                    <SubMenu title={element.label}
                        icon={element.ico ? <Avatar src={element.ico} size={16} style={{ marginRight: 4 }} shape="square" /> : null}
                        key={`${element.key || element.value}`}
                        onTitleClick={(item) => {
                            // 选中一级菜单
                            if (!currenMenu || item.key !== `${currenMenu?.key}`) {
                                callback.call(callback, item)
                            }
                            item.domEvent.stopPropagation();
                        }}
                    >
                        {element.children && element.children.length > 0 && getMenuDom(element.children, callback)}
                    </SubMenu>
                )
            }
            return (<Menu.Item icon={element.ico ? <Avatar src={element.ico} size={16} shape="square" /> : null}
                key={`${element.key || element.value}`}>{element.label}</Menu.Item>)
        }))
    }
    // 拿到服务区详情
    const handleGetDetail = async (code: any) => {
        setDetailLoading(true)
        const data = await handleGetSERVERPARTDetail({ FieldEnumId: code })
        console.log('detail', data);
        data.STATISTICS_TYPE = data.STATISTICS_TYPE ? Number(data.STATISTICS_TYPE) : ''
        data.SERVERPART_IPADDRESS = data.SERVERPART_IPADDRESS ? Number(data.SERVERPART_IPADDRESS) : ''
        currentServerPart = data.PROVINCE_CODE
        const serviceA: any = {}
        const serviceB: any = {}
        // 判断分区是否禁用
        if (data.ServerPartInfo && data.ServerPartInfo.length > 0) {
            setPartitionDisable(true)
            if (data.ServerPartInfo.length > 1) {
                setServerPartType(2)
            } else {
                setServerPartType(1)
            }

            const regionInfoList: any = data.ServerPartInfo
            // 分区数组
            const partitionList: any = []

            if (regionInfoList && regionInfoList.length > 0) {
                regionInfoList.forEach((item: any, index: number) => {
                    if (index === 0) {
                        for (const key in item) {
                            serviceA[`${key}_A`] = item[key] ? item[key] : item[key] === 0 ? 0 : ''
                        }
                        serviceA.currentArea = item.SERVERPART_REGION

                        partitionList.push({ label: shopregionObj[item.SERVERPART_REGION], value: item.SERVERPART_REGION })
                    } else {
                        for (const key in item) {
                            serviceB[`${key}_B`] = item[key] ? item[key] : item[key] === 0 ? 0 : ''
                        }
                        partitionList.push({ label: shopregionObj[item.SERVERPART_REGION], value: item.SERVERPART_REGION })
                        serviceB.otherArea = item.SERVERPART_REGION
                    }
                })
            }
            console.log('partitionList', partitionList);

            setPartitionSelectList(partitionList)
        }
        const obj: any = {
            ...data.RtServerPart,
            ...serviceA,
            ...serviceB,
            ...data
        }
        console.log('obj', obj);
        setServerPartDetail(obj)
        handleGetFormData(obj)
        setDetailLoading(false)
    }

    // 嵌套去掉服务区的那一层
    const handleGetOther = (list: any) => {
        const res: any = []
        if (list && list.length > 0) {
            list.forEach((item: any) => {
                if (item.type !== 2) {
                    let childrenList: any = []
                    if (item.children && item.children.length > 0) {
                        childrenList = handleGetOther(item.children)
                    }
                    item.children = childrenList
                    res.push(item)
                }
            })
        }
        return res
    }

    // 拿到区域名称的选择列表
    const handleGetSPRList = async (e: any) => {
        const res: any = await handleGetFieEnumList({ FieldEnum_ID: e })
        const obj: any = res && res.length > 0 ? res[0] : {}
        console.log('obj', obj);
        const req: any = {
            SearchParameter: {
                SERVERPARTSTATICTYPE_ID: 1000,
                TYPE_STATE: 1,
                PROVINCE_CODE: obj?.FieldEnum_Value
            },
            PageIndex: 1,
            PageSize: 999999,
            ShowWholePower: true,
            Province_Code: obj?.FieldEnum_Value,
            SortStr: "TYPE_INDEX,SERVERPARTTYPE_ID"
        }
        const data = await handleGetSERVERPARTTYPEList(req)
        console.log('eeqweq', data);
        setSPREGIONTYPE_IDLIST(data)
    }

    // 查到详情之后 给表单调用的一些东西
    const handleGetFormData = async (obj: any) => {
        await handleGetSPRList(obj?.PROVINCE_CODE)
    }

    // 保存按钮
    const handleGetSave = async () => {
        formRef.current?.validateFields().then(async (res: any) => {
            console.log('res', res);
            // 把分区的数据取出来
            const objA: any = {
                SERVERPART_REGION: res?.currentArea,
                SERVERPART_REGIONNAME: res?.currentArea ? shopregionObj[res?.currentArea] : '',
            }
            const objB: any = {
                SERVERPART_REGION: res?.otherArea,
                SERVERPART_REGIONNAME: res?.otherArea ? shopregionObj[res?.otherArea] : ''
            }

            for (const key in res) {
                if (key.indexOf('_A') > 0) {
                    const newKey: string = key.split('_A')[0]
                    objA[newKey] = res[key]
                } else if (key.indexOf('_B') > 0) {
                    const newKey: string = key.split('_B')[0]
                    objB[newKey] = res[key]
                }
            }

            let SPREGIONTYPEOBJ: any = {}

            if (res?.SPREGIONTYPE_ID) {
                SPREGIONTYPE_IDLIST.forEach((item: any) => {
                    if (item.SERVERPARTTYPE_ID === res?.SPREGIONTYPE_ID) {
                        SPREGIONTYPEOBJ = item
                    }
                })
            }



            if (serverPartDetail?.SERVERPART_ID) {
                // 详情里面本身的服务区数组数据
                const detailServerPartList: any = serverPartDetail.ServerPartInfo
                if (detailServerPartList && detailServerPartList.length === 2) {
                    detailServerPartList.forEach((item: any) => {
                        if (Number(item.SERVERPART_REGION) === Number(objA.SERVERPART_REGION)) {
                            objA.SERVERPARTINFO_ID = item.SERVERPARTINFO_ID
                            objA.SERVERPART_ID = serverPartDetail?.SERVERPART_ID
                            objA.GREENSPACEAREA = item.GREENSPACEAREA
                            objA.SCENICAREA = item.SCENICAREA
                        }
                        if (Number(item.SERVERPART_REGION) === Number(objB.SERVERPART_REGION)) {
                            objB.SERVERPARTINFO_ID = item.SERVERPARTINFO_ID
                            objB.SERVERPART_ID = serverPartDetail?.SERVERPART_ID
                            objB.GREENSPACEAREA = item.GREENSPACEAREA
                            objB.SCENICAREA = item.SCENICAREA
                        }
                    })
                } else {
                    if (objB.SERVERPART_REGION) {
                        objB.SERVERPART_ID = serverPartDetail?.SERVERPART_ID
                    }
                }
            }

            console.log('objA', objA);
            console.log('objB', objB);
            console.log('res', res);
            console.log('serverPartDetail', serverPartDetail);

            const req: any = {
                ServerPartInfo: objB.SERVERPART_REGION ? [objA, objB] : [objA],
                RtServerPart: {
                    RTSERVERPART_ID: serverPartDetail?.RtServerPart?.RTSERVERPART_ID,
                    SERVERPART_ID: serverPartDetail?.RtServerPart?.SERVERPART_ID,
                    SERVERPART_ADDRESS: res?.SERVERPART_ADDRESS,
                    EXPRESSWAY_NAME: res?.EXPRESSWAY_NAME,
                    SELLERCOUNT: serverPartDetail?.RtServerPart?.SELLERCOUNT,
                    SERVERPART_X: res?.SERVERPART_X,
                    SERVERPART_Y: res?.SERVERPART_Y,
                    SERVERPART_TEL: serverPartDetail?.RtServerPart?.SERVERPART_TEL,
                    STARTDATE: res?.STARTDATE,
                    SERVERPART_AREA: res?.SERVERPART_AREA,
                    FLOORAREA: res?.FLOORAREA,
                    BUSINESSAREA: serverPartDetail?.RtServerPart?.BUSINESSAREA,
                    SHAREAREA: res?.SHAREAREA,
                    TOTALPARKING: serverPartDetail?.RtServerPart?.TOTALPARKING,
                    OWNEDCOMPANY: res?.OWNEDCOMPANY,
                    MANAGERCOMPANY: res?.MANAGERCOMPANY,
                    STAFF_ID: currentUser?.ID,
                    STAFF_NAME: currentUser?.Name,
                    OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
                    SERVERPART_INFO: res?.SERVERPART_INFO,
                    CENTERSTAKE_NUM: res?.CENTERSTAKE_NUM,
                    TAXPAYER_IDENTIFYCODE: res?.TAXPAYER_IDENTIFYCODE,
                    WATERINTAKE_TYPE: res?.WATERINTAKE_TYPE,
                    SEWAGEDISPOSAL_TYPE: res?.SEWAGEDISPOSAL_TYPE,
                    BUSINESS_REGION: serverPartDetail?.RtServerPart?.BUSINESS_REGION,
                },
                SERVERPART_ID: serverPartDetail?.SERVERPART_ID,
                SERVERPART_NAME: res?.SERVERPART_NAME,
                SERVERPART_ADDRESS: res?.SERVERPART_ADDRESS,
                SERVERPART_INDEX: res?.SERVERPART_INDEX,
                EXPRESSWAY_NAME: res?.EXPRESSWAY_NAME,
                SELLERCOUNT: res?.SELLERCOUNT || serverPartDetail?.SELLERCOUNT,
                SERVERPART_AREA: res?.SERVERPART_AREA,
                SERVERPART_X: res?.SERVERPART_X,
                SERVERPART_Y: res?.SERVERPART_Y,
                SERVERPART_TEL: res?.SERVERPART_TEL || serverPartDetail?.SERVERPART_TEL,
                SERVERPART_INFO: res?.SERVERPART_INFO,
                PROVINCE_CODE: res?.PROVINCE_CODE || serverPartDetail?.PROVINCE_CODE,
                SERVERPART_CODE: res?.SERVERPART_CODE,
                SERVERPART_TYPE: res?.SERVERPART_TYPE,
                STARTDATE: res?.STARTDATE,
                OWNEDCOMPANY: res?.OWNEDCOMPANY,
                FLOORAREA: res?.FLOORAREA,
                BUSINESSAREA: res?.BUSINESSAREA || serverPartDetail?.BUSINESSAREA,
                SHAREAREA: res?.SHAREAREA,
                MANAGERCOMPANY: res?.MANAGERCOMPANY,
                SPREGIONTYPE_ID: SPREGIONTYPEOBJ?.SERVERPARTTYPE_ID || serverPartDetail?.SPREGIONTYPE_ID,
                SPREGIONTYPE_NAME: SPREGIONTYPEOBJ?.TYPE_NAME || serverPartDetail?.SPREGIONTYPE_NAME,
                SPREGIONTYPE_INDEX: SPREGIONTYPEOBJ?.TYPE_INDEX || serverPartDetail?.SPREGIONTYPE_INDEX,
                STATISTICS_TYPE: res?.STATISTICS_TYPE || serverPartDetail?.STATISTICS_TYPE,
                FIELDENUM_ID: res?.FIELDENUM_ID || serverPartDetail?.FIELDENUM_ID,
                CITY_CODE: res?.CITY_CODE || serverPartDetail?.CITY_CODE,
                COUNTY_CODE: res?.COUNTY_CODE || serverPartDetail?.COUNTY_CODE,
                SERVERPART_IPADDRESS: res?.SERVERPART_IPADDRESS || serverPartDetail?.SERVERPART_IPADDRESS,
                DAYINCAR: res?.DAYINCAR || serverPartDetail?.DAYINCAR,
                HKBL: res?.HKBL || serverPartDetail?.HKBL,
                TOTALPARKING: res?.TOTALPARKING || serverPartDetail?.TOTALPARKING,
                SHORTNAME: res?.SHORTNAME || serverPartDetail?.SHORTNAME,
                REGIONTYPE_ID: res?.REGIONTYPE_ID || serverPartDetail?.REGIONTYPE_ID,
                STATISTIC_TYPE: res?.STATISTIC_TYPE || serverPartDetail?.STATISTIC_TYPE,
                PROVINCE_NAME: res?.PROVINCE_NAME || serverPartDetail?.PROVINCE_NAME,
                REGIONTYPE_NAME: res?.REGIONTYPE_NAME || serverPartDetail?.REGIONTYPE_NAME,
                STAFF_ID: currentUser?.ID,
                STAFF_NAME: currentUser?.Name,
                OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
                SERVERPART_DESC: res?.SERVERPART_DESC || serverPartDetail?.SERVERPART_DESC,
                OWNERUNIT_ID: serverPartDetail?.OWNERUNIT_ID,
                OWNERUNIT_NAME: serverPartDetail?.OWNERUNIT_NAME,
            }
            console.log('req', req);
            // return
            // debugger
            const data = await handleSynchroSERVERPART(req)
            if (data.Result_Code === 100) {
                message.success(data.Result_Desc)
                handleGetLeftTree()
            } else {
                message.error(data.Result_Desc)
            }

        })
    }


    return (
        <PageContainer header={{
            title: '',
            breadcrumb: {}
        }}>
            <ProCard split="vertical" style={{ height: 'calc(100vh - 127px)', overflowY: 'scroll', backgroundColor: '#fff' }}>
                <ProCard
                    className="pageTable-leftnav"
                    bodyStyle={{ padding: 0, paddingTop: 20, paddingLeft: 20 }}
                    extra={<MenuFoldOutlined onClick={() => { setCollapsible(!collapsible) }} />}
                    colSpan={!collapsible ? "300px" : "60px"}
                    title={!collapsible ? "请选择业主单位" : ""}
                    headerBordered
                    collapsed={collapsible}
                >
                    {leftTreeData && leftTreeData.length > 0 && <Menu
                        mode="inline"
                        style={{ height: 'calc(100vh - 230px)', overflowY: 'auto', overflowX: 'hidden' }}
                        selectedKeys={selectedId}
                        onSelect={(item) => {
                            loadSelectedId(item)
                        }}
                    >
                        {getMenuDom(leftTreeData, loadSelectedId)}
                    </Menu>}
                </ProCard>
                <div style={{ width: '100%', height: '100%', }}>
                    {
                        detailLoading ? <LoadingBox /> :
                            <div style={{ width: '100%', height: '100%', }}>
                                {/* 表单框 */}
                                <div style={{ width: '100%', height: 'calc( 100% - 60px )', overflowY: 'scroll', boxSizing: 'border-box', padding: '16px' }}>
                                    <ProForm
                                        layout={"horizontal"}
                                        formRef={formRef}
                                        submitter={false}
                                        initialValues={serverPartDetail}
                                    >
                                        <Divider orientation="left">服务区基本信息</Divider>
                                        {/* 服务区基本信息 */}
                                        <>
                                            <Row gutter={16}>
                                                <Col span={8}>
                                                    <ProFormSelect
                                                        label={"经营类型"}
                                                        name={"SERVERPART_TYPE"}
                                                        fieldProps={{
                                                            options: SERVERPART_TYPETree,
                                                            showSearch: true
                                                        }}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormTreeSelect
                                                        label={"所属省份"}
                                                        name={"PROVINCE_CODE"}
                                                        request={async () => {
                                                            const req: any = {
                                                                FieldExplainField: 'DIVISION_CODE',
                                                                FieldEnumStatus: true,
                                                                DataType: 1
                                                            }
                                                            const data = await handleGetFieldEnumTree(req)
                                                            console.log('alldsada', data);
                                                            const list: any = handleGetOther(data)
                                                            console.log('list', list);
                                                            return list
                                                        }}
                                                        fieldProps={{
                                                            treeDefaultExpandAll: true,
                                                            onChange: (e) => {
                                                                console.log('e', e);
                                                                if (e) {
                                                                    handleGetSPRList(e)
                                                                } else {
                                                                    setSPREGIONTYPE_IDLIST([])
                                                                }
                                                            }
                                                        }}
                                                        rules={[
                                                            {
                                                                required: true,
                                                                message: '请选择所属省份'
                                                            }
                                                        ]}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormSelect
                                                        label={"区域名称"}
                                                        name={"SPREGIONTYPE_ID"}
                                                        fieldProps={{
                                                            options: SPREGIONTYPE_IDLIST,
                                                            fieldNames: {
                                                                label: 'TYPE_NAME',
                                                                value: 'SERVERPARTTYPE_ID'
                                                            }
                                                        }}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormSelect
                                                        label={"站点类型"}
                                                        name={"STATISTICS_TYPE"}
                                                        // fieldProps={{
                                                        //     options: SERVERPARTSITE_TYPETree,
                                                        // }}
                                                        request={async () => {
                                                            const SERVERPARTSITE_TYPE = await getFieldEnum({ FieldExplainField: 'SERVERPARTSITE_TYPE' })
                                                            console.log('SERVERPARTSITE_TYPE', SERVERPARTSITE_TYPE);

                                                            return SERVERPARTSITE_TYPE
                                                        }}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormText
                                                        label={"名　　称"}
                                                        name={"SERVERPART_NAME"}
                                                        rules={[
                                                            {
                                                                required: true,
                                                                message: '请输入名称'
                                                            }
                                                        ]}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormText
                                                        label={"简　　称"}
                                                        name={"SHORTNAME"}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormSelect
                                                        label={"统计类型"}
                                                        name={"STATISTIC_TYPE"}
                                                        rules={[
                                                            {
                                                                required: true,
                                                                message: '请选择统计类型'
                                                            }
                                                        ]}
                                                        fieldProps={{
                                                            options: [{ label: '正式', value: 1000 }, { label: '测试', value: 2000 }, { label: '替代', value: 3000 }, { label: '统一定价', value: 4000 }]
                                                        }}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormText
                                                        label={"编　　码"}
                                                        name={"SERVERPART_CODE"}
                                                        disabled={serverPartDetail?.SERVERPART_ID}
                                                        rules={[
                                                            {
                                                                required: true,
                                                                message: '请输入编码'
                                                            }
                                                        ]}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormSelect
                                                        label={"管辖区域"}
                                                        name={"REGIONTYPE_ID"}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormText
                                                        label={"顺　　序"}
                                                        name={"SERVERPART_INDEX"}
                                                        rules={[
                                                            {
                                                                required: true,
                                                                message: '请输入顺序'
                                                            }
                                                        ]}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormText
                                                        label={"所属公司"}
                                                        name={"OWNEDCOMPANY"}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormText
                                                        label={"管理公司"}
                                                        name={"MANAGERCOMPANY"}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormSelect
                                                        label={"网络地址"}
                                                        name={"SERVERPART_IPADDRESS"}
                                                        fieldProps={{
                                                            options: [{ label: '本地服务器', value: 1 }, { label: '云服务器', value: 2 }]
                                                        }}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormText
                                                        label={"所在高速1"}
                                                        name={"EXPRESSWAY_NAME"}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormText
                                                        label={"联系方式"}
                                                        name={"SERVERPART_TEL"}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormDatePicker
                                                        width="md"
                                                        label={"开业时间"}
                                                        name={"STARTDATE"}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormText
                                                        label={"地　　址"}
                                                        name={"SERVERPART_ADDRESS"}
                                                        rules={[
                                                            {
                                                                required: true,
                                                                message: '请输入地址'
                                                            }
                                                        ]}
                                                    />
                                                </Col>

                                                <Col span={8}>
                                                    <ProFormSelect
                                                        label={"成本管控"}
                                                        name={"COUNTY_CODE"}
                                                        fieldProps={{
                                                            options: [{ label: '本地自采', value: 1 }, { label: '万佳统配', value: 0 }]
                                                        }}
                                                    />
                                                </Col>
                                                <Col span={24}>
                                                    <ProFormTextArea
                                                        label={"说　　明"}
                                                        name={"SERVERPART_INFO"}
                                                    />
                                                </Col>
                                            </Row>
                                        </>
                                        <>
                                            <Divider orientation="left">面积相关</Divider>
                                            <Row>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="FLOORAREA"
                                                        label="占地面积"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="SHAREAREA"
                                                        label="停车场面积"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="SERVERPART_AREA"
                                                        label="建筑面积"
                                                    />
                                                </Col>
                                            </Row>

                                            <Row style={{ marginBottom: '8px' }}>
                                                <Col span={1}>
                                                </Col>
                                                <Col span={21}>
                                                    <Radio.Group onChange={(e: any) => {
                                                        setServerPartType(Number(e.target.value))
                                                    }} value={serverPartType}>
                                                        <Radio value={1}>服务区单侧</Radio>
                                                        <Radio value={2}>服务区双侧</Radio>
                                                    </Radio.Group>
                                                </Col>
                                            </Row>
                                            <Row>
                                                <Col span={1}>
                                                </Col>
                                                <Col span={5}>
                                                    <ProFormSelect
                                                        label={"当前分区"}
                                                        name={"currentArea"}
                                                        disabled={partitionDisable}
                                                        fieldProps={{
                                                            options: partitionSelectList && partitionSelectList.length > 0 ? partitionSelectList : shopregionList
                                                        }}
                                                    />
                                                </Col>
                                                <Col span={17}>
                                                </Col>
                                            </Row>


                                            {/* 下面开始是一个方位区一块的内容 */}

                                            <Divider orientation="left">面积相关</Divider>
                                            <Row>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="FLOORAREA_A"
                                                        label="占地面积"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="PARKINGAREA_A"
                                                        label="停车场面积"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="BUILDINGAREA_A"
                                                        label="停车场面积"
                                                    />
                                                </Col>
                                            </Row>
                                            <Divider orientation="left">加油信息</Divider>
                                            <Row>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="REFUELINGGUN92_A"
                                                        label="92#加油枪"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="REFUELINGGUN95_A"
                                                        label="95#加油枪"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="REFUELINGGUN0_A"
                                                        label="0#加油枪"
                                                    />
                                                </Col>

                                            </Row>
                                            <Divider orientation="left">充电信息</Divider>
                                            <Row>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="STATEGRIDCHARGE_A"
                                                        label="国网数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="LIAUTOCHARGE_A"
                                                        label="理想5C数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="GACENERGYCHARGE_A"
                                                        label="广汽能源数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="OTHERCHARGE_A"
                                                        label="其他品牌"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="LIVESTOCKPACKING_A"
                                                        label="充电桩总数"
                                                    />
                                                </Col>

                                            </Row>
                                            <Divider orientation="left">服务信息</Divider>
                                            <Row>
                                                <Col span={8}>
                                                    <ProFormSelect
                                                        name="HASMOTHER_A"
                                                        label="母婴室"
                                                        fieldProps={{
                                                            options: [{ label: '有', value: 1 }, { label: '无', value: 0 }]
                                                        }}
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormSelect
                                                        width="lg"
                                                        fieldProps={{
                                                            options: [{ label: '有', value: 1 }, { label: '无', value: 0 }]
                                                        }}
                                                        name="HASTHIRDTOILETS_A"
                                                        label="第三卫生间"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="HASWATERROOM_A"
                                                        label="开水器数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="HASPANTRY_A"
                                                        label="男厕数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="HASWIFI_A"
                                                        label="女厕数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="TOILETCOUNT_A"
                                                        label="潮汐厕位数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormSelect
                                                        width="lg"
                                                        fieldProps={{
                                                            options: [{ label: '有', value: 1 }, { label: '无', value: 0 }]
                                                        }}
                                                        name="HASCHILD_A"
                                                        label="车辆维修"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormSelect
                                                        width="lg"
                                                        fieldProps={{
                                                            options: [{ label: '有', value: 1 }, { label: '无', value: 0 }]
                                                        }}
                                                        name="VEHICLEWATERFILLING_A"
                                                        label="车辆加水"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormSelect
                                                        width="lg"
                                                        fieldProps={{
                                                            options: [{ label: '有', value: 1 }, { label: '无', value: 0 }]
                                                        }}
                                                        name="HASPILOTLOUNGE_A"
                                                        label="司机之家"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="HASSHOWERROOM_A"
                                                        label="淋浴房数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="MICROWAVEOVEN_A"
                                                        label="微波炉数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="WASHERCOUNT_A"
                                                        label="洗衣机数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="SLEEPINGPODS_A"
                                                        label="睡眠舱数量"
                                                    />
                                                </Col>
                                            </Row>
                                            <Divider orientation="left">车位信息</Divider>
                                            <Row>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="SMALLPARKING_A"
                                                        label="轿车车位"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="PACKING_A"
                                                        label="客车车位"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="TRUCKPACKING_A"
                                                        label="货车车位"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="DANPACKING_A"
                                                        label="危化品车位"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="LONGPACKING_A"
                                                        label="超长车位"
                                                    />
                                                </Col>
                                            </Row>
                                            <Divider orientation="left">经营信息</Divider>
                                            <Row>
                                                <Col span={8}>
                                                    <ProFormSelect
                                                        name="BUSINESSTYPE_A"
                                                        label="餐饮模式"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="DININGROOMCOUNT_A"
                                                        label="餐饮店数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="HASBACKGROUNDRADIO_A"
                                                        label="便利店数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="DININGBXCOUNT_A"
                                                        label="商铺数量"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormSelect
                                                        width="lg"
                                                        fieldProps={{
                                                            options: [{ label: '有', value: 1 }, { label: '无', value: 0 }]
                                                        }}
                                                        name="HASMESSAGESEARCH_A"
                                                        label="具备住宿"
                                                    />
                                                </Col>
                                                <Col span={8}>
                                                    <ProFormText
                                                        name="POINTCONTROLCOUNT_A"
                                                        label="客房数量"
                                                    />
                                                </Col>
                                            </Row>
                                            {
                                                serverPartType === 2 ?
                                                    <>
                                                        <Divider orientation="left">对向信息</Divider>
                                                        <Row>
                                                            <Col span={1}></Col>
                                                            <Col span={5}>
                                                                <ProFormSelect
                                                                    label={"对向分区"}
                                                                    name={"otherArea"}
                                                                    disabled={partitionDisable}
                                                                    fieldProps={{
                                                                        options: partitionSelectList && partitionSelectList.length > 0 ? partitionSelectList : shopregionList
                                                                    }}
                                                                />
                                                            </Col>
                                                        </Row>
                                                        <Divider orientation="left">面积相关</Divider>
                                                        <Row>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="FLOORAREA_B"
                                                                    label="占地面积"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="PARKINGAREA_B"
                                                                    label="停车场面积"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="BUILDINGAREA_B"
                                                                    label="停车场面积"
                                                                />
                                                            </Col>
                                                        </Row>
                                                        <Divider orientation="left">加油信息</Divider>
                                                        <Row>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="REFUELINGGUN92_B"
                                                                    label="92#加油枪"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="REFUELINGGUN95_B"
                                                                    label="95#加油枪"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="REFUELINGGUN0_B"
                                                                    label="0#加油枪"
                                                                />
                                                            </Col>

                                                        </Row>
                                                        <Divider orientation="left">充电信息</Divider>
                                                        <Row>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="STATEGRIDCHARGE_B"
                                                                    label="国网数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="LIAUTOCHARGE_B"
                                                                    label="理想5C数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="GACENERGYCHARGE_B"
                                                                    label="广汽能源数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="OTHERCHARGE_B"
                                                                    label="其他品牌"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="LIVESTOCKPACKING_B"
                                                                    label="充电桩总数"
                                                                />
                                                            </Col>

                                                        </Row>
                                                        <Divider orientation="left">服务信息</Divider>
                                                        <Row>
                                                            <Col span={8}>
                                                                <ProFormSelect
                                                                    name="HASMOTHER_B"
                                                                    label="母婴室"
                                                                    fieldProps={{
                                                                        options: [{ label: '有', value: 1 }, { label: '无', value: 0 }]
                                                                    }}
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormSelect
                                                                    width="lg"
                                                                    fieldProps={{
                                                                        options: [{ label: '有', value: 1 }, { label: '无', value: 0 }]
                                                                    }}
                                                                    name="HASTHIRDTOILETS_B"
                                                                    label="第三卫生间"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="HASWATERROOM_B"
                                                                    label="开水器数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="HASPANTRY_B"
                                                                    label="男厕数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="HASWIFI_B"
                                                                    label="女厕数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="TOILETCOUNT_B"
                                                                    label="潮汐厕位数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormSelect
                                                                    width="lg"
                                                                    fieldProps={{
                                                                        options: [{ label: '有', value: 1 }, { label: '无', value: 0 }]
                                                                    }}
                                                                    name="HASCHILD_B"
                                                                    label="车辆维修"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormSelect
                                                                    width="lg"
                                                                    fieldProps={{
                                                                        options: [{ label: '有', value: 1 }, { label: '无', value: 0 }]
                                                                    }}
                                                                    name="VEHICLEWATERFILLING_B"
                                                                    label="车辆加水"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormSelect
                                                                    width="lg"
                                                                    fieldProps={{
                                                                        options: [{ label: '有', value: 1 }, { label: '无', value: 0 }]
                                                                    }}
                                                                    name="HASPILOTLOUNGE_B"
                                                                    label="司机之家"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="HASSHOWERROOM_B"
                                                                    label="淋浴房数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="MICROWAVEOVEN_B"
                                                                    label="微波炉数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="WASHERCOUNT_B"
                                                                    label="洗衣机数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="SLEEPINGPODS_B"
                                                                    label="睡眠舱数量"
                                                                />
                                                            </Col>
                                                        </Row>
                                                        <Divider orientation="left">车位信息</Divider>
                                                        <Row>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="SMALLPARKING_B"
                                                                    label="轿车车位"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="PACKING_B"
                                                                    label="客车车位"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="TRUCKPACKING_B"
                                                                    label="货车车位"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="DANPACKING_B"
                                                                    label="危化品车位"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="LONGPACKING_B"
                                                                    label="超长车位"
                                                                />
                                                            </Col>
                                                        </Row>
                                                        <Divider orientation="left">经营信息</Divider>
                                                        <Row>
                                                            <Col span={8}>
                                                                <ProFormSelect
                                                                    name="BUSINESSTYPE_B"
                                                                    label="餐饮模式"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="DININGROOMCOUNT_B"
                                                                    label="餐饮店数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="HASBACKGROUNDRADIO_B"
                                                                    label="便利店数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="DININGBXCOUNT_B"
                                                                    label="商铺数量"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormSelect
                                                                    width="lg"
                                                                    fieldProps={{
                                                                        options: [{ label: '有', value: 1 }, { label: '无', value: 0 }]
                                                                    }}
                                                                    name="HASMESSAGESEARCH_B"
                                                                    label="具备住宿"
                                                                />
                                                            </Col>
                                                            <Col span={8}>
                                                                <ProFormText
                                                                    name="POINTCONTROLCOUNT_B"
                                                                    label="客房数量"
                                                                />
                                                            </Col>
                                                        </Row>

                                                    </> : ''
                                            }
                                        </>
                                    </ProForm>

                                </div>
                                {/* 按钮 */}
                                <div style={{ width: '100%', height: '60px', boxSizing: 'border-box', padding: '16px', display: 'flex', justifyContent: 'space-between' }}>
                                    <>
                                        {
                                            <Button type={"primary"} onClick={() => {
                                                setShowSave(true)
                                                setDetailLoading(true)
                                                setSPREGIONTYPE_IDLIST([])
                                                setPartitionSelectList([])
                                                setServerPartDetail(undefined)
                                                setPartitionDisable(false)
                                                setServerPartType(2)
                                                setTimeout(() => {
                                                    setDetailLoading(false)
                                                }, 100)
                                            }}>新增服务区</Button>
                                        }
                                    </>
                                    <>
                                        {
                                            showSave ?
                                                <Button type={"primary"} onClick={() => {
                                                    handleGetSave()
                                                }}>
                                                    保存
                                                </Button> : ''
                                        }
                                    </>
                                </div>
                            </div>
                    }
                </div>
            </ProCard>
        </PageContainer >
    );
};
export default connect(({ user }: ConnectState) => ({
    currentUser: user.currentUser
}))(ServerpartTable);
