import React, { useState, useEffect, useRef } from 'react';
import styles from './Services.less';
import { Form, message } 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 Add = (values: string) => {
    console.log(values);
    if (!values.trim()) {
      message.error('Not Null!!!');
      return;
    }
    RA(
      44,
      {
        serviceName: values,
      },
      module,
      dispatch,
    );
  };

  // 删除服务范围
  const Remove = (values: string) => {
    console.log(values);
    RA(
      53,
      {
        serviceName: values,
      },
      module,
      dispatch,
    );
  };

  return (
    <div className={styles.base}>
      <TitleBack title={'Services Available Management'}></TitleBack>

      {DataServices !== null ? (
        <Form ref={formRef} name="basic">
          <Form.Item label="Available Services" name="serviceName">
            <TagSelect onAdd={Add} onRemove={Remove} />
          </Form.Item>
          <Line />
        </Form>
      ) : null}
    </div>
  );
};

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