// 设置页面大小
import React from 'react';
import {Modal, Radio, Select, Input } from 'antd';

const { Option } = Select;

export default class SettingsDocumentSize extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false,
      radioValue: "false",
      selectValue: "AB",
      high: 500,
      wide: 200
    }
  }

  componentDidMount() {
    this.props.onRef(this);
  }

  // 打开弹窗
  showModal = () => {
    this.setState({visible: true});
  }

  // 关闭弹窗
  handleCancel = () => {
    this.setState({visible: false});
  }

  // 确认设置
  handleOK = () => {
    let {radioValue, selectValue, high, wide} = this.state;
    var opts = {
			PaperKind: selectValue === "AB" ? "Custom" : "Custom",//自定义
			PaperWidth: wide,//宽度
			PaperHeight: high,//高度
			Landscape: radioValue//横向，纵向
		}
    this.props.ctlDom.ChangeDocumentSettings(opts);
    this.handleCancel();
  }

  radioOnChange = e => {
    this.setState({radioValue: e.target.value});
  }

  selectOnChange = e => {
    this.setState({selectValue: e}, () => {
      if (this.state.selectValue === "A3") {
        this.setState({high: 420, wide: 297});
      } else if (this.state.selectValue === "A4") {
        this.setState({high: 297, wide: 210});
      } else if (this.state.selectValue === "A5") {
        this.setState({high: 210, wide: 148});
      }else if (this.state.selectValue === "B4") {
        this.setState({high: 353, wide: 250});
      } else if (this.state.selectValue === "B5") {
        this.setState({high: 250, wide: 170});
      } else if (this.state.selectValue === "AB") {
        this.setState({high: 500, wide: 200});
      }
    });
  }

  handleHighOnChange = e => {
    this.setState({high: e.target.value, selectValue: "AB"});
  }

  handleWideOnChange = e => {
    this.setState({wide: e.target.value, selectValue: "AB"});
  }

  render() {
    let {visible, radioValue, selectValue, high, wide} = this.state;
    return (
      <Modal
        visible={visible}
        title="页面设置"
        onCancel={this.handleCancel}
        onOk={this.handleOK}
      >
        <div>
          <div>
            页面方向：<Radio.Group onChange={this.radioOnChange} value={radioValue}>
                      <Radio value="true">横向</Radio>
                      <Radio value="false">纵向</Radio>
                    </Radio.Group>
          </div>
          <div style={{margin: '24px 0'}}>
            页面大小：<Select value={selectValue} onChange={this.selectOnChange} style={{ width: 150 }}>
                      <Option value="A3">A3</Option>
                      <Option value="A4">A4</Option>
                      <Option value="A5">A5</Option>
                      <Option value="B4">B4</Option>
                      <Option value="B5">B5</Option>
                      <Option value="AB">自定义</Option>
                    </Select>
          </div>
          <div>
            页面尺寸：<span style={{marginRight: '30px'}}>高 <Input style={{width: '80px'}} value={high} onChange={this.handleHighOnChange} /> mm   </span>
            宽 <Input style={{width: '80px'}} value={wide} onChange={this.handleWideOnChange} /> mm
          </div>
        </div>
      </Modal>
    )
  }
}