import React, { useState, useEffect,useRef} from 'react';

import styles from './Account.less';
import {Form, Input ,Button,Table,Space,Row,Col} from 'antd';

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

import SelectOptions from '../../../components/SelectOptions/index';
import { timestampToTime } from '../../../utils/time';
import { filterObjbyTg, RA, urlEncode } from '@/utils/method';

const authorizeLevel = ["Administrator","Secondary Administrator", "Three Level Administrator"]
const user_state = [[0, "enabled"], [1, "Disabled"]]

const module="Account"
const Account = (props: any) => {
  const { formatMessage } = useIntl();
  
  const { dispatch, location, Data } = props;
  
  const formRef = useRef(null);

  const [pageNum, setPageNum] = useState(1)
  const [loading, setLoading] = useState(false)

  const columns = [
    { title: "tosUserName", dataIndex: 'tosUserName', },
    { title: "tosuserLevel", dataIndex: 'tosuserLevel', render: (text: any) => (<Space size="middle">{authorizeLevel[parseInt(text)]}{text}</Space>) },
    { title: "userStatus", dataIndex: 'userStatus', },
    {title: "createTime",
      render: (text: any, record: any) => (
        <Space size="middle">{timestampToTime(record.createTime.time)}</Space>       
      ),
    },
    { title: "Actions",
      render: (text: any, record: any) => (
        <Space size="middle"><a onClick={goToDetail.bind(this,record)}>Detail</a><a onClick={goToEdit.bind(this,record)}>edit</a></Space>       
      ),
    },
  ];


  useEffect(() => {
    //分页设置
    if (location.query.current!=null) {
      setPageNum(parseInt(location.query.current))
    } else {
      setPageNum(1)
    }
    setLoading(true)
    RA(45,{
      "id": "",
      "moment": [],
      "name": "",
      "leaderID": "1",
      "userPhone": ""
  },module,dispatch)
  }, [location]); 

  useEffect(() => {
    if (Data != null) {
      setLoading(false)
    }    
  }, [Data])

 
  const onFinish = (values: any) => {
    console.log(values);
    
  };
  const onFinishFailed = (errorInfo: any) => { console.log('Failed:', errorInfo) };
  
  const goToDetail = (values:any,e:any) => {
    history.push(location.pathname +'/Detail?providerName='+values.providerName)
  }
  const goToCreate = () => {    
    history.push(location.pathname + '/AccountManagementEdit')
  }
  const goToEdit = (values:any,e:any) => {    
    history.push(location.pathname + '/Edit?providerName='+values.providerName)
  }

  const pageChange = (values: any) => {    
    /*页面跳转*/
    var tmp = filterObjbyTg(location.query, [])
    tmp["current"]=values.current
    history.push(location.pathname + urlEncode(tmp))
  }
  
  return (
    <div className={styles.base}>       
      {/* 头部组件 */}
      <Form  ref={formRef} name="basic" initialValues={{}} onFinish={onFinish} onFinishFailed={onFinishFailed}>    
        <Row gutter={8}>
          <Col ><Form.Item name="username" ><Input placeholder="UserName" /></Form.Item></Col>
          <Col ><Form.Item name="creator"><Input placeholder="Creator" /></Form.Item></Col>
          <Col ><Form.Item > <Button type="primary" htmlType="submit">Search</Button></Form.Item></Col>
      </Row>          
      </Form>

        {/* 内容组件 */}
      <div className={styles.box2}>
        <Button className={styles.buttonAdd} onClick={goToCreate}>create new</Button>
      </div>   
       
      {/* 列表组件 */}
      <Table size="small"
        rowKey={"id"}
        style={{ marginTop: 16 }}
        loading={loading}
        columns={columns}
        dataSource={Data != null ? Data.data.rows : null}
        pagination={Data != null ? { current: pageNum, total: Data.data.rows.length } : {}}
        onChange={pageChange}
      />
      

    </div>
  );
};

function mapStateToProps(state:any) {
  const { Data } = state.Account;  
  return {
    Data,    
  };
}

export default connect(mapStateToProps)(Account);
