import React from 'react';
import { WeaInputSearch, WeaCheckbox } from 'ecCom'
import { Row , Col, Modal, Dropdown, Menu, Button } from "antd"

import SelectItemsWrapper from './selectItemsWrapper'

export const items = [
    {
        key: "1",
        title: "测试",
        checked: false
    },
    {
        key: "2",
        title: "测试2",
        checked: true
    }
]

export default class SelectItemModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            searchValue: ""
        }
    }

    handleShowChecked(value) {
        value = value == 1 ? true : false
        this.props.onShowChecked(value)
    }
    
    handleMenuClick(e) {
        if(e.key == "1") { //恢复默认设置 
            this.props.onRestoreDefault()
        } else if(e.key == "2") {
            this.props.onSetDefault()
        } else if(e.key == "3") {
            
        }
    }

    render(){
        const menu = (
            <Menu onClick={(e) => this.handleMenuClick(e)}>
              <Menu.Item key="1">恢复默认设置</Menu.Item>
              <Menu.Item key="2">设置默认设置</Menu.Item>
              {/* <Menu.Item key="3">操作日志</Menu.Item> */}
            </Menu>
          );
        return (
            <Modal visible={this.props.visible} width={800} footer={false} onCancel={this.props.onCancel}>
                <div style={{marginBottom: "20px", height: "47px", overflow: "hidden"}}>
                    <span style={{fontSize: "16px", fontWeight: "400"}}>导入字段设置</span>
                    <WeaInputSearch
                        style={{float: "right", marginRight: "30px"}}
                        placeholder={"请输入关键字"}
                        value={this.state.searchValue}
                        onChange={(value) => {
                            this.setState({searchValue: value})
                        }}
                        onSearch={(value) => {
                            this.props.onSearch(value)
                        }}
                        />
                </div>
                {this.props.children}
                
                <div style={{marginTop: "40px", overflow:"hidden", height: "50px", lineHeight: "50px"}}>
                    <div style={{float: "left"}}>
                        <WeaCheckbox content="只显示已选中字段" onChange={(value) => {this.handleShowChecked(value)}}/>
                    </div>
                    <div style={{float: "right"}}>
                        <Button type="primary" style={{marginRight: "10px"}} onClick={() => {this.props.onSave()}}>保存</Button>
                        <Dropdown.Button overlay={menu}>更多</Dropdown.Button>
                    </div>
                </div>
            </Modal>
        )
    }
}