import React from 'react';
import classnames from 'classnames';
import { decorator } from 'grey-react-box';
import { Form } from 'kts-components-antd-x3';
import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
import Invoice from '../../..';

import TableVirtual from './ui/TableVirtual';
import AddRowButton from './ui/AddRowButton';
import TableRow from './ui/TableRow';

import useColumns from './hook/useColumns';
import useOnRow from './hook/useOnRow';
import useWindowClick from './hook/useWindowClick';
import useRowSelection from './hook/useRowSelection';

import useDelRowButton from './ui/BulkMenu/hooks/useDelRowButton';

import './index.less';

export interface IGoodsListProps {

  /** 产品最大数 */
  goodMax?: number;

  addressOptions: any[];
  vehicleTypeList:any[];
  /**
   * 地址数据字段名
   */
  fieldNames?: any;

}

export default class FreightList extends React.Component<IGoodsListProps> {
  render() {
    return <Main {...this.props} />
  }
}

const Main = decorator<IGoodsListProps, FormComponentProps & IGoodsListProps>(Form.create())((props) => {
  const { form } = props;
  /** 控制器 */
  const controller = Invoice.useInvoiceController();

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

  /** 货物列表 */
  const dataSource = controller.useMemo(s => s.freightListState.goodsList, [])

  /** 表格行事件 */
  const onRow = useOnRow();

  /** 批量删除 */
  const delRowButton = useDelRowButton();


  useWindowClick(controller); // 点击组件外部 保存正在编辑的货物

  /** 注册 from 对象 */
  React.useEffect(() => {
    controller.pipeline<WrappedFormUtils>(async (s, form) => { s.freightListState = { ...s.freightListState, form } })(props.form);
  }, [controller, props.form]);
  React.useEffect(() => {
    controller.run(async (s) => {
      s.freightListState.addressFieldNames = props.fieldNames
    });
  }, [props.fieldNames])
  React.useEffect(() => {
    controller.run(async (s) => {
      s.freightListState.vehicleTypeList = props.vehicleTypeList
    });
  }, [props.vehicleTypeList])
  React.useEffect(() => {
    controller.run(async (s) => {
      s.freightListState.area = props.addressOptions
    });
  }, [props.addressOptions])
  // 跟新 货物
  React.useEffect(() => {
    controller.run(async (s) => {
      s.freightListState.goodsMap = new Map();
      goodsList.forEach((e) => { s.freightListState.goodsMap.set(e.$index, e); });
    });
  }, [controller, goodsList]);

  /** props 产品最大数 更新 */
  React.useEffect(() => {
    controller.pipeline(async s => { s.freightListState.goodMax = props.goodMax })()
  }, [controller, props.goodMax])
  // 注册 form
  //  controller.useForm('freightInfo', form);
  return (
    <div className="kts-invoice-operate-freight">
      <div className='real-estate-info-digtal-label' >特殊信息-货物运输</div>
      <div className="kts-invoice-operate-goods-list-digtal" onClick={(e) => { e.stopPropagation() }} >
        <div className="kts-invoice-operate-freight-list-able">
          {/* 添加行 */}
          <AddRowButton />

          {/* 批量删除 */}
          {delRowButton.button}

          <div style={{ flex: 1 }} />

        </div>
        <div className={classnames('kts-invoice-operate-goods-list-table-digtal')}>
          <TableVirtual
            size="small"
            rowKey="$index"
            pagination={false}
            scroll={{ y: 280 }}
            components={{ body: { row: TableRow } }}
            dataSource={dataSource}
            columns={useColumns(props.form)}
            rowSelection={useRowSelection()}
            onRow={record => ({
              onClick: () => {
                onRow.onClick(record);
              },
            })}
          />
        </div>
      </div>
    </div>
  );
});