import { ProForm, ProFormText } from '@ant-design/pro-components';
import { Anchor, Col, Form, Row } from 'antd';
import ProdReservationConfig from './prodReservationConfig';
import ProdServiceAreasInfo from './prodServiceAreasInfo';
import ProdWeightConfig from './prodWeightConfig';

const ServiceRule: React.FC = () => {
  return (
    <ProForm
      onFinish={async (value) => console.log(value)}
      layout="horizontal"
      style={{ width: '100%' }}
      labelCol={{ span: '100px' }}
    >
      <Row gutter={24}>
        <Col span={18}>
          <div id="prodServiceAreasInfo">
            <ProdServiceAreasInfo />
          </div>
          <div id="prodReservationConfig">
            <ProForm.Group>
              <ProdReservationConfig />
            </ProForm.Group>
          </div>
          <div id="prodEmergencyInfoVO">
            <ProForm.Group></ProForm.Group>
          </div>
          <div id="productOrderLimitVO">
            <ProForm.Group title="周期接单上限"></ProForm.Group>
          </div>
          <div id="prodAdditionalFeeDatesList">
            <ProForm.Group title="特殊时段规则"></ProForm.Group>
          </div>
          <div id="prodAdditionalFeePeriodsList">
            <ProForm.Group title="特殊日期规则"></ProForm.Group>
          </div>
          <div id="prodWeightConfig">
            <ProdWeightConfig />
          </div>
        </Col>
        <Col span="400px">
          <Anchor
            items={[
              {
                key: 'prodServiceAreasInfo',
                href: '#prodServiceAreasInfo',
                title: '可服务区域',
              },
              {
                key: 'prodReservationConfig',
                href: '#prodReservationConfig',
                title: '可预约时段',
              },
              {
                key: 'prodEmergencyInfoVO',
                href: '#prodEmergencyInfoVO',
                title: '紧急响应服务',
              },
              {
                key: 'productOrderLimitVO',
                href: '#productOrderLimitVO',
                title: '周期接单上限',
              },
              {
                key: 'prodAdditionalFeeDatesList',
                href: '#prodAdditionalFeeDatesList',
                title: '特殊时段规则',
              },
              {
                key: 'prodAdditionalFeePeriodsList',
                href: '#prodAdditionalFeePeriodsList',
                title: '特殊日期规则',
              },
              {
                key: 'prodWeightConfig',
                href: '#prodWeightConfig',
                title: '体重/体型选项',
              },
            ]}
          />
        </Col>
      </Row>
    </ProForm>
  );
};

export default ServiceRule;