import {
  WeaFormItem,
  WeaTab,
  WeaTableEdit
} from 'ecCom'

import {
  Spin,
  Button,
  Tooltip,
  Row, Col, Select
} from 'antd'


import { chunk, isEmpty } from 'lodash';
import { toJS } from "mobx";
const Option = Select.Option;

export default class VersionsSlider extends React.Component {

  componentDidMount() {

  }

  render() {
    const {
      versionList,
      handleChange
    } = this.props;

    const newData = chunk(versionList.datas, 2);


    return (
      <div style={{ "marginTop": "50px", "paddingLeft": "30px", "height": "30px", "lineHeight": "30px", "paddingRight": "30px" }}>
        <Row>
          <Col span={8}>
            <p>操作人: {versionList.operateName}</p>
          </Col>
          <Col span={8}>
            <p>操作时间: {versionList.operateTime}</p>
          </Col>
          <Col span={8}>
            <div>版本: <Select showSearch
              style={{ width: 100 }}
              placeholder="请选择版本"
              defaultValue="1.0"
              optionFilterProp="children"
              notFoundContent="无法找到"
              onChange={handleChange}
            >
              {
                versionList.versions.map((item) => {
                  return (<Option value={item.value}>V{item.value}</Option>)
                })
              }

            </Select></div>
          </Col>
        </Row>

        <div style={{ "marginTop": "30px", "width": "100%" }}>
          {newData.map((item, index) => {
            return (
              <div key={index} style={{ "display": "flex" }}>
                {item.map((subItem) => {
                  return (
                    <div style={{ "width": "50%", "height": "40px", "overflow": "hidden", "testOverflow": "ellipsis", "whiteSpace": "nowrap" }}>
                      <span style={{ "width": "80px", "display": "inline-block", "textAlign": "right", "color": "#999999" }}>{subItem.fieldId}</span>
                      {subItem.fieldValue.length > 10 ? <Tooltip placement="topLeft" title={subItem.fieldValue}>
                        <span style={{ "marginLeft": "20px" }}>{subItem.fieldValue}</span>
                      </Tooltip> : <span style={{ "marginLeft": "20px" }}>{subItem.fieldValue}</span>}

                    </div>

                  );
                })}
              </div>
            );
          })}
        </div>
      </div>
    )
  }
}