import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
  Button,
  Table,
  Pagination,
  Dialog,
  Form,
  Input,
  Checkbox,
  Select
} from '@alifd/next';
import BasicLayout from '@/layouts/BasicLayout';
import styles from './index.module.scss';
const { Column } = Table;
const FormItem = Form.Item;
const tableRender = (value, index, record) => {
  return (
    <>
      <span onClick={() => {}}>查看</span>
      <span onClick={() => {}}>编辑</span>
      <span onClick={() => {}}>
        {record.state === '冻结' ? '解除冻结' : '冻结'}
      </span>
      <span onClick={() => {}}>重置密码</span>
    </>
  );
};
const dataSource = [
  {
    id: 1,
    name: 'Alis1',
    email: 'hzxh@666.com',
    phone: 11111111111,
    state: '启用'
  },
  {
    id: 2,
    name: 'Alis2',
    email: 'hzxh@666.com',
    phone: 22222222222,
    state: '启用'
  },
  {
    id: 3,
    name: 'Alis3',
    email: 'hzxh@666.com',
    phone: 33333333333,
    state: '冻结'
  },
  {
    id: 4,
    name: 'Alis4',
    email: 'hzxh@666.com',
    phone: 44444444444,
    state: '启用'
  }
];
class Members extends Component {
  state = {
    dialogVisible: false,
    editorId: 0
  };
  getTitle = () => {
    return (
      <div className={styles.titleBox}>
        <span className={styles.titleSpan}>会员管理</span>
        <Button
          type="primary"
          onClick={() => {
            this.setState({ dialogVisible: true });
          }}
        >
          创建会员
        </Button>
      </div>
    );
  };

  getContent = () => {
    return (
      <div className={styles.contentBox}>
        <div className={styles.contentHead}>
          <Select />
          <Select />
        </div>
        <Table hasBorder={false} dataSource={dataSource}>
          <Column title="名称" dataIndex="name" />
          <Column title="电子邮件" dataIndex="email" />
          <Column title="手机号码" dataIndex="phone" />
          <Column title="状态" dataIndex="state" width={100} />
          <Column title="操作" cell={tableRender} width={300} />
        </Table>
        <Pagination
          className={styles.contentPag}
          onChange={(page) => {}}
        />
      </div>
    );
  };

  getDialog = () => {
    return (
      <Dialog
        title="创建会员"
        visible={this.state.dialogVisible}
        footer={false}
        onClose={() => this.setState({ dialogVisible: false })}
      >
        <Form labelAlign="top">
          <FormItem label="昵称:">
            <Input
              placeholder="Please enter your user name"
              id="userName"
              name="userName"
              style={{ width: '500px' }}
            />
          </FormItem>
          <FormItem label="邮箱:">
            <Input
              placeholder="Please enter your email"
              id="email"
              name="email"
            />
          </FormItem>
          <FormItem label="名称:">
            <Input placeholder="Please enter your name" id="name" name="name" />
          </FormItem>
          <FormItem label="手机号码:">
            <Input
              placeholder="Please enter your phone"
              id="phone"
              name="phone"
            />
          </FormItem>
          <FormItem label="Password:">
            <Input
              htmlType="password"
              placeholder="Please enter your password"
              id="rePass"
              name="rePass"
            />
          </FormItem>
          <FormItem>
            <Checkbox defaultChecked id="check" name="check">
              发送使用者名和密码到子账号邮箱
            </Checkbox>
          </FormItem>
          <FormItem>
            <Form.Submit
              type="primary"
              onClick={(a, b) => {
                if (!b) {
                  console.log(a);
                } else {
                  console.log(b);
                }
              }}
            >
              创建
            </Form.Submit>
          </FormItem>
        </Form>
      </Dialog>
    );
  };

  render() {
    return (
      <BasicLayout>
        <div className={styles.membersBox}>
          {this.getTitle()}
          {this.getContent()}
          {this.getDialog()}
        </div>
      </BasicLayout>
    );
  }
}
ReactDOM.render(<Members />, document.getElementById('ice-container'));