import React, { useState, useEffect, useRef } from 'react';
import styles from './Edit.less';
import { Input, Button, Form, Spin, Radio, message, Checkbox } from 'antd';

import { connect, history } from 'umi';

import SelectOptions from '../../../components/SelectOptions/index';
import TitleBack from '../../../components/TitleBack/TitleBack';
import { RA } from '@/utils/method';

const module = 'User';
let options: Array<{ label: string; value: number }> = [];
let optionsList: {
  serviceName: string;
  serviceCode: string;
}[] = [];

const Edit = (props: any) => {
  const { dispatch, CurData, SaveChooseData, CommunityList, DataServices } = props;
  const TosTosServiceProviderSave = (values: any) => {
    dispatch({ type: 'ServiceProvider/TosTosServiceProviderSave', playload: values });
  };

  const [CList, setCList] = useState(CommunityList);

  const [load, setload] = useState(false);

  const printContent = (List: any) => {
    setCList(List);
  };
  const formRef = useRef(null as any);

  // 拿取服务范围数据
  useEffect(() => {
    RA(43, {}, module, dispatch);
  }, []);

  // 处理服务范围数据
  useEffect(() => {
    if (DataServices != null) {
      console.log(DataServices);
      options = DataServices.data.rows.map((v: any) => {
        return {
          label: v.serviceName,
          value: v.serviceCode,
        };
      });

      optionsList = [...DataServices.data.rows];
    }


    return () => {

    }
  }, [DataServices]);

  // 判断是否有小区列表数据返回
  useEffect(() => {
    if (!CommunityList) {
      history.goBack();
    }
  }, []);

  useEffect(() => {
    console.log(CurData);
    if (CurData != null) {
      setload(false);
      dispatch({ type: 'ServiceProvider/CurDataClear', playload: {} });
    }
  }, [CurData]);

  useEffect(() => {
    if (SaveChooseData != null) {
      // 处理服务范围数据
      optionsList.forEach((v) => {
        if (v.serviceName === SaveChooseData.serviceScope) {
          SaveChooseData.serviceScopeList = v.serviceCode;
          formRef.current.setFieldsValue(SaveChooseData);
        }
      });

      console.log(SaveChooseData);
    }
  }, [SaveChooseData]);

  // 提交按钮
  const onFinish = (values: any) => {
    if (CList.length === 0) {
      message.warning('Please select at least one service Community!', 3);
      return;
    }
    var val = values;
    val.serviceCommunityList = CList;
    val.creator = 'admin';
    val.updater = 'admin';
    // val.serviceScopeList = val.serviceScopeList;
    if (SaveChooseData) {
      val.id = SaveChooseData.id;
    }
    console.log(val);
    setload(true);
    TosTosServiceProviderSave(val);
  };

  return (
    <div className={styles.base}>
      {/* 头部组件v1.2 */}
      <TitleBack
        title={SaveChooseData !== null ? 'Edit Service Provider' : 'Create New Service Provider'}
      />

      <Form ref={formRef} name="basic" onFinish={onFinish}>
        <Spin spinning={load}>
          <div className={styles.box1}>
            <div className={styles.box1item1}>Company Name</div>
            <div className={styles.box1item2}>
              <Form.Item
                name="providerName"
                rules={[
                  {
                    required: true,
                    message: 'Please enter the company name!',
                  },
                ]}
              >
                <Input style={{ width: 260 }} placeholder="Please enter company name" />
              </Form.Item>
            </div>
            <div className={styles.box1item3}>Office Address</div>
            <div className={styles.box1item4}>
              <Form.Item
                name="providerAddress"
                rules={[
                  {
                    required: true,
                    message: 'Please enter your office address!',
                  },
                ]}
              >
                <Input style={{ width: 260 }} placeholder="Single Line Input" />
              </Form.Item>
            </div>
          </div>

          <div className={styles.line}></div>

          <SelectOptions
            list={CommunityList ? CommunityList.sort() : []}
            checklist={SaveChooseData != null ? SaveChooseData.serviceCommunityList : null}
            onSubmit={printContent}
          />

          <div className={styles.box2}>
            <div className={styles.box2item1}>Services Available</div>
            <div className={styles.box2item2}>
              <Form.Item
                name="serviceScopeList"
                rules={[
                  {
                    required: true,
                    message: 'Please select at least one service available!',
                  },
                ]}
              >
                <Checkbox.Group options={options as any} />
                {/* <Radio.Group options={options as any} /> */}
              </Form.Item>
            </div>
          </div>

          <div className={styles.box3}>
            <div className={styles.box3item1}>Person In Charge</div>
            <div className={styles.box3item2}>
              <Form.Item
                name="contactName"
                rules={[
                  {
                    required: true,
                    message: 'Please enter the name of the person in charge!',
                  },
                  {
                    min: 2,
                    max: 30,
                    message: 'It must be between 2 and 30',
                  },
                ]}
              >
                <Input style={{ width: 200 }} placeholder="Please enter a name" />
              </Form.Item>
            </div>
          </div>

          <div className={styles.box4}>
            <div className={styles.box4item1}>Contact Details</div>
            <div className={styles.box4item2}>
              <Form.Item
                name="contactPhone"
                rules={[
                  {
                    pattern: /^(\d{8}|1[0-9]{10})$/,
                    message: 'ncorrect format of mobile phone number',
                    whitespace: true,
                  },
                ]}
              >
                <Input style={{ width: 200 }} placeholder="Telephone" />
              </Form.Item>
            </div>
            <div className={styles.box4item3}>
              <Form.Item
                name="contactEmail"
                rules={[
                  {
                    required: true,
                    type: 'email',
                    message: 'Please enter the correct email address!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} placeholder="E-mail" />
              </Form.Item>
            </div>
          </div>

          <div className={styles.line}></div>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Spin>
      </Form>
    </div>
  );
};

function mapStateToProps(state: any) {
  const { CurData, SaveChooseData } = state.ServiceProvider;
  const { DataServices } = state.User;
  const { CommunityList } = state.Init;
  console.log(CurData)
  return {
    CurData,
    SaveChooseData,
    CommunityList,
    DataServices,
  };
}

export default connect(mapStateToProps)(Edit);
