import React from 'react'
import { Checkbox, Button, Row, Col } from "antd"
import { WeaInput, WeaDatePicker, WeaSelect, WeaCheckbox } from "ecCom"
const CheckboxGroup = Checkbox.Group;
import moment from "moment";

import domtoimage from 'dom-to-image';
import { saveAs } from 'file-saver';


export default class BaseForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dateValue: moment().format('YYYY-MM-DD HH:mm:ss'),
            latitudeValue: "0",
            nodeValue: "1",
            hierarchyValue: "5",
            checked: "1"

        }
    }


    //导出架构图
    exportImage = () => {
        const node = document.getElementById("node");
        domtoimage.toBlob(node).then((blob) => {
            // 调用file-save方法 直接保存图片
            saveAs(blob, '组织架构.png')
        })
    }

    //查询
    selectProps = () => {
        const params = this.state;
        this.props.getSearch(params);
    }



    render() {
        const dimension = [
            {
                "key": "0",
                "selected": false,
                "showname": "行政组织",
            }, {
                "key": "1",
                "selected": false,
                "showname": "虚拟组织",
            }];

        const node = [
            {
                "key": "1",
                "selected": false,
                "showname": "集团",
            }, {
                "key": "2",
                "selected": false,
                "showname": "部门",
            }]

        const hierarchy = [
            {
                "key": "1",
                "selected": false,
                "showname": "一级",
            }, {
                "key": "2",
                "selected": false,
                "showname": "二级",
            }, {
                "key": "3",
                "selected": false,
                "showname": "三级",
            }, {
                "key": "4",
                "selected": false,
                "showname": "四级",
            },{
                "key": "5",
                "selected": false,
                "showname": "五级",
            }]

        const { dateValue, latitudeValue, nodeValue, hierarchyValue, checked } = this.state;

        return (
            <div style={{ "width": "1100px" }}>
                <div style={{ padding: "15px", display: "inline-block" }}>
                    数据日期 : &nbsp; &nbsp;
                    <WeaDatePicker
                        locale={{ firstDayOfWeek: 1 }}
                        showTime={{ format: "HH:mm:ss" }}
                        format="yyyy-MM-dd HH:mm:ss"
                        value={dateValue}
                        onChange={value => this.setState({ dateValue: value })}
                        needSecond={true}
                    />
                </div>
                <div style={{ padding: "15px", display: "inline-block" }}>
                    维度 : &nbsp; &nbsp;
                    <WeaSelect
                        style={{ width: 86 }}
                        options={dimension}
                        value={latitudeValue}
                        viewAttr={3}
                        onChange={v => {
                            this.setState({ latitudeValue: v })
                        }}
                    />
                </div>
                <div style={{ padding: "15px", display: "inline-block" }}>
                    根节点 : &nbsp;&nbsp;
                    <WeaSelect
                        options={node}
                        style={{ width: 60 }}
                        value={nodeValue}
                        viewAttr={3}
                        onChange={v => {
                            this.setState({ nodeValue: v })
                        }}
                    />
                </div>
                <div style={{ padding: "20px", display: "inline-block" }}>
                    显示层级 : &nbsp;&nbsp;
                    <WeaSelect
                        options={hierarchy}
                        value={hierarchyValue}
                        style={{ width: 60 }}
                        viewAttr={3}
                        onChange={v => {
                            this.setState({ hierarchyValue: v })
                        }}
                    />
                </div>
                <div style={{ padding: "15px", display: "inline-block" }}>
                    <WeaCheckbox id="test" content="显示虚拟组织" value={checked}
                        onChange={value => {
                            this.setState({ checked: value });
                        }} />
                </div>
                <Button type='primary' onClick={() => this.selectProps()}>查询</Button>
                <Button style={{ "marginLeft": "15px" }} type='primary' onClick={() => this.exportImage()}>导出</Button>
            </div>
        )
    }
}