/* eslint-disable array-callback-return,no-undef,no-unused-vars */
import React, { Component } from 'react';

import {
  DeleteOutlined,
  DownOutlined,
  IdcardOutlined,
  InfoCircleOutlined,
  MailOutlined,
  PoweroffOutlined,
  QuestionCircleOutlined,
  EllipsisOutlined,
  SkinOutlined,
  SearchOutlined,
} from '@ant-design/icons';

import { Form } from '@ant-design/compatible';
// import '@ant-design/compatible/assets/index.css';

import { Button, Input, Modal, Menu, Badge, message, Dropdown, Space, notification, Popover, Tabs } from 'antd-v4';
import styles from '@/routes/indexPage.less';
import config from '@/utils/config';
import * as commonUtils from '@/utils/utils';
import * as commonBusiness from '@/components/Common/commonBusiness';
import * as commonFunc from '@/components/Common/commonFunc';/* 单据业务功能 */
import AntdDraggableModal from '@/components/Common/AntdDraggableModal';
import FaceDetect from '@/components/FaceDetect';
import logoAbout from '@/assets/logo.png';
import prompt from '@/assets/prompt.png';
import newsTone from '@/assets/news.mp3';
import OnlineUser from '@/assets/onlineUser.svg';
import StaticEditTable from '@/components/Common/CommonTable';
import * as commonServices from '@/services/services';
import commonConfig from '../../../utils/config';
import SvgIcon from '../../SvgIcon';
import SkinChangeModal from './SkinChangeModal';
import MenuSearchPopovor from './MenuSearchPopovor';
import SwitchCompanyAndLanguage from './SwitchCompanyAndLanguage';

const { TabPane } = Tabs;
const { SubMenu } = Menu;
const MenuItemGroup = Menu.ItemGroup;
const FormItem = Form.Item;

class PersonCenter extends Component {
  constructor(props) {
    super(props);
    this.changePwd = localStorage.getItem(`${commonConfig.prefix}changePwd`) === 'true';
    this.state = {
      sId: props.app.userinfo.sId,
      dispatch: props.dispatch,
      userVisible: false,
      pwdVisible: this.changePwd,
      addFaceVisible: false,
      sUserName: props.app.userinfo.sUserName,
      menuSearchPopoverVisible: false,
    };
  }
  componentWillMount() {
    const currentSkin = localStorage.getItem('xly-skin') || 'default';
    const oBody = document.querySelector('body');
    oBody.setAttribute('data-skin', currentSkin);
  }
  componentDidMount() {
    if (this.changePwd) {
      const changePwd = commonFunc.showLocalMessage(this.props, 'changePwd', '系统判断密码为初始密码，2请修改密码后再操作！');

      message.warn(changePwd, 10);
    }
  }

  componentWillReceiveProps(nextProps) {
    const { app } = nextProps;
    if (commonUtils.isNotEmptyObject(app) && commonUtils.isNotEmptyObject(this.props.app.unRead) && commonUtils.isNull(app.unRead.iCount, 0).toString() !== commonUtils.isNull(this.props.app.unRead.iCount, 0).toString()) { /* 当nextProps中的消息大于原来props中的消息数 标明有新消息推送过来 */
      const audio = document.getElementById('msgAudio');
      if (commonUtils.isNotEmptyObject(audio)) {
        audio.play();
      }
    }
  }
  shouldComponentUpdate(nextProps) {
    const { pwdVisible } = this.state;
    const { app: appNew } = nextProps;
    const { app } = this.props;
    // 修改密码时，阻止websockt消息推送导致更新
    if (pwdVisible && JSON.stringify(appNew) !== JSON.stringify(app)) {
      return false;
    }
    return true;
  }
  onSaveFaceSuccess = (e) => {
    /* 阻止表单提交动作 */
    this.setState({
      addFaceVisible: false,
    });
  }
  handleCancellation = (e) => {
    const { dispatch, sId } = this.state;
    if (e.key === 'loginOut' || e.key === 'switchAccount') {
      const url = `${config.server_host}logout`;
      dispatch({ type: 'app/loginOut', payload: { url, sId, loginOutType: 'loginOut' } });
    } else if (e.key === 'setUser') {
      this.setState({ userVisible: true });
    } else if (e.key === 'setPsd') {
      this.setState({ pwdVisible: true });
    } else if (e.key === 'addFace') {
      this.setState({ addFaceVisible: true });
    } else if (e.key === 'resetPwd') {
      const { sId } = this.state;
      const url = `${config.server_host}sftlogininfo/updatePasswordUserName/reset?sModelsId=${100}&sId=${sId}`;
      const value = {};
      value.sId = sId;
      dispatch({ type: 'app/resetPwd', payload: { url, value } });
    } else if (e.key === 'mailAndMsg') {
      const pane = {
        title: '消息列表', route: '/indexPage/commonList', formId: '15669750700007338351055957774000', key: commonUtils.createSid(), sModelsType: 'commonList/msg',
      };
      dispatch({ type: 'app/addPane', payload: { pane } });
    } else if (e.key === 'clearOption') {
      const recordDeletion = commonFunc.showMessage(this.props.app.commonConst, 'recordDeletion') || '记录删除';/* 人脸采集 */
      sessionStorage.clear();
      this.clearSocket({ optName: recordDeletion });
      commonUtils.clearStoreDropDownData();
    } else if (e.key === 'about') {
      this.handleShowAbout();
    } else if (e.key === 'onlineUser') {
      this.handleShowOnlineUser();
    }
  };
  handleShowAbout = async () => {
    const { app } = this.props;
    const { token } = app;
    const configUrl = `${config.server_host}license/getLicense?sModelsId=${100}`;
    const configReturn = (await commonServices.getService(token, configUrl)).data;
    if (configReturn.code === 1) {
      const returnData = configReturn.dataset.rows;
      if (commonUtils.isNotEmptyArr(returnData)) {
        const aboutInfo = returnData[0];
        this.setState({ aboutInfo, aboutVisible: true });
      }
    } else {
      message.error(configReturn.msg);
    }
  };
  handleShowNews = (e) => {
    const { dispatch } = this.state;
    const pane = {
      title: '消息列表', route: '/indexPage/commonList', formId: '15669750700007338351055957774000', key: commonUtils.createSid(), sModelsType: 'commonList/msg',
    };
    dispatch({ type: 'app/addPane', payload: { pane } });
  };

