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

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


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


const Template = () => {


  const [state, setState] = useState(false)
  const [state2,setState2] = useState(false)
  const [currentvalue, setCurrentvalue] = useState('')
  
  const [service,setServices]=useState(['Cleaning','Maintenance','Security Guard'])
  const showModal = (value,e) => {
    setState(true)
    setCurrentvalue(value)
  };

  const handleOk = (e) => {
    setState(false)
    let serviceNew = service
    Array.prototype.remove = function(val) {
      var index = this.indexOf(val);      
      if (index > -1) {
        this.splice(index, 1);      
      }      
    };
    serviceNew.remove(currentvalue)
    setServices(serviceNew)
  };

  const handleCancel = (e) => {
    setState(false)
  };
  
  const addModal = (e) => {
    setState2(true)
  };

  const handleOk2 =(e) => {
    setState2(false);
    let serviceNew = service
    serviceNew.push(currentvalue)
    setServices(serviceNew)
  };

  const handleCancel2 = (e) => {
    setState2(false)
  };
  
  const changeCurentvalue = (e) => {
     setCurrentvalue(e.target.value)
  }
  
  return (
    <div className={styles.base}>

      {/* 头部组件 */}
      <div className={styles.box}>
        <div className={styles.item1}>Services Available Management</div>
        <button className={styles.item3}>返回</button>
      </div>
    
      <div className={styles.box1}>
        <div className={styles.box1item1}>Services Available</div>
        <div className={styles.box1item2}>
          {    
            service.map((item, index) => {                                
              return (<div key={"service_"+index} className={styles.item2x1} onClick={showModal.bind(this,item)} >{item}</div>)
            })
          }     
          <div className={styles.item2x3}><PlusCircleOutlined style={{cursor: "pointer",fontSize:30}}  onClick={addModal} /></div>
        </div>
      </div>
      <div style={{ clear:"both"}}></div>
      <div className={styles.line}></div>
      <Button type="primary" size="large">提交</Button>

      <div>            
        <Modal  title="删除该选项" visible={state}  onOk={handleOk}  onCancel={handleCancel} cancelText="取消" okType="danger" okText="Yes">
          <p>is delete service?</p>
        </Modal>
            
        <Modal  title="新增该选项" visible={state2}  onOk={handleOk2}  onCancel={handleCancel2} cancelText="取消" okType="primary" okText="创建">
          <Input style={{width:300}} onChange={changeCurentvalue} />
        </Modal>
      </div>

    </div>
  );
};


export default Template;





