import React from 'react'
import { Button, Modal } from 'antd';
import { WeaInput, WeaRangePicker, WeaTable} from 'ecCom'
import { logColumns, dataSource } from "../../common/columns"

export default class LogViewModal extends React.Component {
    constructor(props) {
        super(props)
        this.state ={
            value: ""
        }
    }
    render() {
        return (
        <Modal title="操作日志" visible={this.props.visible}
          onOk={() => alert("ok")} onCancel={this.props.onCancel}
          className="logViewModal"
          style={{ top: 150 }}
          width={'80%'} height={'50%'}
        >
          <div className="searchBar">
            <div className="searchBarItem searchDateRange">
              <div className="searchBarLabel">操作时间</div>
              <div>
                <WeaRangePicker
                  value={["2019-02-03", "2019-03-08"]}
                  onChange={v => this.setState({ value: v })}
                />
              </div>
            </div>
            <div className="searchBarItem">
              <div className="searchBarLabel">操作人</div>
              <div>
              <WeaInput
                id="test"
                style={{ width: 200 }}
                value={this.state.value}
                onChange={value => {
                  console.log(value);
                  this.setState({ value });
                }}
                customBlur={v => {
                  console.log("custom blur", v);
                }}
                onFocus={v => console.log("focus", v)}
                onBlur={v => console.log("blur", v)}
              />
              </div>
            </div>

            <div className="searchBarItem">
              <div className='searchBarLabel'>对象</div>
              <div>
              <WeaInput
                id="test"
                style={{ width: 200 }}
                value={this.state.value}
                onChange={value => {
                  console.log(value);
                  this.setState({ value });
                }}
                customBlur={v => {
                  console.log("custom blur", v);
                }}
                onFocus={v => console.log("focus", v)}
                onBlur={v => console.log("blur", v)}
              />
              </div>
            </div>

            <div className="searchBarItem">
              <div className='searchBarLabel'>操作类型</div>
              <div>
              <WeaInput
                id="test"
                style={{ width: 200 }}
                value={this.state.value}
                onChange={value => {
                  console.log(value);
                  this.setState({ value });
                }}
                customBlur={v => {
                  console.log("custom blur", v);
                }}
                onFocus={v => console.log("focus", v)}
                onBlur={v => console.log("blur", v)}
              />
              </div>
            </div>
            
            <div className="searchBarItem">
              <Button type="primary" className="searchBtn">搜索</Button>
            </div>
          </div>
          <WeaTable columns={logColumns} dataSource={dataSource} />
        </Modal>
        )
    }
}