  handleShowMsg = async (e, sFormId) => {
    const { dispatch } = this.state;
    const { app } = this.props;
    const { token } = app;
    /* 根据getModelById 取对应窗体 */
    const paneKey = new Date().getTime().toString();
    let sModelsType = '';
    let title = '单据页';
    let sProcName = '';
    let route = '/indexPage/commonBill';
    const configUrl = `${commonConfig.server_host}gdsmodule/getGdsmoduleById/${sFormId}?sModelsId=${sFormId}`;
    const configReturn = (await commonServices.getService(token, configUrl)).data;
    if (configReturn.code === 1) {
      const dataReturn = configReturn.dataset.rows;
      if (commonUtils.isNotEmptyArr(dataReturn) && commonUtils.isNotEmptyObject(dataReturn[0])) {
        const config = dataReturn[0];
        sModelsType = commonUtils.isNotEmptyObject(config.sModelType) ? config.sModelType.toString() : '';
        title = commonUtils.isNotEmptyObject(config.sMenuName) ? config.sMenuName.toString() : '';
        route = commonUtils.isNotEmptyObject(config.sName) ? config.sName.toString() : '';
        sProcName = commonUtils.isNotEmptyObject(config.sProcName) ? config.sProcName.toString() : '';
      }
    } else {
      this.getServiceError(configReturn);
    }
    const pane = {
      formId: sFormId,
      key: commonUtils.createSid(),
      route,
      title,
      sModelsType,
      sProcName,
    };
    // const pane = {
    //   title: '消息列表', route: '/indexPage/commonList', formId: sFormId, key: commonUtils.createSid(), sModelsType: 'commonList/msg',
    // };
    dispatch({ type: 'app/addPane', payload: { pane } });
  };

  handleSubmitPwd = (e) => {
    /* 阻止表单提交动作 */
    e.preventDefault();
    this.psdform.validateFields((err, values) => {
      if (!err) {
        const { sId } = this.state;
        values.sId = sId;
        if (values.sUserPwd !== values.sUserPwdAgain) {
          message.error('密码输入不一致');
          return;
        }
        const url = `${config.server_host}sftlogininfo/updatePasswordUserName/update?sModelsId=${100}`;
        const { dispatch } = this.state;
        dispatch({ type: 'app/editPwd', payload: { url, value: values, editPwdType: 'window' } });
        this.setState({
          pwdVisible: false,
        });
      }
    });
  }

  handleShowModal = () => {
    this.setState({
      visible: true,
    });
  }

  handleShowOnlineUser = async () => {
    const { app } = this.props;
    const { token } = app;
    const configUrl = `${config.server_host}license/getOnline?sModelsId=${100}`;
    const configReturn = (await commonServices.getService(token, configUrl)).data;
    if (configReturn.code === 1) {
      const returnData = configReturn.dataset.rows;
      if (commonUtils.isNotEmptyArr(returnData)) {
        const onlineUserData = returnData[0];
        this.setState({ onlineUserData, onlineUserVisible: true });
      }
    } else {
      message.error(configReturn.msg);
    }
  }

  handleSaveOnlineUserState = (onlineUserState) => {
    this.setState({ onlineUserState });
  }

