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() {

  }

  isEmptyObject(obj) {
    for (let key in obj) {
      return false;
    }
    return true;
  }


  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>
    )
  }
}