import React, { useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import getCustomHeader from '@/components/token-header';
import PageHead from '@/components/page-head';
import { ajax } from '@/utils';
import {
    Table,
    Dialog,
    Form,
    Input,
    Radio,
    Message,
    DatePicker,
  } from '@alifd/next';
import styles from './index.module.scss';

const { Column } = Table;

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const SEARCHLABEL = {nick:'用户昵称',phone:'联系电话',email:'电子邮件',name:'用户姓名',idCardNumber:'身份证号',level:'用户等级',point:'用户成长值',gender:'性别'};
const GENDERVALUE = ['男','女'];
const STATUSVALUE = ['','正常','冻结'];
const STATUSMODIFY = ['','冻结','恢复'];
const ListMembers = () => {
  const [contentData, setContent] = useState([]);
  const [editData, setEditData] = useState({id: '',name: '', birthday:'', gender: ''});
  const refreshComment = async() => {
    const commentData = await ajax({
      api: 'getReply',
      method: 'get',
      data: { onlyOnline: false, exceptFunction: false }
    });
    if (commentData.success) {
      setContent(commentData.result);
    }
  }
  const tableRender = (value: any, index: number, record: Object) => {
    const status = STATUSMODIFY[record.status];
    return (
      <div className={styles.editSpan}>
        <span onClick={() => {
          setEditData({id: record.id ,name: record.name, birthday: record.birthday, gender: record.gender});
        }}>
          编辑
        </span>
        <span onClick={async() => {
          const membersData = await ajax({
            api: 'memberModifyState',
            method: 'post',
            data: JSON.stringify({userId: record.id, authAccountStatus: record.status === 1 ? 2 : 1}),
            type: 'json',
            contentType: 'application/json',
            headers: getCustomHeader()
          });
          if (membersData.success) {
            setContent([]);
          }
        }}>
          {status}
        </span>
      </div>
    );
  };
  const statusRender = (value: any, index: number, record: Object) => {
    const status = STATUSVALUE[record.status];
    return (
    <span>
      {status}
    </span>
    )
  }
  const genderRender = (value: any, index: number, record: Object) => {
    let gender = GENDERVALUE[record.gender] || '保密';
    return (
      <span>{gender}</span>
    )
  }

  const EditDialog = () => {
    console.log(editData);
    return (
      <Dialog
        title="编辑用户信息"
        visible={!!editData.name}
        footer={false}
        onClose={() => {setEditData({id:'', name: '', birthday: '', gender: ''});}}
      >
        <Form>
          {
            Object.keys(editData).map(item => {
              if (item==='id')return;
              let content;
              switch(item) {
                case 'gender':
                  content = (<RadioGroup name="gender" defaultValue={editData[item]}>
                              <Radio value={0}>男</Radio>
                              <Radio value={1}>女</Radio>
                            </RadioGroup>)
                  break;
                case 'birthday':
                  content = (<DatePicker format="YYYY-MM-DD" defaultValue={editData[item]} name="birthday" />);
                  break;
                default:
                  content = (<Input defaultValue={editData[item]} style={{width:'200px'}} name={item} />);
                  break;
              }
              return (
                <FormItem label={`${item}:`} key={item}>
                  {content}
                </FormItem>
              )
            })
          }
          <Form.Submit type="primary" validate onClick={async(successData, errorData) => {
            if (!errorData) {
              const result = await ajax({
                api: 'memberModify',
                method: 'post',
                type: 'json',
                data: JSON.stringify({
                  userId: editData.id,
                  ...successData,
                  modifyName: true,
                  modifyBirthday: true,
                  modifyGender: true,
                }),
                contentType: 'application/json',
                headers: getCustomHeader()
              });
              if (result.success) {
                setEditData({id:'', name: '', birthday: '', gender: ''});
                setContent([]);
              }
            } else {
              console.log(errorData);
            }
          }}>
            保存
          </Form.Submit>
        </Form>
      </Dialog>
    )
  }
  const MoreFilter = ({}) => {
    return (
      <div style={{marginTop:'45px'}}>
        <Form inline >
          {
            Object.keys(SEARCHLABEL).map(item => {
              let content;
              switch(item) {
                case 'gender':
                  content = (<RadioGroup name="gender" >
                              <Radio value="0">男</Radio>
                              <Radio value="1">女</Radio>
                            </RadioGroup>)
                  break;
                default:
                  content = (<Input style={{width:'200px'}} id={item} name={item} />);
                  break;
              }
              return (
                <FormItem label={`${SEARCHLABEL[item]}:`} key={item}>
                  {content}
                </FormItem>
              )
            })
          }
          <Form.Submit type="primary" validate onClick={async(successData, errorData) => {
            if (!successData.nick && !successData.phone && !successData.email && !successData.name) {
              Message.error('昵称、电话、邮箱、姓名不可全为空!');
              return;
            }
            if (!errorData) {
              const membersData = await ajax({
                api: 'memberList',
                method: 'post',
                data: JSON.stringify({ ...successData, page: 1, size: 300}),
                type: 'json',
                contentType: 'application/json',
                headers: getCustomHeader()
              });
              if (membersData.success) {
                setContent(membersData.result.content);
              }
            } else {
              console.log(errorData);
            }
          }}>
            查询
          </Form.Submit>
        </Form>
      </div>
    )
  }
  return (
    <div className={styles.listEmployeeBox}>
    <PageHead title="会员管理" />
      <div className={styles.contentBox}>
        <div className={styles.contentHead}>
        <MoreFilter />
        </div>
        <Table hasBorder={false} dataSource={contentData}>
          <Column title="昵称" dataIndex="nick" width={"10%"} />
          <Column title="用户姓名" dataIndex="name" width={"10%"} />
          <Column title="性别" cell={genderRender} width={"10%"} />
          <Column title="联系电话" dataIndex="phone" width={"15%"} />
          <Column title="电子邮箱" dataIndex="email" width={"15%"} />
          <Column title="用户等级" dataIndex="level" width={"10%"} />
          <Column title="成长值" dataIndex="point" width={"10%"} />
          <Column title="账号状态" cell={statusRender} width={"10%"} />
          <Column title="操作" cell={tableRender} width={"10%"} />
        </Table>
        <EditDialog />
      </div>
    </div>
  );
};

export default ListMembers;