  // 强制下线用户
  handleExitTbRow = (index, record) => {
    const oThis = this;
    Modal.confirm({
      title: `确定要将用户【${record.sUserName}】强制退出`,
      async onOk() {
        const { app } = oThis.props;
        const { userinfo, token } = app;
        const { sUserId, sUserLoginType } = record;
        const { onlineUserData } = oThis.state;
        const configUrl = `${config.server_host}license/doExit/${sUserId}/${sUserLoginType}`;
        const configReturn = (await commonServices.getService(token, configUrl)).data;
        if (configReturn.code === 1) {
          const iIndex = onlineUserData.data.findIndex(item => item.sUserId === record.sUserId);
          if (iIndex !== -1) {
            onlineUserData.data.splice(iIndex, 1);
            oThis.setState({ onlineUserData });
          }
          message.success(`用户【${record.sUserName}】已下线`);
        } else {
          message.error(`用户【${record.sUserName}】强制退出失败`);
        }
      },
    });
  }

  handleCancel = () => {
    this.setState({
      userVisible: false,
      pwdVisible: false,
      aboutVisible: false,
      addFaceVisible: false,
      onlineUserVisible: false,
      skinChangeModalVisible: false,
    });
  };

  handleUserForm = (form) => {
    this.userform = form;
  }

  handlePsdForm = (form) => {
    this.psdform = form;
  }

  handleSubmit = (e) => {
    /* 阻止表单提交动作 */
    e.preventDefault();
    this.userform.validateFields((err, values) => {
      if (!err) {
        const { sId } = this.state;
        values.sId = sId;
        const url = `${config.server_host}sftlogininfo/updatePasswordUserName/update?sModelsId=${100}`;
        const { dispatch } = this.state;
        dispatch({ type: 'app/editUser', payload: { url, value: values } });
        this.setState({
          userVisible: false,
        });
      }
    });
  };

  handleGetMsg = (content) => {
    const msgArr = commonUtils.isNotEmptyArr(content) ? content : '';
    const divStr = [];
    if (commonUtils.isNotEmptyArr(msgArr)) {
      // eslint-disable-next-line no-plusplus
      for (let i = 0; i < msgArr.length; i++) {
        const msgObj = msgArr[i];
        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
        divStr.push(<p onClick={e => this.handleShowMsg(e, msgObj.sFormId)}>{msgObj.sTypeName} <span style={{ color: 'red' }}>{`(${msgObj.iCount})`}</span></p>);
      }
    }
    return divStr;
  }

  clearSocket = async (params) => {
    const { app } = this.props;
    const { token } = app;
    const returnData = await commonBusiness.clearSocketData({ token, value: params, sModelsId: 100 });
  };

