import React from 'react';
import { connect } from 'dva';
import localCfg from './localCfg';
import { Loader, UploadEL } from '@components';
import { Block, Page, Panel, Toolbar } from '@bizComponents';
import { Modal, Card } from 'antd';

const confirm = Modal.confirm;
const ItemTrial = ({ itemTrial, dispatch, loading }) => {
  const { mode, formData, businessList, qualityList, supplierList, remoteCfg, from } = itemTrial;
  const domain = 'itemTrial';

  supplierList.forEach(element => {
    element['region'] = formData.suppCenter ? [formData.suppCenter] : [];
    element['suppStatusList'] = ['01', '02'];
  });

  //返回
  const handleCancel = () => {
    dispatch({ type: `${domain}/cancel` });
  };

  //提交
  const handleSave = () => {
    dispatch({ type: `${domain}/save`, payload: { ...formData, businessList, qualityList, supplierList } });
  };

  //作废
  const handleDisable = () => {
    confirm({
      title: '确定要作废吗?',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: `${domain}/delete`,
          payload: { ...formData },
        });
      },
    });
  };

  //同意
  const handleApprove = () => {
    dispatch({ type: `${domain}/approve`, payload: { ...formData, businessList, qualityList, supplierList } });
  };

  //拒绝
  const handleReject = () => {
    dispatch({ type: `${domain}/reject`, payload: { ...formData, businessList, qualityList, supplierList } });
  };

  //审批意见
  const handleAdviceChange = (value) => {
    dispatch({ type: `${domain}/updateState`, payload: { advice: value } });
  };

  const handleFormChange = (field) => {
    const key = Object.keys(field)[0];
    dispatch({
      type: `${domain}/updateForm`,
      payload: {
        key,
        value: field[key],
      },
    });
  };

  //可以新增修改的列表
  const tableProps = {
    domain,
    rowKey: 'id',
    scroll: {
      x: '100%',
      y: 400,
    },
    loading,
    dispatch,
    showAdd: true,
    showDelete: true,
    showCopy: false,
    enableSelection: true,
    size: 'small',
  };
  //不能新增修改的列表
  const newtableProps = Object.assign({
    ...tableProps,
    showAdd: false,
    showDelete: false,
    enableSelection: false,
  });

  let table = tableProps;

  if (remoteCfg) {
    remoteCfg.buttons.find(b => b.id === 'submit')['onClick'] = handleSave;
    if (remoteCfg.buttons.find(b => b.id === 'submit')['hidden'] === 0) {
      table = tableProps;
    } else {
      table = newtableProps;
    }
    remoteCfg.buttons.find(b => b.id === 'disable')['onClick'] = handleDisable;
    remoteCfg.buttons.find(b => b.id === 'advice')['onChange'] = (e) => handleAdviceChange(e.target.value);
    remoteCfg.buttons.find(b => b.id === 'approve')['onClick'] = handleApprove;
    remoteCfg.buttons.find(b => b.id === 'reject')['onClick'] = handleReject;

    return (
      <div>
        <Toolbar prcId={formData.prcId} defId={formData.defId} loading={loading} record={formData} mode={mode}
          buttons={remoteCfg.buttons}
          handleCancel={handleCancel}
        />
        <Page dispatch={dispatch} loading={loading} localCfg={localCfg} remoteCfg={remoteCfg} id="itemTrial">

          <Panel id="itemForm" title="物料信息">
            <Block id="itemForm" type="form" data={formData} onFieldsChange={handleFormChange} dispatch={dispatch}/>
            <Block id="uploadInfo" type="other">
              {formData.attacRepo && <UploadEL api={`/api/item/sfs/token?dataKey=${formData.id ? formData.id : ''}`} dataKey={formData.id} listTypes={'text'} />}
            </Block>
          </Panel>

          <Panel id="chooseSupp" title="选择试制供应商" hidden={formData.semiProduct === '1'}>
            <Block id="chooseSupp" type="table" data={supplierList} {...table} />
          </Panel>

          <Panel id="tiralFeedback" title="样测结果反馈">
            <Block id="tiralFeedback" type="form" data={formData} onFieldsChange={handleFormChange} />
            <Block id="uploadInfo" type="other">
              {/* INFO: 如若流程作废的时候需要获取hash等相关信息，可以选择从PS_SFS_ITEM表获取（但该方法为下下策） */}
              {formData.attacRepo &&
                <UploadEL api={`/api/item/sfs/token?dataKey=${formData.id}a`} dataKey={formData.id + 'a'} listTypes={'text'} />}
            </Block>
          </Panel>

          <Panel id="scene" title="现场审核反馈" hidden={formData.semiProduct === '1'}>
            <Block id="business" type="table" data={businessList} {...newtableProps} />
            <Block id="qualit" type="table" data={qualityList} {...newtableProps} />
            <Block id="scene" type="form" data={formData} onFieldsChange={handleFormChange} />
            <Block id="uploadInfo" type="other">
              {formData.attacRepo &&
                <UploadEL api={`/api/item/sfs/token?dataKey=${formData.id}b`} dataKey={formData.id + 'b'} listTypes={'text'} />}
            </Block>
          </Panel>

          <Panel id="batch" title="批测结果反馈">
            <Block id="batch" type="form" data={formData} onFieldsChange={handleFormChange} />
            <Block id="uploadInfo" type="other">
              {formData.attacRepo &&
                <UploadEL api={`/api/item/sfs/token?dataKey=${formData.id}c`} dataKey={formData.id + 'c'} listTypes={'text'} />}
            </Block>
          </Panel>

          <Panel id="quality" title="技术质量部确认(附件上传)" hidden={formData.semiProduct !== '1'}>
            <Block id="uploadInfo" type="other">
              {formData.attacRepo &&
                <UploadEL api={`/api/item/sfs/token?dataKey=${formData.id}e`} dataKey={formData.id + 'e'} listTypes={'text'} />}
            </Block>
          </Panel>

          <Panel id="itemConfirm" title="物料信息确认">
            <Block id="itemConfirm" type="form" data={formData} onFieldsChange={handleFormChange} />
          </Panel>
        </Page>
      </div>
    );
  } else {
    return <Loader fullScreen={false} spinning={loading.effects[`${domain}/querySingle`]} />;
  }
};

export default connect(({ itemTrial, loading }) => ({ itemTrial, loading }))(ItemTrial);
