/* eslint-disable array-callback-return,no-undef */
import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
// import '@ant-design/compatible/assets/index.css';
import { Layout, Tabs, Spin, Row, Col, Input } from 'antd-v4';
import styles from '../../index.less';
import selfstyles from './SystemPermissionInfo.less';
import Toolbar from '../Common/ToolBar/ToolBarNew';
import * as commonFunc from '../Common/commonFunc';
import CommonBase from '../Common/CommonBase';
import CommonJurisdictionEvent from '../Common/CommonJurisdictionNewEvent';
import * as commonBusiness from '../Common/commonBusiness';/* 单据业务功能 */
import StaticEditTable from '../Common/CommonTable';/* 可编辑表格 */
import StaticEditTree from '../Common/Tree/StaticTree';
import AntdDraggableModal from '../Common/AntdDraggableModal';
import * as commonUtils from '../../utils/utils';
import ShowType from '../Common/CommonComponent';

const { Header, Content } = Layout;
const { TabPane } = Tabs;
const { Search } = Input;

const FormItem = Form.Item;
class SystemPermissionComponentInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
    this.form = {}; /*   表单对象   */
  }
  onTabChange = (key) => {
    this.props.onSaveState({ activeKey: key });
  };
  render() {
    const { pageLoading } = this.props;
    return (
      <div>
        <Spin spinning={pageLoading}>
          <div>
            <SystemPermissionComponent
              {...this.props}
              {...this.state}
              onTabChange={this.onTabChange}
            />
          </div>
        </Spin>
      </div>
    );
  }
}
const SystemPermissionComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form);
    return obj;
  },
})((props) => {
  const {
    form, onReturnForm, activeKey, enabled, groupModalVisible, sToGroupConfig, userModalVisible, sToUserConfig, app, masterData,
  } = props;

  // const tableHeight = (window.innerHeight - 300) / 2;

  const groupProps = {
    ...commonBusiness.getTableTypes('group', props),
    tableProps: { rowSelection: null, AutoTableHeight: 330 },
    // rowSelectionType: 'radio',
    enabled: false,
  };


  const userGroupProps = {
    ...commonBusiness.getTableTypes('userGroup', props),
    tableProps: { rowSelection: null, AutoTableHeight: 150 },
    enabled: false,
  };
  // const groupUserProps = {
  //   ...commonBusiness.getTableTypes('groupUser', props),
  //   tableProps: { rowSelection: null, rowKey: 'sGroupsId', AutoTableHeight: tableHeight },
  //   enabled: false,
  // };

  /* 查看用户权限 */
  const userProps = {
    ...commonBusiness.getTableTypes('userView', props),
    tableProps: { rowSelection: null, AutoTableHeight: window.innerHeight - 250 },
    enabled: false,
  };
  /* 切换到查看用户权限页签时 Tree不能编辑 */
  let treeDisabled = !enabled;
  if (props && activeKey) {
    if (props.activeKey === '3') {
      treeDisabled = true;
    } else {
      treeDisabled = !enabled;
    }
  }
  const name = 'search';
  const treeProps = {
    ...commonBusiness.getTreeTypes('tree', props),
    isSearch: true,
    [`${name}Column`]: props[`${name}Column`],
    [`${name}Config`]: props[`${name}Config`],
    [`${name}Data`]: props[`${name}Data`],
    getFloatNum: props.getFloatNum,
    getSqlDropDownData: props.getSqlDropDownData,
    getSqlCondition: props.getSqlCondition,
    handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
    getDateFormat: props.getDateFormat,
    onDoubleClick: props.onDoubleClick,
    disabled: treeDisabled,
    sKeyName: 'key',
  };
  console.log('treeProps', treeProps);
  const sCopyGroup = commonUtils.isNotEmptyObject(commonFunc.showMessage(app.commonConst, 'sCopyGroup')) ? commonFunc.showMessage(app.commonConst, 'sCopyGroup') : '复制组权限';/* 复制组权限 */
  const sCopyUser = commonUtils.isNotEmptyObject(commonFunc.showMessage(app.commonConst, 'sCopyUser')) ? commonFunc.showMessage(app.commonConst, 'sCopyUser') : '复制人员权限';/* 复制组权限 */

  const tabLookUserPermission = commonFunc.showLocalMessage(props, 'tabLookUserPermission', '查看用户权限');
  const searchUserPermission = commonFunc.showLocalMessage(props, 'searchUserPermission', '查询用户权限');
  const searchGroupPermission = commonFunc.showLocalMessage(props, 'searchGroupPermission', '查询用户权限');
  const GroupPermisson = commonFunc.showLocalMessage(props, 'GroupPermisson', '组权限');

  /*   回带表单   */
  onReturnForm(form);
  return (
    <Form>
      <Layout>
        <Header className={styles.header}>
          <Toolbar {...props} />
        </Header>
        <Layout className={selfstyles.clayout}>
          <Content className={styles.content}>
            <Layout className={styles.clayoutJur} id="SysPermissionList">
              <div style={{
 width: '100%', height: '2px', borderBottom: '1px solid #d9d9d9', position: 'relative', zIndex: 2, top: '38px',
}}
              />
              <Row type="flex" justify="space-between">
                <Col span={9} style={{ }}>
                  <div id="slaveTabs">
                    <Tabs onChange={props.onTabChange} className={styles.slaveTabs} size="large" tabBarStyle={{ margin: "10 0px" }}>
                      <TabPane tab={GroupPermisson} key={2}>
                        <Row>
                          <Search placeholder={searchGroupPermission} allowClear onSearch={props.onSearchGroup} style={{ width: "64%", margin: "10px 1px" }} />
                        </Row>
                        <Row>
                          <Col span={24} key="1">
                            <div className="xly-bill-list">
                              <StaticEditTable {...groupProps} noVlist footer="hidden" />
                            </div>
                          </Col>
                        </Row>
                        <Row style={{ marginTop: "8px" }}>
                          <Col span={24} key="2">
                            <div className="xly-bill-list">
                              <StaticEditTable {...userGroupProps} footer="hidden" />
                            </div>
                          </Col>
                        </Row>
                      </TabPane>
                      <TabPane tab={tabLookUserPermission} key={3}>
                        <Row>
                          <Search placeholder={searchUserPermission} allowClear onSearch={props.onSearchUser} style={{ width: "64%", margin: "10px 1px" }} />
                        </Row>
                        <Row>
                          <Col span={24} key="3">
                            <div className="xly-bill-list">
                              <StaticEditTable {...userProps} footer="hidden" />
                            </div>
                          </Col>
                        </Row>
                        {/* <Row style={{ marginTop: '20px' }}> */}
                        {/*  <Col span={24} key="{userProps.name}Col" > */}
                        {/*    <StaticEditTable {...groupUserProps} footer="hidden" /> */}
                        {/*  </Col> */}
                        {/* </Row> */}
                      </TabPane>
                    </Tabs>
                  </div>
                </Col>
                <Col span={15} style={{ marginTop: 40, paddingLeft: "17px" }}>
                  <Row>
                    <Col span={24} className="xly-jurisdiction">
                      <StaticEditTree {...treeProps} />
                    </Col>
                  </Row>
                </Col>
              </Row>
            </Layout>
          </Content>
          <div>
            {groupModalVisible ? (
              <AntdDraggableModal
                title={sCopyGroup}
                visible={groupModalVisible}
                onOk={props.onCopyGroupModalOk}
                onCancel={props.onModalCance.bind(this, "groupModalVisible")}
                width={800}
                bodyStyle={{ height: 350, zIndex: 2000 }}
                okButtonProps={{ style: { marginRight: "5px" } }}
              >
                <div className="contextMenuStyle">
                  <FormItem className="searchMainForm">
                    <Row type="flex" style={{ height: "auto", overflow: "hidden" }}>
                      {commonUtils.isNotEmptyArr(sToGroupConfig)
                        ? sToGroupConfig.map(child => {
                            const sMemo = child.sName.toLowerCase().endsWith("memo");
                            let enabledNew = !child.bReadonly;
                            if (child.iTag === 1) {
                              enabledNew = false;
                            } else if (child.iTag === 3) {
                              enabledNew = true;
                            }
                            const showTypeProps = {
                              name: "slave",
                              form,
                              record: {},
                              sId: commonUtils.createSid(),
                              getSqlDropDownData: props.getSqlDropDownData,
                              getSqlCondition: props.getSqlCondition,
                              handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
                              getFloatNum: props.getFloatNum,
                              onChange: props.onChange,
                              getDateFormat: props.getDateFormat,
                              showConfig: child,
                              textArea: sMemo,
                              enabled: enabledNew,
                              dataValue: commonUtils.isNotEmptyObject(masterData) ? masterData[child.sName] : "",
                              bTable: true,
                              formRoute: props.formRoute,
                              formItemLayout: {},
                            };
                            return (
                              <Col key={child.sId} span={24} order={child.iOrder} className="ContextMenuCol" style={{ border: "1px solid #d3d3d3" }}>
                                <ShowType {...showTypeProps} />
                              </Col>
                            );
                          })
                        : ""}
                    </Row>
                  </FormItem>
                </div>
              </AntdDraggableModal>
            ) : (
              ""
            )}

            {userModalVisible ? (
              <AntdDraggableModal
                title={sCopyUser}
                visible={userModalVisible}
                onOk={props.onCopyUserModalOk}
                onCancel={props.onModalCance.bind(this, "userModalVisible")}
                width={800}
                bodyStyle={{ height: 350, zIndex: 2000 }}
                okButtonProps={{ style: { marginRight: "5px" } }}
              >
                <div className="contextMenuStyle">
                  <FormItem className="searchMainForm">
                    <Row type="flex" style={{ height: "auto", overflow: "hidden" }}>
                      {commonUtils.isNotEmptyArr(sToUserConfig)
                        ? sToUserConfig.map(child => {
                            const sMemo = child.sName.toLowerCase().endsWith("memo");
                            let enabledNew = !child.bReadonly;
                            if (child.iTag === 1) {
                              enabledNew = false;
                            } else if (child.iTag === 3) {
                              enabledNew = true;
                            }
                            const showTypeProps = {
                              name: "slave",
                              form,
                              record: {},
                              sId: commonUtils.createSid(),
                              getSqlDropDownData: props.getSqlDropDownData,
                              getSqlCondition: props.getSqlCondition,
                              handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
                              getFloatNum: props.getFloatNum,
                              onChange: props.onChange,
                              getDateFormat: props.getDateFormat,
                              showConfig: child,
                              textArea: sMemo,
                              enabled: enabledNew,
                              dataValue: commonUtils.isNotEmptyObject(masterData) ? masterData[child.sName] : "",
                              bTable: true,
                              formRoute: props.formRoute,
                              formItemLayout: {},
                            };
                            return (
                              <Col key={child.sId} span={24} order={child.iOrder} className="ContextMenuCol" style={{ border: "1px solid #d3d3d3" }}>
                                <ShowType {...showTypeProps} />
                              </Col>
                            );
                          })
                        : ""}
                    </Row>
                  </FormItem>
                </div>
              </AntdDraggableModal>
            ) : (
              ""
            )}
          </div>


        </Layout>
      </Layout>
    </Form>
  );
});

export default CommonBase(CommonJurisdictionEvent(SystemPermissionComponentInfo));