  handleSetMenuSearchPopoverVisible = (visible) => {
    this.setState({ menuSearchPopoverVisible: visible });
  }
  updateMenuPanel = () => {
    // const url = `${config.server_host}business/getBuMenu?sModelsId=100`;
    // const { token } = this.props.app;
    // const options = {
    //   method: 'GET',
    //   headers: {
    //     'Content-Type': 'application/json',
    //     authorization: token,
    //   },
    // };
    // fetch(url, options).then(response => response.json()).then(async (json) => {
    //   if (json.code === 1) {
    //     console.log(json);
    //     this.setState({ menuPanel: json.dataset.rows });
    //     // message.success(json.msg);
    //   } else {
    //     message.error(json.msg);
    //   }
    // });
  }
  render() {
    const { props, state, unRead } = this;
    const { sUserName, sType, companyName } = props.app.userinfo;
    const ModifyUserNserName = commonFunc.showMessage(props.app.commonConst, 'ModifyUserNserName');/* 修改用户名 */
    const ModifyPassword = commonFunc.showMessage(props.app.commonConst, 'ModifyPassword');/* 修改密码 */
    const InitPassword = commonFunc.showMessage(props.app.commonConst, 'InitPassword');/* 初始化密码 */
    const SwitchAccount = commonFunc.showMessage(props.app.commonConst, 'SwitchAccount');/* 切换账号 */
    const GetFace = commonUtils.isNotEmptyObject(commonFunc.showMessage(props.app.commonConst, 'GetFace')) ?
      commonFunc.showMessage(props.app.commonConst, 'GetFace') : '人脸采集';/* 人脸采集 */
    const Newsinfo = commonFunc.showMessage(props.app.commonConst, 'Newsinfo');/* 消息 */
    const Todo = commonFunc.showMessage(props.app.commonConst, 'Todo');/* Todo待办 */
    const aMe = commonFunc.showMessage(props.app.commonConst, '@Me');/* @Me */
    const ClearOut = commonFunc.showMessage(props.app.commonConst, 'ClearOut');/* 清空 */
    const Help = commonFunc.showMessage(props.app.commonConst, 'Help');/* 帮助 */
    const About = commonFunc.showMessage(props.app.commonConst, 'About');/* 关于 */
    const ExitLogin = commonFunc.showMessage(props.app.commonConst, 'ExitLogin');/* 退出 */
    const sysadmin = commonFunc.showMessage(props.app.commonConst, 'sysadmin');/* 超级管理员 */
    const General = commonFunc.showMessage(props.app.commonConst, 'General');/* 普通用户 */
    const OnlineUserName =  commonFunc.showMessage(props.app.commonConst, 'OnlineUsers') || '在线用户';/* 在线用户 */
    const sLookAll = commonUtils.isNotEmptyObject(commonFunc.showMessage(props.app.commonConst, 'sLookAll')) ?
      commonFunc.showMessage(props.app.commonConst, 'sLookAll') : '';


    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    const msg = props.app.unRead;
    const msgObj = commonUtils.isJSON(msg) ? JSON.parse(msg) : {};
    const msgData = msgObj.data; /* 推送信息 */
    const { menuSearchPopoverVisible, dispatch } = this.state;
    const { menuPanel, onAddPane, app } = this.props;
    return (
      <div className={styles.dropdownContainer} id="pcDropdwonContainer">
        <Space align="baseline" style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{ display: 'none' }} className={styles.dropdownDiv}>{companyName}</div>
          <div
            className="sysSearchInput"
            style={menuSearchPopoverVisible ? {
              width: 0,
              opacity: 0,
              '--transform-left': '-30px',
            } : {}}
          >
            <Popover
              trigger="click"
              destroyTooltipOnHide
              content={
                <MenuSearchPopovor
                  menuPanel={menuPanel}
                  onAddPane={onAddPane}
                  app={app}
                  dispatch={dispatch}
                  updateMenuPanel={this.updateMenuPanel}
                  onSetMenuSearchPopoverVisible={this.handleSetMenuSearchPopoverVisible}
                />
              }
              placement="left"
              overlayClassName="sysSearchContent"
              open={menuSearchPopoverVisible}
            >
              <SearchOutlined
                onClick={() => {
                  this.handleSetMenuSearchPopoverVisible(true);
                }}
              />
            </Popover>
          </div>
          <SwitchCompanyAndLanguage {...props} />
          <div
            className="sysNewBox"
            onFocus={() => 0}
            onBlur={() => 0}
            onMouseOver={() => {
              clearTimeout(this.showCodeBoxTimer);
              this.setState({ showCodeBox: true });
            }}
            onMouseOut={() => {
              clearTimeout(this.showCodeBoxTimer);
              this.showCodeBoxTimer = setTimeout(() => {
                this.setState({ showCodeBox: false });
              }, 500);
            }}
          >
            <div className="sysNews">
              {
                commonUtils.isNotEmptyArr(msgData) ?
                  <Badge count={msgObj.iCount}>
                    <img alt="logo" src={prompt} width={18} />
                  </Badge> :
                  <div onClick={this.handleShowNews}>
                    <Badge count={commonUtils.isNotEmptyNumber(msgObj.iCount) ? msgObj.iCount : (commonUtils.isNotEmptyObject(msg) ? msg : '')}>
                      <MailOutlined className={styles.iconMailOutlined} style={{ fontSize: '15px' }} />
                    </Badge>
                  </div>
              }
              {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
              <audio src={newsTone} id="msgAudio">
                Your browser does not support the audio element.
              </audio>
              <div className="code-box-demo" style={{ display: this.state.showCodeBox ? 'block' : 'none' }}>
                <div className="card-container">
                  {
                    commonUtils.isNotEmptyObject(msgData) ?
                      <Tabs
                        defaultActiveKey="1"
                        size="middle"
                        type="card"
                      >

                        <TabPane tab={<span>{Newsinfo} {commonUtils.isNotEmptyNumber(msgData.MSG.iCount) ? <span style={{ color: 'red' }}>{`(${msgData.MSG.iCount})`}</span> : ''} </span>} key="1">
                          <div className="newsContent">
                            <div className="newsTitle" >
                              {commonUtils.isNotEmptyObject(msgData.MSG) ?
                                <div> {msgData.MSG.sContent}</div> : ''
                              }
                            </div>
                            <div className="newsFoot" >
                              <div onClick={e => this.handleShowMsg(e, msgData.MSG.sFormId)}>{sLookAll}</div>
                            </div>
                          </div>
                        </TabPane>
                        <TabPane tab={<span>{Todo} {commonUtils.isNotEmptyNumber(msgData.UNDO.iCount) ? <span style={{ color: 'red' }}>{`(${msgData.UNDO.iCount})`}</span> : ''} </span>} key="2">
                          <div className="newsContent">
                            <div className="newsTitle" >
                              {commonUtils.isNotEmptyObject(msgData.UNDO) ?
                                <div> {msgData.UNDO.sContent}</div> : ''
                              }
                            </div>
                            <div className="newsFoot" >
                              <div onClick={e => this.handleShowMsg(e, msgData.UNDO.sFormId)}>{sLookAll}</div>
                            </div>
                          </div>
                        </TabPane>
                        <TabPane tab={<span>{aMe} {commonUtils.isNotEmptyNumber(msgData.COPYTO.iCount) ? <span style={{ color: 'red' }}>{`(${msgData.COPYTO.iCount})`}</span> : ''} </span>} key="3">
                          <div className="newsContent">
                            <div className="newsTitle" >
                              {commonUtils.isNotEmptyObject(msgData.COPYTO) ?
                                <div> {msgData.COPYTO.sContent}</div> : ''
                              }
                            </div>
                            <div className="newsFoot" >
                              <div onClick={e => this.handleShowMsg(e, msgData.COPYTO.sFormId)}>{sLookAll}</div>
                            </div>
                          </div>
                        </TabPane>
                      </Tabs> : ''
                  }

                </div>
              </div>
            </div>
          </div>
          <Space>
            <SkinOutlined
              className={styles.skinChange}
              onClick={() => {
                this.setState({ skinChangeModalVisible: true });
              }}
            />
            <Dropdown overlay={
              <Menu
                onClick={this.handleCancellation}
              >
                <Menu.Item key="setUser" style={{ fontSize: '14px', height: '32px' }}>{ModifyUserNserName}</Menu.Item>
                <Menu.Item key="setPsd" style={{ fontSize: '14px', height: '32px' }}>{ModifyPassword}</Menu.Item>
                <Menu.Item key="resetPwd" style={{ fontSize: '14px', height: '32px' }}>{InitPassword}</Menu.Item>
                <Menu.Item key="addFace" style={{ fontSize: '14px', height: '32px' }}>{GetFace}</Menu.Item>
                <Menu.Item key="switchAccount" style={{ fontSize: '14px', height: '32px' }}>{SwitchAccount}</Menu.Item>
              </Menu>}
            >
              <div className={styles.antDropdownLink} onClick={e => e.preventDefault()} >
                <Space>
                  {/* <SvgIcon iconClass="card" fill="#fff" size="16" offsetY="3" /> */}
                  <span>{sUserName}({sType === 'sysadmin' ? sysadmin : sType === 'General' ? General : ''})</span>
                  <DownOutlined />
                </Space>
              </div>
            </Dropdown>
          </Space>
          <div />
          <Dropdown overlay={
            <Menu
              onClick={this.handleCancellation}
            >
              <Menu.Item key="clearOption">
                <Space style={{ fontSize: '14px', width: '120px', height: '28px' }}>
                  <DeleteOutlined />{ClearOut}
                </Space>
              </Menu.Item>
              <Menu.Item key="help">
                <Space style={{ fontSize: '14px', width: '120px', height: '28px' }}>
                  <QuestionCircleOutlined />{Help}
                </Space>
              </Menu.Item>
              <Menu.Item key="about">
                <Space style={{ fontSize: '14px', width: '120px', height: '28px' }}>
                  <InfoCircleOutlined />{About}
                </Space>
              </Menu.Item>
              <Menu.Item key="onlineUser">
                <Space style={{ fontSize: '14px', width: '120px', height: '28px' }}>
                  <img src={OnlineUser} alt="onlineUser" width="16px" height="16px" />
                  <span style={{ marginLeft: '-2px' }}>{OnlineUserName}</span>
                </Space>
              </Menu.Item>
              <Menu.Item key="loginOut">
                <Space style={{ fontSize: '14px', width: '120px', height: '28px' }}>
                  <PoweroffOutlined />{ExitLogin}
                </Space>
              </Menu.Item>
            </Menu>}
          >
            <div className={styles.antDropdownLink} onClick={e => e.preventDefault()}>
              <EllipsisOutlined />
            </div>
          </Dropdown>
        </Space>
        <PersonCenterUserName
          {...props}
          {...state}
          formItemLayout={formItemLayout}
          tailFormItemLayout={tailFormItemLayout}
          handleSubmit={this.handleSubmit}
          handleCancel={this.handleCancel}
          handleUserForm={this.handleUserForm}
        />
        <PersonCenterPsd
          {...props}
          {...state}
          formItemLayout={formItemLayout}
          tailFormItemLayout={tailFormItemLayout}
          handleSubmitPwd={this.handleSubmitPwd}
          handleCancel={this.handleCancel}
          handlePsdForm={this.handlePsdForm}
        />
        <PersonCenterAddFace
          {...props}
          {...state}
          formItemLayout={formItemLayout}
          tailFormItemLayout={tailFormItemLayout}
          onSaveFaceSuccess={this.onSaveFaceSuccess}
          handleCancel={this.handleCancel}
        />
        <PersonCenterOnlineUser
          {...props}
          {...state}
          formItemLayout={formItemLayout}
          tailFormItemLayout={tailFormItemLayout}
          handleCancel={this.handleCancel}
          onSaveState={this.handleSaveOnlineUserState}
          onExitTbRow={this.handleExitTbRow}
        />
        {state.skinChangeModalVisible &&
          <SkinChangeModal
            {...props}
            {...state}
            handleCancel={this.handleCancel}
          />
        }
      </div>
    );
  }
}
const PersonCenterUserName = Form.create({
  mapPropsToFields(props) {
  },
})((props) => {
  const {
    handleCancel,
    handleSubmit,
    tailFormItemLayout,
    handleUserForm,
    formItemLayout,
    form,
    userVisible,
    aboutVisible,
    app,
    aboutInfo,
  } = props;
  const { getFieldDecorator } = props.form;
  const { sUserName, companyName } = props.app.userinfo;
  const ModifyUserNserName = commonFunc.showMessage(app.commonConst, 'ModifyUserNserName');/* 修改用户名 */
  const userName = commonFunc.showMessage(app.commonConst, 'userName');/* 用户名 */
  const pleaseInputNewName = commonFunc.showMessage(app.commonConst, 'pleaseInputNewName');/* 请输入新名称 */
  const btnSave = commonFunc.showMessage(app.commonConst, 'BtnSave');/* 保存 */
  const About = commonFunc.showMessage(app.commonConst, 'About');/* 关于 */
  const Version = commonFunc.showMessage(app.commonConst, 'Version');/* 版本号 */
  const comName = commonFunc.showMessage(app.commonConst, 'CompanyName');/* 公司名称 */
  const Website = commonFunc.showMessage(app.commonConst, 'Website');/* 站点数 */
  const ExpirationDate = commonFunc.showMessage(app.commonConst, 'ExpirationDate');/* 软件到期时间 */
  const MAC = commonFunc.showMessage(app.commonConst, 'MAC');/* 物理地址 */
  const versionValue = commonUtils.isNotEmptyObject(aboutInfo) ? aboutInfo.version : '';
  const websiteValue = commonUtils.isNotEmptyObject(aboutInfo) ? aboutInfo.consumerCount : '';
  const expirationDateValue = commonUtils.isNotEmptyObject(aboutInfo) ? aboutInfo.afterTime : '';
  const macValue = commonUtils.isNotEmptyObject(aboutInfo) ? aboutInfo.mac : '';
  return (
    <div>
      {
        userVisible ?
          <AntdDraggableModal
            title={ModifyUserNserName}
            width={500}
            visible={userVisible}
            onCancel={handleCancel}
            footer={null}
            className={styles.changeUserName}
          >
            {handleUserForm(form)}
            <Form onSubmit={handleSubmit} className={styles.popoverForm}>
              <FormItem label={userName} {...formItemLayout} hasFeedback>
                {getFieldDecorator('sUserName', {
                  initialValue: sUserName,
                  rules: [{ required: true, message: pleaseInputNewName }],
                })(<Input placeholder={pleaseInputNewName} type="sUserName" />)}
              </FormItem>
              <FormItem {...tailFormItemLayout}>
                <Button type="primary" htmlType="submit">{btnSave}</Button>
              </FormItem>
            </Form>
          </AntdDraggableModal>
          : ''
      }{
        aboutVisible ?
          <AntdDraggableModal
            title={About}
            width={400}
            visible={aboutVisible}
            onCancel={handleCancel}
            footer={null}
            className={styles.changeUserName}
          >
            <div className={styles.sysAbout}>
              <div className={styles.syslog} >
                <img alt="logo" src={logoAbout} style={{ marginRight: 10 }} />
              </div>
              <div className={styles.sysInfo} >
                <div className={styles.sysLine}>
                  <div className={styles.aboutleft}>{comName}</div><div className={styles.aboutRight}>{companyName}</div>
                </div>
                <div className={styles.sysLine}>
                  <div className={styles.aboutleft}>{Version}</div><div className={styles.aboutRight}>{versionValue}</div>
                </div>
                <div className={styles.sysLine}>
                  <span className={styles.aboutleft}>{Website}</span><span className={styles.aboutRight}> {websiteValue}</span>
                </div>
                <div className={styles.sysLine}>
                  <span className={styles.aboutleft}>{MAC}</span><span className={styles.aboutRight}> {macValue}</span>
                </div>
                <div className={styles.sysLine}>
                  <span className={styles.aboutleft}>{ExpirationDate}</span><span className={styles.aboutRight}> {expirationDateValue}</span>
                </div>
              </div>
            </div>
          </AntdDraggableModal>
          : ''
      }
    </div>
  );
});

