import pageSetting from './pageSetting';
import React, { Component, Fragment } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import List from '../ApplyPage/List';
import ListTab from './ListTab';
import { deepCopy } from '@/baseComponent/utils';
import { getApplyPage, getHandledPage, getWaitPage } from '../publicApiService';
import AuditModal from '@/webPublic/FormInsertDiy/AuditPage/BatchAudit/AuditModal';
import { ModalInfo } from '@/baseComponent/Modal';
import ButtonDiy from '@/baseComponent/ButtonDiy';

export default class AuditPage extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  handleButtonSet = () => {
    const { hasBatchAudit } = this.props;
    return {
      tab1: [
        hasBatchAudit ? {
          type: 'audit',
          component: 'RenderComponent',
          render: ({ selectRows, getPage }) => {
            const disabled = !selectRows || !Array.isArray(selectRows) || !selectRows.length;
            function handleClick(onShow) {
              const taskName = selectRows[0].taskName;
              const differentTask = selectRows.slice(1).find(i => i.taskName !== taskName);
              if (differentTask) {
                return ModalInfo((
                  <div>
                    <strong style={{color: "red"}}> {differentTask.taskName} </strong>
                    和<strong> {taskName} </strong>不能一起审核。<br />
                  请将分开操作。
                  </div>
                ));
              }
              onShow();
            }
            return (
              <AuditModal selectRows={selectRows} getPage={getPage}>
                {({ onShow }) => (
                  <ButtonDiy
                    name="批量审核"
                    handleClick={() => handleClick(onShow)}
                    disabled={disabled}
                  />
                )}
              </AuditModal>
            );
          },
        }: false,
      ].filter(i => i),
      tab2: [],
    };
  };

  handleSearchSet = () => {
    const { columns, searchCondition } = this.props;
    const tab1 = {
      search: {
        field: {},
        getPageService: getWaitPage,
        responseCallBack: response => {
          return response;
        },
        condition: searchCondition,
        nameSpan: { big: 8, small: 9 },
        fileSpan: { big: 4, small: 4 },
      },
      tableRowKey: 'id',
      columns,
    };
    const tab2 = {
      search: {
        field: {},
        getPageService: getHandledPage,
        responseCallBack: response => {
          return response;
        },
        condition: searchCondition,
        nameSpan: { big: 8, small: 9 },
        fileSpan: { big: 4, small: 4 },
      },
      tableRowKey: 'id',
      columns,
    };
    return {
      tab1,
      tab2,
    };
  };

  render() {
    const { workId, dataBaseId, addFields } = this.props;

    return (
      <PageHeaderWrapper title="">
        <ListTab
          tabList={pageSetting.tabList}
          pageButton={this.handleButtonSet({})}
          workId={workId}
          dataBaseId={dataBaseId}
          addFields={addFields}
          pageSearch={this.handleSearchSet({})}
        />
      </PageHeaderWrapper>
    );
  }
}
