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

import {
    Spin,
    Button,
    Tooltip
} from 'antd'

import {
    i18n
} from '../../public/i18n';

import '../../style/common.less';
import { chunk,isEmpty } from 'lodash';
import { toJS } from "mobx";


export default class FormItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tableInfo:[],
            tabInfo:[],
            detailSelectedKey: '0'
        }
    }

    componentDidMount() {
        const {
            groupInfo
        } = this.props;
        let tableInfo = this.handleTable(groupInfo.tables);
        let tabInfo = this.getTabInfo(tableInfo);
        let detailSelectedKey = '0';
        if (!isEmpty(tabInfo)) detailSelectedKey = tabInfo[0].key;
        this.setState({
            tableInfo:tableInfo,
            tabInfo:tabInfo,
            detailSelectedKey:detailSelectedKey
        })

      }

    handleTable = (datas) => {
        return datas && datas.map(data => {
          const { tabinfo: { columns } } = data;
          const length = columns.length;
          columns.map(c => {
            c.width = `${95 / length}%`
          })
          return data
        })
      }

    getTabInfo = (tableInfo) => {
        let tabInfo = [];
        tableInfo && tableInfo.forEach((c, idx) => {
          if (!c.hide) {
            tabInfo.push({
              key: `${idx}`,
              title: c.tabname,
            })
          }
        })
        return tabInfo;
      }

      getTabChildren = () => {
        let { tableInfo, tabkey, detailSelectedKey } = this.state;
        let tabChildren = [];
        tableInfo = toJS(tableInfo);

        tableInfo && tableInfo.map((t, i) => {
          if (detailSelectedKey == i) {
            tabChildren.push(
              <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@b813my@${i}`}
                showTitle={true}
                columns={toJS(t.tabinfo.columns)}
                datas={toJS(t.tabinfo.datas)}
                viewAttr={1}
                getRowSelection={(rowSelection) => {
                    Object.assign(rowSelection, {
                      getCheckboxProps: record => ({
                        disabled: record.viewAttr === 1,    // 配置无法勾选的列
                      })
                    })
                    return rowSelection;
                  }}
              />
            );
          }
        })
        return tabChildren;
      }

    render() {
        const {
            groupInfo
        } = this.props, {
            tableInfo,
            tabInfo,
            detailSelectedKey
        } = this.state;
        const newData = chunk(groupInfo.items, 3);
        

        return (
            <div className='form-item' id={groupInfo.id}>
                <div className='title'>
                    <div></div>
                    <p>{groupInfo.title}</p>
                </div>
                <div className='content'>
                    {newData.map((item, index) => {
                        return (
                            <div key={index} className='item'>
                                {item.map((subItem) => {
                                    return (
                                        <div>
                                            <span>{subItem.fieldId}</span>
                                            {subItem.fieldValue.length > 10 ? <Tooltip placement="topLeft" title={subItem.fieldValue}>
                                                <span>{subItem.fieldValue}</span>
                                            </Tooltip> : <span>{subItem.fieldValue}</span>}

                                        </div>

                                    );
                                })}
                            </div>
                        );
                    })}
                </div>
                {
                    !isEmpty(tabInfo) && <div className='hrm-my-cardInfo_detial_tabs'>
                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@vjrq63`}
                            type='card'
                            keyParam='key'
                            datas={toJS(tabInfo)}
                            selectedKey={detailSelectedKey}
                            onChange={v => {
                                this.setState({
                                    detailSelectedKey:v
                                })
                            }}
                        />
                        {this.getTabChildren()}
                    </div>
                }

            </div>
        )
    }
}