import React, { useState, useEffect, useRef } from 'react';
import styles from './Services.less';
import { Form, Button, Modal, Space, Pagination, Tooltip, Checkbox } from 'antd';

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


import { PlusCircleOutlined } from '@ant-design/icons';

import Line from '../../../components/Line/Line';
import BackButton from '../../../components/BackButton/BackButton';
import TitleGet from '../../../components/TitleGet/TitleGet';
import TagSelect from '../../../components/TagSelect/index';
import { RA } from '@/utils/method';
import TitleBack from '@/components/TitleBack/TitleBack';

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

  const { dispatch, DataServices } = props
  const formRef = useRef(null)

  useEffect(() => {
    RA(43, { serviceName: "" }, module, dispatch)
  }, [location])

  useEffect(() => {
    if (DataServices != null) {
      var tmp = DataServices.data.serviceScopeList
      console.log(tmp)
      console.log(formRef)
      formRef.current.setFieldsValue({ services: tmp })
    }
  }, [DataServices])

  const onFinish = (values: any) => {
    console.log(values)
    RA(44, {
      id: "5",
      serviceName: "律政"
    }, module, dispatch)
  }
  const Add = (values: any) => {
    console.log(values)
  }
  const Remove = (values: any) => {

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

      <TitleBack title={"Services Available Management"}></TitleBack>

      <Form ref={formRef} name="basic" onFinish={onFinish}>
        {DataServices != null ?
          <Form.Item label="Available Services" name="services"><TagSelect onAdd={Add} onRemove={Remove} /></Form.Item>
          : null
        }
        <Line />
        {/* <Form.Item ><Button type="primary" htmlType="submit">Submit</Button></Form.Item> */}
      </Form>


    </div>
  );
};

function mapStateToProps(state: any) {
  const { DataServices } = state.User
  return {
    DataServices
  }
}
export default connect(mapStateToProps)(Services)






