import React from 'react';
import { Form } from 'kts-components-antd-x3';
import { Select, Input, Spin, InputProps, Cascader } from 'kts-xui';
import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
import { IGood2,IGood3 } from '../../../../../InvoiceController';
import Invoice from '../../../../..';
import TitleText from './ui/TitleText';

export default (form: WrappedFormUtils) => {
  const { getFieldDecorator } = form;

  const controller = Invoice.useInvoiceController();

  const rootElement = controller.useMemo(s => s.rootElement, []);

  /** 组件模式 */
  const model = controller.useMemo(e => e.model, []);

  /** 正在编辑的货物 */
  const editGood = controller.useMemo((e) => e.payListState.editGood, []);

  /** 禁用字段 */
  const disableds = controller.useMemo((e) => e.stakeholder.disableds || [], []);

  /** 运输工具种类列表 */
  const vehicleTypeList = controller.useMemo((e) => e.payListState.vehicleTypeList, []);

  const area = controller.useMemo((e) => e.payListState.area, []);
  const addressFieldNames = controller.useMemo((e) => e.payListState.addressFieldNames, []);
  const getVehicle = React.useCallback((value?: string) => {
    if (vehicleTypeList && vehicleTypeList.length > 0) {
      return vehicleTypeList.find(e => e.value === value)?.label || '';
    }
  }, [vehicleTypeList])
  const splitArea = React.useCallback((value?: string) => {
    if (value) {
      const _array = value.split(',');
      return _array;
    } else {
      return [];
    }
  }, []);
  const [required,setRequired]=React.useState(false);

  const onInputChange=React.useCallback((e:any)=>{
    const value=e.target.value;
    if(value){
      setRequired(true);
    }else{
      setRequired(false);
    }
  },[]);
  /** 表头 */
  const columns = React.useMemo(() => {
    return [
      {
        title: '序号',
        key: 'sortNumber',
        dataIndex: 'sortNumber',
        width: 50,
        render: (e: number) => <span style={{ padding: '0 10px' }}>{e}</span>,
      },
      {
        title: <TitleText  >支付渠道</TitleText>,
        key: 'channel',
        render: (_: string, record: IGood3) => {
          if (editGood?.$index === record.$index && !disableds.includes('channel') && !(model === 'prefab')) {
            return (
              <Form.Item>
                {getFieldDecorator('channel', {
                  initialValue: editGood.channel,
                  rules: [
                    { required: required, message: '请输入' },
                  ],
                })(
                  <Select
                    className="kts-invoice-operate-goods-list-table-tax-rate"
                    allowClear={true}
                    // showArrow={false}
                    style={{ width: '100%' }}
                    getPopupContainer={() => rootElement || document.body}
                    onChange={async (value) => {
                      await controller.wait()
                      controller.setEditPay({ channel: value });
                    }}
                  >
                    {(record.vehicleList || vehicleTypeList).map((e, i) => {
                      return (
                        <Select.Option key={i} value={e.value}>
                          {e.label}
                        </Select.Option>
                      );
                    })}
                  </Select>,
                )}
              </Form.Item>
            );
          } else {
            return <span style={{ padding: '0 10px' }}>{getVehicle(record.channel)}</span>;
          }
        },
      },
      {
        title: <TitleText >交易单号</TitleText>,
        key: 'number',
        width: 119,
        render: (_: string, record: IGood3) => {
          if (editGood?.$index === record.$index && !disableds.includes('number') && model !== 'prefab') {
            return (
              <Form.Item>
                {getFieldDecorator('number', {
                  initialValue: editGood.number,
                  rules: [
                    { required: required, message: '请输入' },
                  ],
                })(
                  <MyInput
                    maxLength={40}
                    onChange={async (e) => {
                      // onInputChange(e);
                      await controller.wait()
                      await controller.setEditPay({ number: form.getFieldsValue().number });
                    }}
                  />,
                )}
              </Form.Item>
            );
          } else {
            return <span style={{ padding: '0 10px' }}>{record.number}</span>;
          }
        },
      },
    ]

      // 只读
      .filter(e => {
        if (model === 'readOnly') {
          return e.key !== 'operating';
        } else {
          return true;
        }
      })
      .map((e) => {
        return {
          ...e,
          ellipsis: true,
        };
      }) as any[];
  }, [editGood, controller, model, getVehicle,required]);

  return columns;
};


class MyInput extends React.Component<InputProps & { loading?: boolean }> {
  render() {
    if (this.props.loading) {
      return (
        <Spin size="small">
          <Input {...this.props} autoComplete="off" />
        </Spin>
      )
    } else {
      return <Input {...this.props} autoComplete="off" />
    }
  }
}