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

export default (form: WrappedFormUtils, isRequired?: boolean) => {
  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.passengerListState.editGood, []);

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

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

  /** 证件类型列表 */
  const certificateTypeList = controller.useMemo((e) => e.passengerListState.certificateTypeList, []);

  const area = controller.useMemo((e) => e.passengerListState.area, []);
  const addressFieldNames = controller.useMemo((e) => e.passengerListState.addressFieldNames, []);

  const getVehicle = React.useCallback((value?: string) => {
    if (vehicleTypeList && vehicleTypeList.length > 0) {
      return vehicleTypeList.find(e => e.value === value)?.label || '';
    }
  }, [vehicleTypeList])

  const getCertificateType = React.useCallback((value?: string) => {
    if (certificateTypeList && certificateTypeList.length > 0) {
      return certificateTypeList.find(e => e.value === value)?.label || '';
    }
  }, [certificateTypeList])

  // 等级选项配置
  const levelOptionsMap = React.useMemo(() => {
    return {
      'AIRCRAFT': { // 飞机
        options: [
          { value: '公务舱', label: '公务舱' },
          { value: '头等舱', label: '头等舱' },
          { value: '经济舱', label: '经济舱' },
        ],
        required: true,
      },
      'TRAIN': { // 火车
        options: [
          { value: '一等座', label: '一等座' },
          { value: '二等座', label: '二等座' },
          { value: '软席（软座、软卧）', label: '软席（软座、软卧）' },
          { value: '硬席（硬座、硬卧）', label: '硬席（硬座、硬卧）' },
        ],
        required: true,
      },
      'SHIP': { // 船舶
        options: [
          { value: '一等舱', label: '一等舱' },
          { value: '二等舱', label: '二等舱' },
          { value: '三等舱', label: '三等舱' },
        ],
        required: true,
      },
      // 其他类型不配置，则等级为非必填的文本输入
    } as any;
  }, []);

  const splitArea = React.useCallback((value?: string) => {
    if (value) {
      const _array = value.split(',');
      return _array;
    } else {
      return [];
    }
  }, []);

  /** 表头 */
  const columns = React.useMemo(() => {
    return [
      // {
      //   title: '序号',
      //   key: 'cxrxh',
      //   dataIndex: 'cxrxh',
      //   width: 50,
      //   render: (e: number) => <span style={{ padding: '0 10px' }}>{e}</span>,
      // },
      {
        title: <TitleText required>出行人</TitleText>,
        dataIndex: 'cxr',
        key: 'cxr',
        width: 100,
        render: (_: string, record: IGoodPassenger) => {
          if (editGood?.$index === record.$index && model !== 'prefab') {
            return (
              <Form.Item>
                {getFieldDecorator('cxr', {
                  initialValue: editGood.cxr,
                  rules: [
                    { required: true, message: '请输入出行人' },
                  ],
                })(
                  <MyInput
                    maxLength={20}
                    onChange={async () => {
                      await controller.wait()
                      await controller.setEditPassenger({ cxr: form.getFieldsValue().cxr });
                    }}
                  />,
                )}
              </Form.Item>
            );
          } else {
            return <span style={{ padding: '0 10px' }}>{record.cxr}</span>;
          }
        },
      },
      {
        title: <TitleText required={isRequired}>出行日期</TitleText>,
        dataIndex: 'chuxrq',
        key: 'chuxrq',
        width: 130,
        render: (_: string, record: IGoodPassenger) => {
          if (editGood?.$index === record.$index && model !== 'prefab') {
            return (
              <Form.Item>
                {getFieldDecorator('chuxrq', {
                  initialValue: editGood.chuxrq ? moment(editGood.chuxrq) : undefined,
                  rules: [
                    { required: isRequired, message: '请选择出行日期' },
                  ],
                })(
                  <DatePicker
                    format="YYYY-MM-DD"
                    placeholder='请选择'
                    onChange={async (v) => {
                      await controller.wait()
                      await controller.setEditPassenger({ chuxrq: moment(v).format('YYYY-MM-DD') });
                    }}
                  />,
                )}
              </Form.Item>
            );
          } else {
            return <span style={{ padding: '0 10px' }}>{record.chuxrq}</span>;
          }
        },
      },
      {
        title: <TitleText required={isRequired} >出行人证件类型</TitleText>,
        key: 'cxrzjlxDm',
        dataIndex: 'cxrzjlxDm',
        width: 160,
        render: (_: string, record: IGoodPassenger) => {
          if (editGood?.$index === record.$index && !(model === 'prefab')) {
            return (
              <Form.Item>
                {getFieldDecorator('cxrzjlxDm', {
                  initialValue: editGood.cxrzjlxDm,
                  rules: [
                    { required: isRequired, message: '请选择出行人证件类型' },
                  ],
                })(
                  <Select
                    className="kts-invoice-operate-goods-list-table-tax-rate"
                    showArrow={true}
                    allowClear={true}
                    style={{ width: '100%' }}
                    getPopupContainer={() => rootElement || document.body}
                    onChange={async (value) => {
                      await controller.wait()
                      controller.setEditPassenger({ cxrzjlxDm: value });
                    }}
                  >
                    {(certificateTypeList).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' }}>{getCertificateType(record.cxrzjlxDm)}</span>;
          }
        },
      },
      {
        title: <TitleText required={isRequired}>出行人证件号码</TitleText>,
        dataIndex: 'sfzjhm',
        key: 'sfzjhm',
        width: 150,
        render: (_: string, record: IGoodPassenger) => {
          if (editGood?.$index === record.$index && model !== 'prefab') {
            return (
              <Form.Item>
                {getFieldDecorator('sfzjhm', {
                  initialValue: editGood.sfzjhm,
                  rules: [
                    { required: isRequired, message: '请输入证件号码' },
                  ],
                })(
                  <MyInput
                    maxLength={20}
                    onChange={async () => {
                      await controller.wait()
                      await controller.setEditPassenger({ sfzjhm: form.getFieldsValue().sfzjhm });
                    }}
                  />,
                )}
              </Form.Item>
            );
          } else {
            return <span style={{ padding: '0 10px' }}>{record.sfzjhm}</span>;
          }
        },
      },

      {
        title: <TitleText required={isRequired}>出发点</TitleText>,
        key: 'cfd',
        dataIndex: 'cfd',
        width: 180,
        render: (_: string, record: IGoodPassenger) => {
          if (editGood?.$index === record.$index && model !== 'prefab') {
            return (
              <Form.Item>
                {getFieldDecorator('cfd', {
                  initialValue: editGood.cfd,
                  rules: [
                    { required: isRequired, message: '请输入出发点' },
                  ],
                })(<CustomCascader
                  style={{ width: '100%' }}
                  options={area}
                  fieldNames={addressFieldNames}
                  onChange={async (value: any) => {
                    await controller.setEditPassenger({ cfd: value });
                  }}
                />)}
              </Form.Item>
            );
          } else {
            return <span style={{ padding: '0 10px' }}>{record.cfd}</span>;
          }
        },
      },
      {
        title: <TitleText required={isRequired}>到达地</TitleText>,
        dataIndex: 'ddd',
        key: 'ddd',
        width: 180,
        render: (_: string, record: IGoodPassenger) => {
          if (editGood?.$index === record.$index && model !== 'prefab') {
            return (
              <Form.Item>
                {getFieldDecorator('ddd', {
                  initialValue: editGood.ddd,
                  rules: [
                    { required: isRequired, message: '请输入到达地' },
                  ],
                })(
                  <CustomCascader
                    options={area}
                    fieldNames={addressFieldNames}
                    style={{ width: '100%' }}
                    onChange={async (value) => {
                      await controller.setEditPassenger({ ddd: value });
                    }}
                  />
                )}
              </Form.Item>
            );
          } else {
            return <span style={{ padding: '0 10px' }}>{record.ddd}</span>;
          }
        },
      },
      {
        title: <TitleText required={isRequired} >交通工具类型</TitleText>,
        key: 'jtgjlxDm',
        dataIndex: 'jtgjlxDm',
        width: 130,
        render: (_: string, record: IGoodPassenger) => {
          if (editGood?.$index === record.$index && !(model === 'prefab')) {
            return (
              <Form.Item>
                {getFieldDecorator('jtgjlxDm', {
                  initialValue: editGood.jtgjlxDm,
                  rules: [
                    { required: isRequired, message: '请选择交通工具类型' },
                  ],
                })(
                  <Select
                    className="kts-invoice-operate-goods-list-table-tax-rate"
                    showArrow={true}
                    allowClear={true}
                    style={{ width: '100%' }}
                    getPopupContainer={() => rootElement || document.body}
                    onChange={async (value) => {
                      await controller.wait()
                      controller.setEditPassenger({ jtgjlxDm: value });
                    }}
                  >
                    {(vehicleTypeList).map((e, i) => {
                      return (
                        <Select.Option key={i} value={e.value} disabled={e.disabled}>
                          {e.label}{e.disabled ? '（暂不支持）' : ''}
                        </Select.Option>
                      );
                    })}
                  </Select>,
                )}
              </Form.Item>
            );
          } else {
            return <span style={{ padding: '0 10px' }}>{getVehicle(record.jtgjlxDm)}</span>;
          }
        },
      },
      {
        title: <TitleText required={false}>等级</TitleText>,
        dataIndex: 'zwdj',
        key: 'zwdj',
        width: 110,
        render: (_: string, record: IGoodPassenger) => {
          if (editGood?.$index === record.$index && model !== 'prefab') {
            // 获取当前等级配置
            const levelConfig: any = editGood.jtgjlxDm ? levelOptionsMap[editGood.jtgjlxDm as any] : undefined;
            const isLevelSelect = !!levelConfig;
            const isLevelRequired = levelConfig?.required || false;
            const levelOptions = levelConfig?.options || [];
            return (
              <Form.Item>
                {getFieldDecorator('zwdj', {
                  initialValue: editGood.zwdj,
                  rules: [
                    { required: isLevelRequired, message: '请选择等级' },
                  ],
                })

                  (isLevelSelect ?
                    <Select
                      className="kts-invoice-operate-goods-list-table-tax-rate"
                      showArrow={true}
                      allowClear={true}
                      style={{ width: '100%' }
                      }
                      getPopupContainer={() => rootElement || document.body}
                      onChange={async (value) => {
                        await controller.wait()
                        controller.setEditPassenger({ zwdj: value });
                      }}
                    >
                      {(levelOptions).map((e:any, i:any) => {
                        return (
                          <Select.Option key={i} value={e.value}>
                            {e.label}
                          </Select.Option>
                        );
                      })}
                    </Select>
                    :
                    <MyInput
                      maxLength={20}
                      onChange={async () => {
                        await controller.wait()
                        await controller.setEditPassenger({ zwdj: form.getFieldsValue().zwdj });
                      }}
                    />
                  )}
              </Form.Item >
            );
          } else {
            return <span style={{ padding: '0 10px' }}>{record.zwdj}</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]);

  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" />
    }
  }
}