import React, { useState, useEffect,useRef} from 'react';
import styles from './index.less';
import { Input, Button, Table, Space, Pagination, Form, Select, Layout } from 'antd';
const { Option } = Select;

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

import SelectOptions from '../../../components/SelectOptions/index';
import TreeAction from '../../../components/TreeAction/TreeAction';

import TitleBack from '../../../components/TitleBack/TitleBack';
import SelectCommunity from '@/components/SelectCommunity';
import Line from '@/components/Line/Line';
import authorize from '@/components/Authorized/Secured';
import { RA, translate } from '@/utils/method';

import { EyeTwoTone, EyeInvisibleOutlined, StarTwoTone } from '@ant-design/icons';
import { validateMessages } from '@/utils/params';

const authorizeLevel = ["Administrator","Secondary Administrator", "Three Level Administrator"]
const user_state=[[0, "enabled"],[1,"Disabled"]]
const module="Account"
const AccountManagement = (props:any) => {

  const { dispatch } = props;
  const formRef = useRef(null)
  const onFinish = (values:any) =>{
    console.log(values)
    var tmp = {
      "id": "null",
      "oneself": 0,
      "userStatus": 1, 
      "tosUserName": null,
      "tosUserPwd": null,
      "tosUserPhone": null,
      "tosUserEmail": null,
      "tosuserLevel": null,
      "tosUserToCompany": "1",
      "tosUserServiceCell":"",  
    }
    var tmp2 = {}
    
    translate(tmp,values, [
      ["tosUserName", "Account"],
      ["tosUserPwd", "Password"],
      ["tosUserPhone", "phone"],
      ["tosUserEmail", "email"],
      ["tosuserLevel", "tosuserLevel"],
    ]) 
    translate(tmp2,values, [
      ["userName", "Account"],
      ["userPassword", "Password"],
      ["permissionArray", "premission"],
    ])
    RA(41, tmp, module, dispatch)
    RA(42,tmp2,module,dispatch)
  }
  return (
    <div className={styles.base}>

            {/* 头部组件v1.2 */}
      <TitleBack title="Admin Account Adding" />


      <Form ref={formRef} name="basic" onFinish={onFinish} validateMessages={validateMessages}>

        <Form.Item name="Account" label="Account" rules={[{required:true}]} ><Input placeholder="account Name" style={{width:200}}/></Form.Item>
        <Form.Item name="Password" label="Password" rules={[{required:true}]} ><Input.Password type="" placeholder="password" iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} style={{width:200}}/></Form.Item>
        
          <Form.Item label="Contact Details" >
            <Input.Group compact>
              <Form.Item name="phone" style={{marginRight:16}}  rules={[{required:true}]}><Input placeholder="Phone number"></Input></Form.Item>
              <Form.Item name="email"  rules={[{required:true}]}><Input placeholder="Email" ></Input></Form.Item>
            </Input.Group>
        </Form.Item>

        <Form.Item name="community" label="Community" ><SelectCommunity ></SelectCommunity></Form.Item>
        
        <Form.Item label="Level" name="tosuserLevel" wrapperCol={{ offset: 2}}>
          <Select placeholder="Level" style={{ width: 240 }}>
            {
              authorizeLevel.map((item, index) => {
                return <Option key={"" + index} value={"" + index+1}>{item}</Option>
              })
            }
         </Select>
         </Form.Item>

        <Form.Item name="premission" label="Permission" wrapperCol={{ offset: 1}}>
          <TreeAction/>     
        </Form.Item>
        <Line></Line>
        <Form.Item wrapperCol={{ ...Layout.wrapperCol, offset: 3 }}><Button type="primary" htmlType="submit">Submit</Button></Form.Item>
          </Form>

    </div>
  );
};

function mapStateToProps(state:any) {
  const { Data } = state.Account;  
  return {
    Data
  };
}
export default connect(mapStateToProps)(AccountManagement);
