import React, { useState, useEffect, useRef } from 'react';
import {
  Form,
  Input,
  Button,
  Pagination,
  message,
  Descriptions,
  Checkbox,
  Tree,
  Radio,
} from 'antd';
import { connect, history } from 'umi';
import { SearchOutlined, ClearOutlined, EditOutlined, LeftOutlined } from '@ant-design/icons';
import { getCookie } from '@/utils/method';

import './Account.less';
import { zhCnFaci } from '@/utils/power';
import { AccountTip } from '@/utils/tip';

import SelectCommunity from '@/components/SelectCommunity';
import { getNumber } from '@/utils/string'; // 正则
import { RA } from '@/utils/method';

import moment from 'moment';

const Account = (props: any) => {
  const module = 'Account';

  const { dispatch, Data, DataSave, DataSaveDetail, Result, loading, CommunityList } = props;

  // 拉取数据的条件存储
  const [term, setTerm] = useState({} as any);
  // 小区列表
  // const [comList, setCommunityList] = useState(CommunityList as any);
  // // 数据
  // useEffect(() => {
  //   if (CommunityList != null) {
  //     setCommunityList(CommunityList);
  //   }
  // }, [CommunityList]);

  // 权限列表
  const treeData = zhCnFaci;

  const [expandedKeys, setExpandedKeys] = useState<string[]>(['0']); // 展开栏目
  const [checkedKeys, setCheckedKeys] = useState<string[]>(['3']); // 默认已选栏目
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]); // 设置选中的树节点
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true); // 树形菜单展开关闭

  // 单选 二级还是三级管理员
  const [values, setvalues] = useState(2); // 树形菜单展开关闭

  // 表单标识
  const [form] = Form.useForm();
  const formRef = useRef(null);

  // 保存提交
  const onFinishContract = (value: any) => {
    console.log(value);
    if (checkedKeys.length == 0) {
      // 权限
      message.error('Please Select Permission!');
      return false;
    } else if (value.community.value.length == 0) {
      // 小区
      message.error('Please Select The Jurisdiction Area!');
      return false;
    } else if (value.tosUserName.length < 6) {
      // 账号长度
      message.error('The Account Password is Greater Than 6 Digits!');
      return false;
    } else {
      value.tosUserServiceCellList = value.community.value; // 管辖小区
      value.tosUserEmail = value.tosUserName; //  邮箱就是账号
      value.tosUserLevel = values; //级别
      value.creatorName = getCookie('name'); //新建者账号
      value.creatorId = getCookie('id'); //新建者ID
      delete value.community;
      console.log(value);

      // 另传权限
      let obj = {
        userName: value.tosUserName,
        userPassword: value.tosUserPwd,
        permissionArray: checkedKeys.sort((n1, n2) => {
          return parseInt(n1) - parseInt(n2);
        }),
      };
      console.log(obj);

      RA(38, value, module, dispatch); // 信息上传
      RA(42, obj, module, dispatch); // 权限上传
    }
  };
  //goToReturn
  const goToReturn = () => {
    history.go(-1);
  };

  // 全选
  const onCheckAllChange = (e: any) => {};

  // 展开/收起树形菜单触发
  const onExpand = (expandedKeys: any) => {
    setExpandedKeys(expandedKeys);
    setAutoExpandParent(false);
  };

  // 点击单个触发
  const onCheck = (checkedKeys: any) => {
    console.log('onCheck', checkedKeys);
    setCheckedKeys(checkedKeys);
  };

  // 点击树节点触发  - 大栏目
  const onSelect = (selectedKeys: any, info: any) => {
    console.log('onSelect', info);
    setSelectedKeys(selectedKeys);
  };

  // 管理员级别样式
  const radioStyle = {
    display: 'block',
    height: '30px',
    lineHeight: '30px',
    marginBottom: '15px',
  };

  //级别切换
  const onRadio = (e: any) => {
    setvalues(e.target.value);
  };

  //手机号
  const keyup_communityManagerFee = (e: any) => {
    e.target.value = keyup_tool(e.target.value);
  };
  const keyup_tool = (value: any) => {
    return getNumber(value.replace(/[^\d^\.]+/g, ''));
  };
  // 选择小区名字并赋值

  return (
    <>
      <div className="contop" style={{ padding: '12px 20px' }}>
        <h3 className="capi">
          <EditOutlined />
          &nbsp; {DataSave ? 'Edit' : 'Add'} Account
          <div className="back">
            <Button onClick={goToReturn}>
              <LeftOutlined />
              Back
            </Button>
          </div>
        </h3>
      </div>
      <div className="contop">
        <Form
          ref={formRef}
          form={form}
          autoComplete="off"
          // layout="inline"
          layout="horizontal"
          name="contract"
          onFinish={onFinishContract}
        >
          <Descriptions column={{ xs: 1, sm: 2, md: 3 }}>
            <Descriptions.Item>
              <Form.Item name="tosUserName" label="Account ID" rules={AccountTip[2]}>
                <Input placeholder="Login Account" className="input" />
              </Form.Item>
            </Descriptions.Item>
          </Descriptions>

          <Descriptions column={{ xs: 1, sm: 2, md: 3 }}>
            <Descriptions.Item>
              <Form.Item name="tosAccountName" label="Name" rules={AccountTip[0]}>
                <Input placeholder="Name Of Administrator" className="input" />
              </Form.Item>
            </Descriptions.Item>
            <Descriptions.Item>
              <Form.Item name="tosUserPhone" label="Phone" rules={AccountTip[1]}>
                <Input
                  placeholder="Contact Information"
                  className="input"
                  maxLength={11}
                  onKeyUp={keyup_communityManagerFee}
                />
              </Form.Item>
            </Descriptions.Item>
          </Descriptions>

          <Form.Item name="community" label="Community">
            <SelectCommunity />
          </Form.Item>

          <div className="diy" style={{ marginBottom: '14px' }}>
            <div className="label">
              <span className="title">Privilege Level：</span>
            </div>
            <div className="label">
              <Radio.Group defaultValue={values} onChange={onRadio}>
                <Radio style={radioStyle} value={2}>
                  Two Level Administrator
                </Radio>
                <Radio style={radioStyle} value={3}>
                  Three Level Administrator
                  {/* <Input placeholder="三级管理员" style={{ width: 160, marginLeft: 10 }} /> */}
                </Radio>
              </Radio.Group>
            </div>
          </div>

          <div className="diy" style={{ marginBottom: '24px' }}>
            <div className="label">
              <span className="title">Permission List：</span>
            </div>
            <div className="label">
              <Tree
                checkable
                onExpand={onExpand}
                expandedKeys={expandedKeys}
                autoExpandParent={autoExpandParent}
                onCheck={onCheck}
                checkedKeys={checkedKeys}
                onSelect={onSelect}
                selectedKeys={selectedKeys}
                treeData={treeData}
              />
            </div>
          </div>

          <div className="diy">
            <div className="label"></div>
            <div className="label">
              <Button type="primary" htmlType="submit" loading={loading}>
                Submit
              </Button>
            </div>
          </div>
        </Form>
      </div>
    </>
  );
};

const AccountProps = (state: any) => {
  console.log(state);
  const { Data, DataSave, DataSaveDetail, Result } = state.Account;
  const { CommunityList } = state.Init; // 小区列表
  const loading = state.loading.models.Account || false;
  return {
    Data,
    DataSave,
    DataSaveDetail,
    Result,
    loading,
    CommunityList,
  };
};

export default connect(AccountProps)(Account);
