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

import { connect } from 'umi';

import Line from '../../../components/Line/Line';
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 as any);

  useEffect(() => {
    RA(43, {}, module, dispatch);
  }, []);

  useEffect(() => {
    if (DataServices != null) {
      console.log(DataServices);
      let tmp = DataServices.data.rows.map((v: object, i: number) => {
        return v['serviceName'];
      });
      console.log(tmp);
      tmp = tmp.filter((v: string) => {
        return v !== 'Accountant';
      });
      formRef.current['setFieldsValue']({ serviceName: 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="serviceName">
            <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);
