/* eslint-disable array-callback-return,no-undef */
import React, { Component } from 'react';
import { Table, Button, Checkbox, Input, message } from 'antd-v4';
import config from '@/utils/config';
import styles from '@/index.less';
import AntdDraggableModal from '@/components/Common/AntdDraggableModal';

const InputGroup = Input.Group;
const { TextArea } = Input;

class CheckModel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: props.visible,
      sActiveId: props.sActiveId, /* 窗体Id */
      sReturnMessage: props.sReturnMessage,
      sCheckModelId: props.sCheckModelId,
      loading: false,
      data: [],
      dataPerson: [],
      listVisible: false,
      inputValue: '',
      checkDisplay: '',
      checked: '',
      sTbName: props.sTbName,
      sBillKey: props.sBillKey,
      sBillNo: props.sBillNo,
      sCheckMemo: '',
    };
    this.header = {};
  }


  componentWillMount() {
    const { systemData } = this.props.app;
    const ckxTmpCheck = systemData.filter(item => (item.sName === 'CkxTmpCheck'))[0];
    const checkDisplay = ckxTmpCheck.sValue === '0' ? 'none' : 'block';
    this.setState({ checkDisplay });
  }


  componentWillReceiveProps(nextProps) {
    const { gdsformconst, sReturnMessage, sBillNo } = nextProps;
    if (sReturnMessage.length > 0) {
      const data = [];
      sReturnMessage.forEach((child, i) => {
        const sName = child.split('-');
        data.push({
          key: i,
          condition: sName[0],
          sMemo: sName[1],
        });
      });
      this.setState({ data, sBillNo });
    }
    const checkCondition = gdsformconst.filter(item => (item.sName === 'checkCondition'));
    const checkSmemo = gdsformconst.filter(item => (item.sName === 'checkSmemo'));
    const checkUserId = gdsformconst.filter(item => (item.sName === 'checkUserId'));
    const checkUserName = gdsformconst.filter(item => (item.sName === 'checkUserName'));
    if (checkCondition.length > 0) {
      this.header.checkCondition = checkCondition[0].showName;
    }
    if (checkSmemo.length > 0) {
      this.header.checkSmemo = checkSmemo[0].showName;
    }
    if (checkUserId.length > 0) {
      this.header.checkUserId = checkUserId[0].showName;
    }
    if (checkUserName.length > 0) {
      this.header.checkUserName = checkUserName[0].showName;
    }
    this.setState({
      visible: nextProps.visible,
      sCheckModelId: nextProps.sCheckModelId,
      sReturnMessage: nextProps.sReturnMessage,
    });
  }
  /* 取消 */
  handleCancel = () => {
    this.setState({ visible: false });
  }

  handleChange = (e) => {
    this.setState({ checked: e.target.checked, sCheckMemo: e.target.value });
  }

  handleOk = () => {
    const {
      checked, sCheckModelId, sTbName, sBillKey, sBillNo, sReturnMessage, dataPerson, sCheckMemo,
    } = this.state;
    const { sActiveId } = this.state;
    const { token } = this.props.app;
    const url = `${config.server_host}business/doExamine?sModelsId=${sActiveId}`;
    if (checked === true) {
      const paramsMap = {
        iFlag: 1,
        iTmpCheck: 1,
        sFormGuid: sActiveId,
        sGuid: this.props.app.currentPane.checkedId,
      };
      const value = {
        sClientType: '1',
        sProName: sBillKey,
        paramsMap,
      };
      const options = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          authorization: token,
        },
        body: JSON.stringify(value),
      };
      fetch(url, options).then(response => response.json()).then((json) => {
        if (json.code === 1) {
          message.success(json.msg);
        } else {
          message.error(json.msg);
        }
      });
    } else {
      let dataPersonString = '';
      for (const item of dataPerson) {
        dataPersonString = `${dataPersonString},${item.userId}`;
      }
      dataPersonString = dataPersonString.substring(1);
      const paramsMap = {
        sFormGuid: sActiveId,
        sBillKey,
        sTbName,
        sGuid: this.props.app.currentPane.checkedId,
        sBillNo,
        sCheckCondition: sReturnMessage,
        sMemo: sCheckMemo,
        sCheckModelGuid: sCheckModelId,
        sCheckPerson: dataPersonString,
      };

      const value = {
        sClientType: '1',
        sProName: 'Sp_System_AutoSendCheckMsg',
        paramsMap,
      };
      const options = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          authorization: token,
        },
        body: JSON.stringify(value),
      };
      fetch(url, options).then(response => response.json()).then((json) => {
        if (json.code === 1) {
          message.success(json.msg);
        } else {
          message.error(json.msg);
        }
      });
    }
    this.setState({ visible: false });
  };

  handlePpopUp = () => {
    const { sCheckModelId } = this.props;
    const { sActiveId } = this.state;
    const { token } = this.props.app;
    const url = `${config.server_host}checkModel/getUserListByModelId/${sCheckModelId}?sModelsId=${sActiveId}`;
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        authorization: token,
      },
    };
    fetch(url, options).then(response => response.json()).then((json) => {
      const { dataPerson } = this.state;
      if (json.code === 1) {
        const { rows } = json.dataset;
        rows.forEach((child) => {
          dataPerson.push({
            key: child.sUserId,
            userId: child.sUserId,
            UserName: child.sUserName,
          });
        });
        this.setState({ dataPerson });
        message.success(json.msg);
      } else {
        message.error(json.msg);
      }
    });
    this.setState({ listVisible: true });
  };

  handleDoubleClick = (record) => {
    this.setState({ inputValue: record.UserName, listVisible: false });
  };

  render() {
    const { loading } = this.state;
    const {
      visible, data, listVisible, dataPerson, inputValue,
    } = this.state;
    const columns = [{
      title: this.header.checkCondition !== undefined ? this.header.checkCondition : '审核条件',
      dataIndex: 'condition',
      key: 'condition',
    }, {
      title: this.header.checkSmemo !== undefined ? this.header.checkSmemo : '备注',
      dataIndex: 'sMemo',
      key: 'sMemo',
    }];
    const columnsPerson = [{
      title: this.header.checkUserId !== undefined ? this.header.checkUserId : '人员编号',
      dataIndex: 'userId',
      key: 'userId',
    }, {
      title: this.header.checkUserName !== undefined ? this.header.checkUserName : '人员名称',
      dataIndex: 'UserName',
      key: 'UserName',
    }];
    return (
      <div>
        {
          visible ?
            <AntdDraggableModal
              zIndex={999}
              visible={visible}
              title="审核"
              onCancel={this.handleCancel}
              footer={[
                <Button key="back" onClick={this.handleCancel}>关闭</Button>,
                <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
                 确定
                </Button>,
            ]}
            >
              <Table columns={columns} dataSource={data} pagination={false} className={styles.checkTable} />
              <div style={{ display: this.state.checkDisplay }}>
                <Checkbox onChange={this.handleChange}>允许临时审核通过</Checkbox>
              </div>
              <TextArea rows={4} onChange={this.handleChange} />
              <InputGroup compact className={styles.checkInputGroup}>
                <Input style={{ width: '90%' }} value={inputValue} disabled />
                <Button onClick={this.handlePpopUp}>+</Button>
              </InputGroup>
            </AntdDraggableModal>
          : ''
        }
        {
          listVisible ?
            <AntdDraggableModal
              zIndex={1000}
              visible={listVisible}
              footer={null}
              onClick={this.handleCancel}
            >
              <Table
                columns={columnsPerson}
                dataSource={dataPerson}
                onRow={(record) => { return { onDoubleClick: () => { this.handleDoubleClick(record); } }; }}
              />
            </AntdDraggableModal>
            : ''
        }
      </div>
    );
  }
}
export default CheckModel;