import React from "react"
import { Icon, Menu, Input } from "antd"
import styles from "./index.css"
const { Search } = Input

export default class TableColumnSetting extends React.Component {
  constructor (props) {
    super(props)
    this.defaultTableCode = "table"
  }

  setSortedInfo = (e, type) => {
    e.domEvent.stopPropagation()
    this.props.setSortData(type)
  }

  setSearchInfo = (val) => {
    this.props.setSearchInfo(val)
  }

  render () {
    const { column = {} } = this.props.colConfig || {}
    const { ENUM, FORMAT, NO_SORT } = column
    const sortDisabled = NO_SORT || ENUM || FORMAT

    return (
      <div className={styles.settingMenu}>
        <Menu mode="vertical" style={{ boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)" }}>
          <Menu.Item key="ascend" disabled={sortDisabled} onClick={(e) => this.setSortedInfo(e, 0)}>
            <a target="_blank" rel="noopener noreferrer">
              <Icon type="sort-ascending" />
              正序
            </a>
          </Menu.Item>
          <Menu.Item key="descend" disabled={sortDisabled} onClick={(e) => this.setSortedInfo(e, 1)}>
            <a target="_blank" rel="noopener noreferrer">
              <Icon type="sort-descending" />
              倒序
            </a>
          </Menu.Item>
          <Menu.Divider />
        </Menu>
        <Search
          placeholder="查询"
          onSearch={value => this.setSearchInfo(value)}
          onChange={e => this.setSearchInfo(e.target.value)}
          style={{ width: 120 }}
        />
      </div>
    )
  }
}