const PersonCenterPsd = Form.create({
  mapPropsToFields(props) {
  },
})((props) => {
  const {
    handleCancellation,
    handleCancel,
    handleModalClose,
    handleSubmitPwd,
    handlePsdForm,
    pwdVisible,
    form,
    app,
  } = props;
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 13 },
    },
  };
  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 8,
      },
    },
  };
  const { getFieldDecorator } = props.form;
  const NotSamePassword = commonFunc.showMessage(app.commonConst, 'NotSamePassword');/* 两次密码输入不一致 */
  /*  密码不一致验证 */
  const passwordValidator = (rule, value, callback) => {
    const { getFieldValue } = form;
    if (value && value !== getFieldValue('sUserPwd')) {
      callback(NotSamePassword);
    }
    // 必须总是返回一个 callback，否则 validateFields 无法响应
    callback();
  };
  const ModifyPassword = commonFunc.showMessage(app.commonConst, 'ModifyPassword');/* 修改密码 */
  const oldPassword = commonFunc.showMessage(app.commonConst, 'oldPassword');/* 原密码 */
  const pleaseInputOldPassword = commonFunc.showMessage(app.commonConst, 'pleaseInputOldPassword');/* 请输入原密码 */
  const newPassword = commonFunc.showMessage(app.commonConst, 'newPassword');/* 新密码 */
  const peleaseInputNewPassword = commonFunc.showMessage(app.commonConst, 'peleaseInputNewPassword');/* 请输入新密码 */
  const confirmNewPassword = commonFunc.showMessage(app.commonConst, 'confirmNewPassword');/* 确认新密码 */
  const pleaseConfirmPasswordAgin = commonFunc.showMessage(app.commonConst, 'pleaseConfirmPasswordAgin');/* 请再次确认新密码 */
  const btnSave = commonFunc.showMessage(app.commonConst, 'BtnSave');/* 保存 */
  return (
    <div>
      {
        pwdVisible ?
          <AntdDraggableModal
            title={ModifyPassword}
            width={500}
            visible={pwdVisible}
            onCancel={handleCancel}
            afterClose={handleModalClose}
            footer={null}
            className={styles.changePwd}
            closable={!app?.isInitPassword}
          >
            {handlePsdForm(form)}
            <Form onSubmit={handleSubmitPwd} className={styles.popoverForm}>
              <FormItem label={oldPassword} {...formItemLayout}>
                {getFieldDecorator('sOldPwd', {
                  rules: [{ required: true, message: pleaseInputOldPassword }],
                })(<Input placeholder={pleaseInputOldPassword} type="password" />)}
              </FormItem>
              <FormItem label={newPassword} {...formItemLayout} hasFeedback>
                {getFieldDecorator('sUserPwd', {
                  rules: [{ required: true, message: peleaseInputNewPassword }],
                })(<Input placeholder={peleaseInputNewPassword} type="password" />)}
              </FormItem>
              <FormItem label={confirmNewPassword} {...formItemLayout} hasFeedback>
                {getFieldDecorator('sUserPwdAgain', {
                  rules: [{ required: true, message: pleaseConfirmPasswordAgin }, {
                    validator: passwordValidator,
                  }],
                  validateFirst: true,
                })(<Input placeholder={pleaseConfirmPasswordAgin} type="password" />)}
              </FormItem>
              <FormItem {...tailFormItemLayout}>
                <Button type="primary" htmlType="submit">{btnSave}</Button>
              </FormItem>
            </Form>
          </AntdDraggableModal>
          : ''
      }
    </div>
  );
});

