import React from 'react';
import {Col, Form, Input, Modal} from 'antd';
import {Block, Page, Panel, Toolbar} from '@bizComponents';
import {Loader, FormEL, EditableDataTable, UdcSelect,SuggestSelect} from '@components';
import {dataUtils, enums, formUtils} from '@utils';
import {Card, Input} from 'antd';
import {connect} from 'dva';
import {routerRedux} from 'dva/router';
import {DataTable} from '../../../components';
const {TextArea} = Input;
const FormItem = Form.Item;

const domain = 'bidGroup';
const formItemLayout = {
  colon: false,
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
  style: {},
};

const ColProps = {
  xs: 24,
  sm: 24,
  md: 12,
  xl: 12,
  style: {},
};

const modal =
  ({
     mode,
     domain,
     readOnly,
     record,
     onOk,
     dispatch,
     loading,
     formData,
     list,
     form: {
       getFieldDecorator,
       validateFields,
       getFieldsValue,
     },
     ...modalProps
   }) => {

    const basic = [{
      title: '小组名称',
      dataIndex: 'groupName',
      tag: <Input placeholder="" />

    }, {
      title: '物料品类',
      dataIndex: 'itemC3Id',
      tag: <SuggestSelect apiName="c3" params={{ mode }} />,
    }, {
      title: '小组说明',
      dataIndex: 'memo',
      tag: <TextArea placeholder="" autosize={{minRows: 2, maxRows: 15}} />,
    }]

    // 小组成员
    const tableProps = {
      rowKey: 'empId',
      scroll: {
        x: '100%',
        y: '10%',
      },
      domain,
      dispatch,
      loading,
      enableSelection: false,
      dataSource: list,
      showAdd: false,
      showEdit: false,
      showDelete: false,
      showCopy: false,
      showView: false,
      size: 'small',
      columns: [{
        title: '员工姓名',
        dataIndex: 'empName',
        width: '10%',
      }, {
        title: '员工编号',
        dataIndex: 'empCode',
        width: '10%',
      }, {
        title: '所属公司',
        dataIndex: 'ouName',
        width: '20%',
      }, {
        title: '所属部门',
        dataIndex: 'orgName',
        width: '20%',
      }, {
        title: '系统角色',
        dataIndex: 'roleNames',
        width: '10%',
      }, {
        title: '联系电话',
        dataIndex: 'mobile',
        width: '15%',
      },],
    };

    const handleOk = () => {
      if (mode === 'view') {
        onOk({});
      }
      validateFields((errors) => {
        if (errors) {
          return;
        }
        const data = {
          ...getFieldsValue(),
        };
        onOk(data);
      });
    };
    const onCancel = () => {
      dispatch({
        type: `tenderForm/groupHideModal`,
      });
    }
    const modalOpts = {
      ...modalProps,
      onCancel: onCancel,
      footer: null,
    };

    const renderItem = (item) => {
      return (
        <Col key={item.dataIndex} {...ColProps} {...item.colProps}>
          <FormItem
            label={item.title}
            hasFeedback={!readOnly && !item.tag.props.disabled && !!(item.options) && !!(item.options.rules)}
            {...formItemLayout}
            {...item.formItemLayout}
          >
            {getFieldDecorator(item.dataIndex, {
              ...item.options,
              initialValue: record[`${item.dataIndex}`] || (item.options && item.options.initialValue),
            })(item.tag)}
          </FormItem>
        </Col>
      );
    };

    return (
      <Modal {...modalOpts}>
        <Card
          id="basic"
          title='基本信息'
          loading={loading.effects[`${domain}/query`]}
        >
          <FormEL
            items={basic}
            record={formData}
            readOnly={(mode === 'view')?true:false}
          />
        </Card>
        <Card title="小组成员">
          <DataTable {...tableProps} />
        </Card>
      </Modal>
    );
  };

export default Form.create()(modal);
