import React, { useState, useEffect, useRef } from 'react';
import styles from './Edit.less';
import { Input, Button, Form, Result, Pagination, Tooltip, Checkbox } from 'antd';

import { Link, useIntl, connect } from 'umi';

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

const module = "User"
const Edit = (props: any) => {

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

  const [CList, setCList] = useState(CommunityList);
  const [SList, setSList] = useState(["1"])
  const printContent = (List: any) => { setCList(List) }
  const formRef = useRef(null);


  useEffect(() => {
    console.log(SaveChooseData)
    RA(43, { serviceName: "" }, module, dispatch)

  }, []);
  useEffect(() => {
    if (DataServices != null) {

      console.log(DataServices)
      var tmp = DataServices.data.serviceScopeList

      console.log(tmp)

      if (SaveChooseData != null) {
        formRef.current.setFieldsValue(SaveChooseData)
      }
    }
  }, [DataServices])
  const onFinish = (values: any) => {
    var val = values
    val.serviceCommunityList = CList
    // val.serviceScopeList = SList
    val.creator = "admin";
    val.updater = "admin";

    TosTosServiceProviderSave(val)
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  };

  return (
    <div className={styles.base}>

      {/* 头部组件v1.2 */}
      <TitleBack title="Edit Service Provider" />

      <Form ref={formRef} name="basic" initialValues={{}} onFinish={onFinish} onFinishFailed={onFinishFailed}>
        <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: 200 }} placeholder="Single Line Input" />
            </Form.Item>
          </div>
        </div>

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

        <SelectOptions list={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={DataServices != null ? DataServices.data.serviceScopeList : null} />
            </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!"
              }]}
            >
              <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"><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>
      </Form>

    </div>
  );
};

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



export default connect(mapStateToProps)(Edit);


