/*eslint-disable*/
import React, { PureComponent } from 'react';
import { createForm } from 'rc-form';
import CommobileBase from '../../mobile/common/CommobileBase';
import CommobileListEvent from './CommobileListEvent';
import { Checkbox, ListView, TextareaItem } from 'antd-mobile-v2';
import * as commonUtils from '../../utils/utils';


const CheckboxItem = Checkbox.CheckboxItem;
const dataSource = new ListView.DataSource({
  rowHasChanged: (row1, row2) => row2,
});
class listContent extends PureComponent {

  constructor(props) {
    super(props);
  }

  render() {
    const {
      slaveConfig, slaveData: slaveDataOld, slaveSelectedRowKeys: slaveSelectedRowKeysOld,
      needCheck, setSelectedRowkeys, filterSlaveData,
    } = this.props;
    let slaveDataOld2 = slaveDataOld === undefined ? [] : slaveDataOld;
    typeof filterSlaveData === 'function' && (slaveDataOld2 = filterSlaveData(slaveDataOld2));
    const slaveData = dataSource.cloneWithRows(slaveDataOld2);
    const slaveSelectedRowKeys = slaveSelectedRowKeysOld === undefined ? [] : slaveSelectedRowKeysOld;
    typeof setSelectedRowkeys === 'function' && setSelectedRowkeys(slaveDataOld2?.filter(i => i && slaveSelectedRowKeys.includes(i.sId)));

    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 6,
          borderTop: '1px solid #ECECED',
          borderBottom: '1px solid #ECECED',
        }}
      />
    );

    const row = (rowData, sectionID, rowID) => {
      if (commonUtils.isEmptyObject(slaveConfig) || !Array.isArray(slaveConfig.gdsconfigformslave)) return <></>;
      const obj = JSON.parse(JSON.stringify(rowData)); // 深拷贝
      const allkey = slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '')
      const topInfo = needCheck && <CheckboxItem
        key={rowData.sId}
        checked={slaveSelectedRowKeys.findIndex(item => item === rowData.sId) > -1}
        onChange={e => this.props.onCheckboxChange(e, rowData.sId)}
        style={{
          width: '100%',
          marginRight: 0,
          lineHeight: '30px',
          color: '#888',
          fontSize: 16,
          fontWeight: 'bold',
          borderBottom: '1px solid #F6F6F6',
        }}
      >
        { this.props.topTitle || '标签信息' }
      </CheckboxItem>
      const content = allkey.map(
        i => {
          if (typeof obj?.[i?.sName] === 'string' || typeof obj?.[i?.sName] === 'number') {
            return <TextareaItem
            style={{
              fontWeight: 'bold',
              color: '#888',
            }}
            title={<div style={{ fontWeight: 'bold', color: '#888', }}>{i?.showName || ''}</div>}
            value={(obj?.[i?.sName]).toString()}
            disabled
            ref={el => this.autoFocusInst = el}
            autoHeight
          />
          }
         return;
        }
      )
      return <>
        <div>
          {topInfo}
          {content}
        </div>
      </>
    };

    return <>
      {Array.isArray(slaveDataOld2) && slaveDataOld2.length ?
        <ListView
          dataSource={slaveData}
          renderRow={row}
          renderSeparator={separator}
          style={{
            height: '100%',
          }}
        /> :
        <div style={{
          height: '100%',
          textAlign: 'center',
          lineHeight: '60vh',
        }}>
          暂无数据
        </div>
      }
    </>
  }
}

const ListComponent = createForm()(listContent);

export default CommobileBase(CommobileListEvent(ListComponent));