import React from 'react';
import { Button, Card, Col, Form, Input, Modal, Radio, Row, Table } from 'antd';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

const formItemLayout = {
  colon: false,
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
  style: {
    // marginBottom: 20,
  },
};

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

const modal =
  ({
     itemList,
     regList,
     regPowerFlag,
     itemPowerFlag,
     mode,
     domain,
     readOnly,
     record,
     onOk,
     onCancel,
     dispatch,
     loading,
     form: {
       getFieldDecorator,
       validateFields,
       getFieldsValue,
     },
     ...modalProps
   }) => {

    const items = [{
      title: '用户名称',
      dataIndex: 'name',
      tag: <Input readOnly={true}/>,
    }, {
      title: '企业名称',
      dataIndex: 'entName',
      tag: <Input readOnly={true}/>,
    }
    ];


    const handleOk = () => {
      dispatch({
        type: `${domain}/updatePower`,
      });
    };

    const handleCancel = () => {
      onCancel();
    };

    const modalOpts = {
      ...modalProps,
      onCancel: handleCancel,
      footer: [
        <Button key="back" onClick={handleCancel}
                disabled={loading.effects[`${domain}/updatePower`]}
        >取消</Button>,
        <Button
          key="submit"
          type="primary"
          loading={loading.effects[`${domain}/updatePower`]}
          onClick={handleOk}
        >保存
        </Button>,
      ],
    };

    const renderable = (item) => {
      if (item.dataIndex === 'entId') {
        return record.field && record.field === 'EP' ? false : true;
      }
      if (item.dataIndex === 'suppId') {
        return record.field ? (record.field !== 'EP' ? false : true) : false;
      }
      if (item.dataIndex === 'empId' && record.field === 'EP') {
        item.options.rules[0].required = false;
      }
      return true;
    };


    const renderItem = (item) => {
      if (!renderable(item)) return null;
      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>
      );
    };

    const regTableProps = {
      size: 'small',
      scroll: { x: '100%', y: 350 },
      rowKey: 'id',
      enableSelection: true,
      dataSource: regList,
      pagination: false,
      columns: [{
        title: '区域编号',
        dataIndex: 'code',
        width: '40%',
      }, {
        title: '区域名称',
        dataIndex: 'name',
        width: '60%',
      }],
      rowSelection: regPowerFlag === 'A' ? undefined : {
        selectedRowKeys: (record.regionCodes),
        onChange: (selectedRowKeys, selectedRows) => {
          dispatch({
            type: `${domain}/updateRegion`,
            payload: selectedRowKeys
          });
        },
      },
    };

    const itemTableProps = {
      size: 'small',
      scroll: { x: '100%', y: 350 },
      enableSelection: false,
      rowKey: 'code',
      dataSource: itemList,
      pagination: false,
      columns: [{
        title: '品类编号',
        dataIndex: 'code',
        width: '40%',
      }, {
        title: '品类名称',
        dataIndex: 'name',
        width: '60%',
      }],
      rowSelection: itemPowerFlag === 'A' ? undefined : {
        selectedRowKeys: record.itemCodes,
        onChange: (selectedRowKeys, selectedRows) => {
          dispatch({
            type: `${domain}/updateDpowerItem`,
            payload: selectedRowKeys
          });
        },
      },
    };

    // console.log('>>>  getCheckboxProps: record ', record);

    const regPowerFlagOnChange = (e) => {
      dispatch({ type: `${domain}/updateState`, payload: { regPowerFlag: e.target.value } });
    };

    const itemPowerFlagOnChange = (e) => {
      dispatch({ type: `${domain}/updateState`, payload: { itemPowerFlag: e.target.value } });
    };

    return (
      <Modal {...modalOpts}>
        <Row type="flex" justify="start">
          {items.map(item => renderItem(item))}
        </Row>

        <Row type="flex" justify="start">
          <Col span={10} offset={1}>
            <Card title={
              <div>供货区域权限
                <div style={{ float: 'right' }}>
                  <RadioGroup name="regPowerFlag" value={regPowerFlag} onChange={regPowerFlagOnChange}>
                    <Radio value={'O'}>指定权限</Radio>
                    <Radio value={'A'}>所有权限</Radio>
                  </RadioGroup>
                </div>
              </div>
            } loading={loading.effects[`${domain}/queryPerms`]}>
              <Table  {...regTableProps} />
            </Card>
          </Col>
          <Col span={10} offset={2}>
            <Card title={
              <div>物料品类权限
                <div style={{ float: 'right' }}>
                  <RadioGroup name="itemPowerFlag" value={itemPowerFlag} onChange={itemPowerFlagOnChange}>
                    <Radio value={'O'}>指定权限</Radio>
                    <Radio value={'A'}>所有权限</Radio>
                  </RadioGroup>
                </div>
              </div>} loading={loading.effects[`${domain}/queryPerms`]}>
              <Table {...itemTableProps} />
            </Card>
          </Col>
        </Row>
      </Modal>
    );
  };

export default Form.create()(modal);
