// 电子病历工具库
import React from 'react';
import {Collapse, Row, Col, InputNumber, Button, Popover, Checkbox} from 'antd';
const { Panel } = Collapse;

export default class EMRToolLibrary extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      tableRow: 1, 
      tableColumn: 1,
      deleteVisible: false,
      checkValue: []
    }
  }

	handleRowOnChange = e => {
		this.setState({tableRow: e});
	}

	handleColumnOnChange = e => {
		this.setState({tableColumn: e});
	}
	
	handleVisibleChange = visible => {
    this.setState({ visible });
  };

	// 确认插入表格
	handleDefiniteInsertion = (tableRow, tableColumn) => {
		let caseTemplateThis = this.props.caseTemplateThis ? this.props.caseTemplateThis : {};
		this.hide();
		caseTemplateThis.insertTable(tableRow, tableColumn);
	}

	hide = () => {
    this.setState({
      visible: false,
    });
  };

  handleDeleteVisibleChange = visible => {
    this.setState({ deleteVisible: visible });
  };
  
  handlehideDelete = () => {
    this.setState({
      deleteVisible: false,
    });
  }

  handleCheckboxChange = (checkedValues) => {
    this.setState({checkValue: checkedValues})
  }

  handleOk = () => {
    let caseTemplateThis = this.props.caseTemplateThis ? this.props.caseTemplateThis : {};
    let {checkValue} = this.state;
    let obj = {}
    for(var i = 0; i < checkValue.length; i++) {
      obj[checkValue[i]] = "false"
    }
    this.handlehideDelete();
    caseTemplateThis.SetTableBorder(obj)
  }

  render() {
    let caseTemplateThis = this.props.caseTemplateThis ? this.props.caseTemplateThis : {};
    let {tableRow, tableColumn, visible, deleteVisible, checkValue} = this.state;

		let setTableContent = (
			<div>
				<div>
					行：<InputNumber min={1} value={tableRow} onChange={this.handleRowOnChange}  />
				</div>
				<div style={{margin: '12px 0'}}>
					列：<InputNumber min={1} value={tableColumn} onChange={this.handleColumnOnChange} />
				</div>
				<div style={{borderTop: '1px solid #e8e8e8', paddingTop: "12px", textAlign: "center"}}>
					<Button onClick={() => this.handleDefiniteInsertion(tableRow, tableColumn)}>确定</Button>
				</div>
			</div>
    );
    
    let deleteTableBorder = (
      <div>
        <div>
          <Checkbox.Group value={checkValue} style={{ width: '100%' }} onChange={this.handleCheckboxChange}>
            <Row>
              <Col span={12}>
                <Checkbox value="BorderTop">上</Checkbox>
              </Col>
              <Col span={12}>
                <Checkbox value="BorderBottom">下</Checkbox>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Checkbox value="BorderLeft">左</Checkbox>
              </Col>
              <Col span={12}>
                <Checkbox value="BorderRight">右</Checkbox>
              </Col>
            </Row>
          </Checkbox.Group>
				</div>
				<div style={{borderTop: '1px solid #e8e8e8', paddingTop: "12px", textAlign: "center"}}>
					<Button onClick={this.handleOk}>确定</Button>
				</div>
      </div>
    )
    return (
      <div>
        <Collapse bordered={false} defaultActiveKey={['1']}>
          <Panel header="表格" key="1">
            <Row>
              <Col span={8}>
                <Popover placement="bottomLeft" title="插入表格" 
                  content={setTableContent} 
                  trigger="click"
                  visible={visible}
                  onVisibleChange={this.handleVisibleChange}
                >
                  <span className="span">插入表格</span>
                </Popover>
              </Col>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.InsertPageBreak}>插入分页</span>
              </Col>
              <Col span={8}>
                <span className="span" style={{color: "red"}} onClick={() => caseTemplateThis.detailTable('Table_DeleteTable')}>删除表格</span>
              </Col>
            </Row>
            <Row style={{margin: "12px 0"}}>
              <Col span={8}>
                <span className="span" onClick={() => caseTemplateThis.insertTableRow('Table_InsertRowUp')}>插入行(上)</span>
              </Col>
              <Col span={8}>
                <span className="span" onClick={() => caseTemplateThis.insertTableRow('Table_InsertRowDown')}>插入行(下)</span>
              </Col>
              <Col span={8}>
                <span className="span" style={{color: "red"}} onClick={() => caseTemplateThis.detailTable('Table_DeleteRow')}>删除行</span>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <span className="span" onClick={() => caseTemplateThis.insertTableRow('Table_InsertColumnLeft')}>插入列(左)</span>
              </Col>
              <Col span={8}>
                <span className="span" onClick={() => caseTemplateThis.insertTableRow('Table_InsertColumnRight')}>插入列(右)</span>
              </Col>
              <Col span={8}>
                <span className="span" style={{color: "red"}} onClick={() => caseTemplateThis.detailTable('Table_DeleteColumn')}>删除列</span>
              </Col>
            </Row>
            <Row style={{marginTop: "12px"}}>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.Splittorows}>拆分成行</span>
              </Col>
              <Col span={8}>
                <span className="span"onClick={caseTemplateThis.Splittocols}>拆分成列</span>
              </Col>
              <Col span={8}>
                <Popover placement="bottomLeft" title="删除表格边框" 
                  content={deleteTableBorder} 
                  trigger="click"
                  visible={deleteVisible}
                  onVisibleChange={this.handleDeleteVisibleChange}
                >
                  <span className="span" style={{color: "red"}}>删除表格边框</span>
                </Popover>
              </Col>
            </Row>
          </Panel>
          <Panel header="医学表达式" key="2">
            <Row>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.MyInsertMedicalExpression1}>通用公式</span>
              </Col>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.MyInsertMedicalExpression8}>标尺公式</span>
              </Col>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.MyInsertMedicalExpression11}>分数公式</span>
              </Col>
            </Row>
            <Row style={{margin: "12px 0"}}>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.MyInsertMedicalExpression7}>胎心图公式</span>
              </Col>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.MyInsertMedicalExpression5}>瞳孔图公式</span>
              </Col>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.MyInsertMedicalExpression6}>光定位图公式</span>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.MyInsertMedicalExpression2}>月经史公式1</span>
              </Col>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.MyInsertMedicalExpression3}>月经史公式2</span>
              </Col>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.MyInsertMedicalExpression4}>月经史公式3</span>
              </Col>
            </Row>
            <Row style={{marginTop: "12px"}}>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.MyInsertMedicalExpression10}>乳牙牙位图公式</span>
              </Col>
              <Col span={8}>
                <span className="span" onClick={caseTemplateThis.MyInsertMedicalExpression9}>恒牙牙位图公式</span>
              </Col>
            </Row>
          </Panel>
          <Panel header="特殊符号" key="3">
            
          </Panel>
        </Collapse>
      </div>
    )
  }
}