import React, { Component } from 'react';
import fetch from 'dva/fetch';
import { SettingOutlined } from '@ant-design/icons';
import { Affix, Table, Checkbox, Input, Select, message, Tabs, Alert } from 'antd';
import styles from '@/index.less';

import * as commonUtils from '@/utils/utils';
import * as config from '@/utils/config';
import * as commonFunc from '@/components/Common/commonFunc';
import AntdDraggableModal from '@/components/Common/AntdDraggableModal';
import './oee.less';

const { Option } = Select;
const { TabPane } = Tabs;

class AffixMenuComponent extends Component {
  constructor(props) {
    super(props);
    const UserPersonalization = commonFunc.showMessage(props.app.commonConst, 'UserPersonalization');/* 用户个性化配置 */
    this.state = {
      top: 10,
      modalPanel: { title: UserPersonalization },
      modalVisible: false,
      modalData: [],
      modalContent: [], /* 面板展示内容 */
      modalContentData1: [],
      modalContentData2: [],
      modalContentData3: [],
      modalContentData4: [],
      modalContentData5: [],
      modalContentData6: [],
      modalContentData7: [],
      modalContentData8: [],
      modalContentData9: [],
      modalContentData10: [],
      roleShow: '', /* 角色 */
      roleSelectData: '', /* 选择的角色 */
    };
  }
  componentDidMount() {
    // this.initData();
  }
  componentWillReceiveProps() {
    // this.initData();
  }
  onCheckChange = (e) => {
    this.setState({
      indeterminate: false,
      checkValue: e.target.checked ? true : '',
    });
  };
  onCheckAll = (e, name, count, configId) => {
    const data = JSON.parse(JSON.stringify(this.state.modalData[name] || []));
    const temp = JSON.parse(JSON.stringify(this.state[`modalContentData${count}`] || []));
    const config = JSON.parse(JSON.stringify(this.state[`modalContentData_${configId}`] || []));
    data.forEach((item, idx) => {
      data[idx].bVisible = e.target.checked;
    });
    temp.forEach((item, idx) => {
      temp[idx].bVisible = e.target.checked;
    });
    config.forEach((item, idx) => {
      config[idx].bVisible = e.target.checked;
    });
    this.setState({
      modalData: { ...this.state.modalData, [name]: data },
      [`modalContentData${count}`]: temp,
      [`modalContentData_${configId}`]: config,
    });
  }
  initData() {
    const sModelData = commonUtils.isJSON(localStorage.getItem('oeeModelData')) ? JSON.parse(localStorage.getItem('oeeModelData')) : { sModelsId: '', formRoute: '' };
    const sActiveId = sModelData.sModelsId;
    // const sActiveId = commonUtils.isJSON(localStorage.getItem('oeeModelData'));
    const formSrcRoute = sModelData.formRoute;
    const url = `${config.server_host}configform/getConfigformData/${sActiveId}?sModelsId=${sActiveId}&sName=${formSrcRoute}`;
    const { token } = this.props.app;
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        authorization: token,
      },
    };
    fetch(url, options).then(response => response.json()).then((json) => {
      if (json.code === 1) {
        const data = json.dataset.rows[0];
        this.setState({ modalData: data });
        Object.keys(data).forEach((child) => {
          const spitArr = commonUtils.isNotEmptyObject(child) ? child.split('_') : [];
          /* 数据增加key属性用于table展示 */
          for (const item of data[child]) {
            item.key = item.sId;
          }
          this.setState({ [`modalContentData_${spitArr[1]}`]: data[child] });
        });
      } else {
        // console.log(json.msg);
      }
    });
    if (this.props.app.userinfo.sType === 'sysadmin') {
      const chooseRole = commonFunc.showMessage(this.props.app.commonConst, 'chooseRole');/* 选择角色 */
      const chooseOneRole = commonFunc.showMessage(this.props.app.commonConst, 'chooseOneRole');/* 请选择一个角色 */
      const roleUrl = `${config.server_host}configform/getLogininfosupplygroup?sModelsId=${sActiveId}&sName=${formSrcRoute}`;
      /* 获取角色下拉 */
      fetch(roleUrl, options).then(response => response.json()).then((json) => {
        if (json.code === 1) {
          const data = json.dataset.rows;
          const oPtinon = [];
          for (const child of data) {
            oPtinon.push(<Option key={child.sId} value={child.sId}>{child.sName}</Option>);
          }
          const roleShow = (
            <Alert
              message={(
                <div className={styles.affixMenuShow}>
                  <span>{chooseRole}</span>
                  <Select
                    style={{ width: 'calc(100% - 58px)' }}
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    onChange={e => this.handleSelectChange(e)}
                    placeholder={chooseOneRole}
                  >
                    {oPtinon}
                  </Select>
                </div>

              )}
              type="info"
              showIcon
            />
          );
          this.setState({ roleShow });
        } else {
          // console.log(json.msg);
        }
      });
    }
  }
  handleClick=() => {
    this.initData();
    const sModelData = commonUtils.isJSON(localStorage.getItem('oeeModelData')) ? JSON.parse(localStorage.getItem('oeeModelData')) : { sModelsId: '', formRoute: '' };
    const { sModelsId } = sModelData;
    const addStateData = {};
    const sessionKeys = Object.keys(sessionStorage); /* 找到配置 */
    for (const key of sessionKeys) { /* 通过缓存中key的name匹配config配置，通过config配置获取配置sId,通过配置sId在state中找到对应的数据集 */
      const keyArr = commonUtils.isNotEmptyObject(key) ? key.split('_') : [];
      if (commonUtils.isNotEmptyArr(keyArr) && sModelsId === keyArr[0]) { /* 防止多页签name名重复导致缓存匹配错误 */
        const tablename = keyArr[1]; /* 取表名称 */
        const { [`${tablename}Config`]: tableConfig } = this.props;
        if (commonUtils.isNotEmptyObject(tableConfig)) {
          const { [`modalContentData_${tableConfig.sId}`]: tableData } = this.state;
          /* 取缓存中的数据 */
          if (commonUtils.isJSON(sessionStorage[key]) && JSON.parse(sessionStorage[key]).length > 0) {
            const sessionData = JSON.parse(sessionStorage[key]);
            if (commonUtils.isNotEmptyArr(sessionData) && commonUtils.isNotEmptyArr(tableData)) {
              tableData.forEach((item, index) => {
                const iIndex = sessionData.findIndex(session => session.dataIndex === item.sName);
                if (iIndex > -1) {
                  const addState = {};
                  if (addState.iFitWidth !== sessionData[iIndex].width) {
                    addState.iFitWidth = sessionData[iIndex].width;
                    tableData[index] = { ...tableData[index], ...addState };
                  }
                }
              });
              addStateData[`modalContentData_${tableConfig.sId}`] = tableData;
            }
          }
        }
      }
    }

    this.setState({ modalVisible: true, ...addStateData });
  };

  handlePpopUpPaneCancel=() => {
    this.setState({ modalVisible: false });
  };

  handleChange=(value, count, record, name) => {
    const data = JSON.parse(JSON.stringify(this.state[`modalContentData_${count}`]));
    const dataMap = data.filter(item => (item.key === record.key))[0];
    if (dataMap !== undefined) {
      dataMap[`${name}`] = value;
    }
    this.setState({ [`modalContentData_${count}`]: data });
  };

  handleSelectChange=(value) => {
    /* 调用接口 */
    this.setState({ roleSelectData: value });
    // const sActiveId = this.props.app.currentPane.formId;
    const sModelData = commonUtils.isJSON(localStorage.getItem('oeeModelData')) ? JSON.parse(localStorage.getItem('oeeModelData')) : { sModelsId: '', formRoute: '' };
    const sActiveId = sModelData.sModelsId;
    const formSrcRoute = sModelData.formRoute;
    const url = `${config.server_host}configform/getConfigformData/${sActiveId}?roleSelectId=${value}&&sModelsId=${sActiveId}&sName=${formSrcRoute}`;
    const { token } = this.props.app;
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        authorization: token,
      },
    };
    fetch(url, options).then(response => response.json()).then((json) => {
      if (json.code === 1) {
        const data = json.dataset.rows[0];
        this.setState({ modalData: data });
        Object.keys(data).forEach((child) => {
          const spitArr = commonUtils.isNotEmptyObject(child) ? child.split('_') : []; /* 取菜单ID */
          /* 数据增加key属性用于table展示 */
          for (const item of data[child]) {
            item.key = item.sId;
          }
          this.setState({ [`modalContentData_${spitArr[1]}`]: data[child] });
        });
      } else {
        // console.log(json.msg);
      }
    });
  };

  handleOk=() => {
    const sModelData = commonUtils.isJSON(localStorage.getItem('oeeModelData')) ? JSON.parse(localStorage.getItem('oeeModelData')) : { sModelsId: '', formRoute: '' };
    const sActiveId = sModelData.sModelsId;
    const formSrcRoute = sModelData.formRoute;
    const url = `${config.server_host}configform/sHandleConfigform?sModelsId=${sActiveId}&sName=${formSrcRoute}`;
    const { token } = this.props.app;
    const { roleShow, roleSelectData, modalData } = this.state;
    // const pleaseChooseRole = commonFunc.showMessage(this.props.app.commonConst, 'pleaseChooseRole');/* 请选择角色 */
    // if (roleShow !== '' && roleSelectData === '') {
    //   message.warning(pleaseChooseRole);
    //   return;
    // }
    const submitData = {};
    // let count = 1;
    let num = 0;

    Object.keys(modalData).forEach((item) => {
      const splitArr = commonUtils.isNotEmptyObject(item) && commonUtils.isNotEmptyArr(item.split('_')) ? item.split('_') : [];
      const configId = commonUtils.isNotEmptyArr(splitArr) ? splitArr[1] : '';
      const { [`modalContentData_${configId}`]: tableData } = this.state;
      if (commonUtils.isNotEmptyArr(tableData) && tableData.length > 0) {
        num = 0;
        for (const child of tableData) {
          if (num === 0) {
            submitData[`${child.sParentId}`] = [];
          }
          if (child.bVisible) {
            submitData[`${child.sParentId}`].push(child);
          }
          num += 1;
        }
      }
    });

    let value = '';
    if (roleShow !== '') {
      value = {
        handleType: 'group',
        sJurisdictionClassifyId: roleSelectData,
        handleData: submitData,
        bDefault: commonUtils.isEmpty(roleSelectData) ? true : this.state.checkValue, /* bDefault为true代表更新到后台配置库里 */
      };
    } else {
      value = {
        handleType: 'user',
        handleData: submitData,
      };
    }
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        authorization: token,
      },
      body: JSON.stringify(value),
    };
    const { dispatch } = this.props;
    fetch(url, options).then(response => response.json()).then((json) => {
      if (json.code === 1) {
        message.success(json.msg);
        this.handlePpopUpPaneCancel();
      } else if (json.code === -2) {
        dispatch({ type: 'app/throwError', payload: json });
      }
    });
  };

  renderColumns=(text, name, count, record) => {
    if (name === 'bVisible') {
      return <Checkbox defaultChecked={text} checked={text} onChange={e => this.handleChange(e.target.checked, count, record, name)} />;
    } else {
      let flag = false;
      if (name === 'showName' || name === 'sName') {
        flag = true;
      }
      return <Input value={text} disabled={flag} onChange={e => this.handleChange(e.target.value, count, record, name)} />;
    }
  };

  render() {
    const { modalData, roleShow } = this.state;
    const { app, sModelsType } = this.props;
    let checkAll = '';
    // const { userinfo } = app;
    // const pane = app.panes.filter(paneTmp => paneTmp.key === sTabId)[0];
    const modalContent = [];
    let count = 1;
    let checkBoxShow = '';
    const columniOrder = commonFunc.showMessage(app.commonConst, 'columniOrder');/* 排序 */
    const columnShowName = commonFunc.showMessage(app.commonConst, 'columnShowName');/* 显示名 */
    // const columnChinese = commonFunc.showMessage(app.commonConst, 'columnChinese');/* 显示名 */
    // const columnEnglish = commonFunc.showMessage(app.commonConst, 'columnEnglish');/* 显示名 */
    // const columnBig5 = commonFunc.showMessage(app.commonConst, 'columnBig5');/* 显示名 */
    const columniFitWidth = commonFunc.showMessage(app.commonConst, 'columniFitWidth');/* 宽度 */
    const columnbVisible = commonFunc.showMessage(app.commonConst, 'columnbVisible');/* 是否显示 */
    const columnsName = commonFunc.showMessage(app.commonConst, 'columnsName');/* 字段名 */
    const isDefault = commonFunc.showMessage(app.commonConst, 'isDefault');/* 是否设置默认 */
    // eslint-disable-next-line no-unused-vars
    Object.keys(modalData).forEach((child, i) => {
      const splitArr = commonUtils.isNotEmptyObject(child) && commonUtils.isNotEmptyArr(child.split('_')) ? child.split('_') : [];
      const configName = commonUtils.isNotEmptyArr(splitArr) ? splitArr[0] : '';
      const configId = commonUtils.isNotEmptyArr(splitArr) ? splitArr[1] : '';
      let childTable = '';
      let dataSource = [];
      if (commonUtils.isNotEmptyObject(configId)) { /*  从缓存中取宽度 */
        dataSource = this.state[`modalContentData_${configId}`];
      } else {
        dataSource = this.state[`modalContentData${count}`];
      }
      const columns = [{
        title: columniOrder,
        dataIndex: 'iOrder',
        render: (text, record) => this.renderColumns(text, 'iOrder', configId, record),
        width: 40,
      }, {
        title: columniFitWidth,
        dataIndex: 'iFitWidth',
        render: (text, record) => this.renderColumns(text, 'iFitWidth', configId, record),
        width: 40,
      }, {
        title: columnShowName,
        dataIndex: 'showName',
        render: (text, record) => this.renderColumns(text, 'showName', configId, record),
        width: 100,
      }];
      if (this.props.app.userinfo.sType === 'sysadmin' || true) { /* 管理员显示字段名 */
        columns.push({
          title: columnsName,
          dataIndex: 'sName',
          render: (text, record) => this.renderColumns(text, 'sName', configId, record),
          width: 80,
        });
      }
      if (this.props.app.userinfo.sType === 'sysadmin' || true) { /* 管理员设置列是否显示 */
        columns.push({
          title: columnbVisible,
          dataIndex: 'bVisible',
          render: (text, record) => this.renderColumns(text, 'bVisible', configId, record),
          width: 80,
        });
      }
      if (this.props.app.userinfo.sType === 'sysadmin' || true) { /* 配置选择框 */
        checkBoxShow = <span>{isDefault}&nbsp;&nbsp;<Checkbox defaultChecked={false} onChange={this.onCheckChange} /></span>;
        let visible = 0;
        const len = dataSource ? dataSource.length : 0;
        for (let i = 0; i < len; i += 1) {
          if (dataSource[i].bVisible) {
            visible += 1;
          }
        }
        checkAll = <span>全选&nbsp;&nbsp;<Checkbox indeterminate={visible !== len && visible} defaultChecked={visible === len} onChange={e => this.onCheckAll(e, child, count, configId)} /></span>;
      }
      // let dataSource = [];
      // if (commonUtils.isNotEmptyObject(configId)) { /*  从缓存中取宽度 */
      //   dataSource = this.state[`modalContentData_${configId}`];
      // } else {
      //   dataSource = this.state[`modalContentData${count}`];
      // }
      /* 动态列解析 将字段表头换成 动态列返的 */
      if (!(commonUtils.isNotEmptyObject(sModelsType) && !sModelsType.includes('dynamicList'))) {
        const { slaveConfig } = this.props;
        const columnConfig = commonUtils.isNotEmptyObject(slaveConfig) ? slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.showName !== '' && !(item.sControlName !== '' && item.sControlName.indexOf('Btn') > -1)) : [];
        /* 动态列 需要将中文名称替换掉 */
        if (commonUtils.isNotEmptyArr(columnConfig) && dataSource && dataSource.length === columnConfig.length) {
          columnConfig.forEach((item, iIndex) => {
            // dataSource[iIndex].sName = item.sName;
            dataSource[iIndex].showName = item.showName;
            dataSource[iIndex].sChinese = item.sChinese;
          });
        }
      }

      childTable = (
        <TabPane tab={configName} key={count}>
          <div key={count} className={styles.affixMenuTableAll}>
            {checkBoxShow}
            &nbsp;&nbsp;&nbsp;
            {checkAll}
            <Table
              bordered
              columns={columns}
              dataSource={dataSource}
              pagination={false}
              scroll={{ y: 310 }}
              className={styles.affixMenuTable}
            />
          </div>
        </TabPane>
      );
      modalContent.push(childTable);
      count += 1;
    });
    return (
      <div className="oeeAffixContainer">
        <Affix offsetTop={this.state.top}>
          <div className="oeeAffixContainerBtn">
            <SettingOutlined onClick={this.handleClick.bind(this)} />
          </div>
          {(true) ?
            <AntdDraggableModal
              key={() => Math.random()}
              title={Object.keys(this.state.modalPanel).length > 0 ? this.state.modalPanel.title : ''}
              visible={this.state.modalVisible}
              onCancel={this.handlePpopUpPaneCancel.bind(this)}
              onOk={this.handleOk.bind(this)}
              width={1000}
            >
              <div className={styles.modalsContent}>
                {
                  roleShow !== '' ? roleShow : ''
                }
                <div id="slaveTabs">
                  <Tabs className={styles.slaveTabs}>
                    {modalContent}
                  </Tabs>
                </div>
              </div>
            </AntdDraggableModal>
            : ''}
        </Affix>
      </div>
    );
  }
}

export default AffixMenuComponent;