const PersonCenterAddFace = Form.create({
  mapPropsToFields(props) {
  },
})((props) => {
  const {
    handleCancel,
    handleModalClose,
    addFaceVisible,
  } = props;
  const GetFace = commonFunc.showMessage(props.app.commonConst, 'GetFace');/* 在线用户 */
  return (
    <div>
      {
        <AntdDraggableModal
          title={GetFace}
          width={400}
          visible={addFaceVisible}
          onCancel={handleCancel}
          afterClose={handleModalClose}
          footer={null}
          className={styles.changePwd}
        >
          <div className="tab-container">
            <FaceDetect {...props} actionType="saveFace" onSaveFaceSuccess={props.onSaveFaceSuccess}>11</FaceDetect>
          </div>
        </AntdDraggableModal>
      }
    </div>
  );
});

const PersonCenterOnlineUser = Form.create({
  mapPropsToFields(props) {
  },
})((props) => {
  const {
    handleCancel,
    onlineUserVisible,
    onlineUserData,
    onSaveState,
    onlineUserState = {},
    onExitTbRow,
    app,
  } = props;
  const { userinfo } = app;
  const BtnSure =commonFunc.showMessage(app.commonConst, 'BtnSure') || '确认';
  const BtnCancel  =commonFunc.showMessage(app.commonConst, 'BtnCancel') || '取消';
  const OnlineUsers = commonFunc.showMessage(props.app.commonConst, 'OnlineUsers');/* 在线用户 */

  const Website = commonFunc.showMessage(props.app.commonConst, 'Website');/* 站点数 */
  const ExpirationDate = commonFunc.showMessage(props.app.commonConst, 'ExpirationDate');/* ExpirationDate */

  const OnlineUserName = OnlineUsers;
  // const ModifyPassword = commonFunc.showMessage(app.commonConst, 'ModifyPassword');/* 修改密码 */
  const onlineUserDataNew = commonUtils.isNotEmptyObject(onlineUserData) ? onlineUserData : {};
  const onlineUserConfig = {
    sId: commonUtils.createSid(),
    bisMutiSelect: false,
    bMutiSelect: false,
  };
  /* eslint-disable */
  const gdsconfigformslave = [
    { sId: commonUtils.createSid(), sName: 'sId', showName: '主键', sChinese: '主键', sEnglishName: 'Primary Key', sBig5Name: '主鍵',  bVisible: false, iFitWidth: 0 },
    { sId: commonUtils.createSid(), sName: 'iRowNum', showName: '行号',sChinese: '行号', sEnglishName: 'Row Number', sBig5Name: '行号',  bVisible: true, iFitWidth: 60, bNotSort: true },
    { sId: commonUtils.createSid(), sName: 'sUserNo', showName: '用户号', sChinese: '用户号', sEnglishName: 'User ID', sBig5Name: '用戶号',  bVisible: true, iFitWidth: 100, bFind: true },
    { sId: commonUtils.createSid(), sName: 'sUserName', showName: '用户名',sChinese: '用户名', sEnglishName: 'User Name',sBig5Name: '用戶名',  bVisible: true, iFitWidth: 100, bFind: true },
    { sId: commonUtils.createSid(), sName: 'sEmployeeNo', showName: '员工编号', sChinese: '员工编号', sEnglishName: 'Employee ID', sBig5Name: '員工編號', bVisible: true, iFitWidth: 100, bFind: true },
    { sId: commonUtils.createSid(), sName: 'sDepartName', showName: '部门', sChinese: '部门', sEnglishName: 'Department',sBig5Name: '部門',  bVisible: true, iFitWidth: 100 },
    { sId: commonUtils.createSid(), sName: 'sUserType', showName: '用户类型',sChinese: '用户类型', sEnglishName: 'User Type', sBig5Name: '用戶類型', bVisible: true, iFitWidth: 100 },
    { sId: commonUtils.createSid(), sName: 'sUserLoginTypeName', showName: '登陆类型', sChinese: '登陆类型', sEnglishName: 'Login Type',sBig5Name: '登陸類型',  bVisible: true, iFitWidth: 100 },
    { sId: commonUtils.createSid(), sName: 'tLoginDate', showName: '登陆时间',sChinese: '登陆时间', sEnglishName: 'Login Time', sBig5Name: '登陸時間', bVisible: true, iFitWidth: 150 },
  ];
    const gdsconfigformslaveNew = gdsconfigformslave.map(column => {
    const { sLanguage } = userinfo || {};
    let showName = column.sChinese; // 默认中文
    
    if (sLanguage === 'sEnglish' && column.sEnglishName) {
      showName = column.sEnglishName;
    } else if (sLanguage === 'sBig5' && column.sBig5Name) {
      showName = column.sBig5Name;
    }
    
    return {
      ...column,
      showName
    };
  });
  /* eslint-disable array-callback-return,no-undef,no-unused-vars */
  onlineUserConfig.gdsconfigformslave = gdsconfigformslaveNew;

  const headerColumn = commonFunc.getHeaderConfig(onlineUserConfig);

  const { sLanguage } = userinfo || {};
  const { sType } = props.app?.userinfo || {};
  // 根据用户语言处理表头显示名称
  headerColumn.forEach(column => {
    if (sLanguage === 'sEnglish' && column.sEnglishName) {
      column.showName = column.sEnglishName; // 使用英文显示名称
    }else if (sLanguage === 'sBig5' && column.sBig5Name) {
      column.showName = column.sBig5Name; // 使用繁体显示名称
    }
  });


  const onlineUserProps = {
    ...commonBusiness.getTableTypes('onlineUser', props),
    formId: commonUtils.createSid(),
    tableProps: { AutoTableHeight: '100%', setNoCommonOperate: true, setExit: ['sysadmin'].includes(sType), },
    config: onlineUserConfig,
    headerColumn,
    data: commonUtils.isNotEmptyObject(onlineUserDataNew) ? onlineUserDataNew.data : [],
    onSaveState,
    onSelectRowChange: () => { },
    onExitTbRow,
    getDateFormat: () => 'YYYY-MM-DD hh:mm:ss',
    ...onlineUserState
  };

  const tableHeight = 500;
  const title = `${OnlineUserName}${commonUtils.isNotEmptyObject(onlineUserDataNew) ? `【 ${Website}：${onlineUserDataNew.consumerCount}\xa0\xa0\xa0\xa0\xa0${ExpirationDate}：${onlineUserDataNew.afterTime}` : ''} 】`;
  return (
    <div>
      {onlineUserVisible ? (
        <AntdDraggableModal title={title} width="80%" visible={onlineUserVisible} onCancel={handleCancel} afterClose={handleCancel} footer={null}>
          <div
            style={{ width: "100%", height: tableHeight + "px" }}
            ref={ref => {
              if (ref) {
                ref.querySelector(".ant-table-container").style.height = tableHeight + "px";
                ref.querySelector(".ant-table-body").style.height = tableHeight - 30 + "px";
                // ref.querySelectorAll('.ant-table-cell-fix-right').forEach(item => {
                //   if (item.previousSibling) {
                //     item.previousSibling.style.display = 'none';
                //   }
                // });
              }
            }}
          >
            <StaticEditTable {...onlineUserProps} setOpterationColumn="Y" noVlist />
          </div>
          <div className="ant-modal-footer" style={{ padding: "8px 0 0 0" }}>
            <Button key="back" onClick={handleCancel}>
              {BtnCancel}
            </Button>
            <Button key="submit" type="primary" onClick={handleCancel}>
              {BtnSure}
            </Button>
          </div>
        </AntdDraggableModal>
      ) : (
        ""
      )}
    </div>
  );
});

export default PersonCenter;