import React, { useState } from 'react';
import { useAsyncEffect } from 'ahooks';
import { getLogicData } from '../../utils/util';
import { Form, Input } from 'antd-mobile';
import { XSelect } from '../XSelect';
import { XCalendar } from '../XCalendar';
import { TreeSelect } from '../TreeSelect';
import XSelectS from '../XSelectS';
import { useModel } from '../../utils/umiExport';

type XFormOneProps = {
  attr: any;
  selectsArray: any;
  selectsItemCheck: any;
};

export const XFormOne: React.FC<XFormOneProps> = (props) => {
  const { attr, selectsArray, selectsItemCheck } = props;
  const [option, setOption] = useState([]);
  const { initialState } = useModel('@@initialState');
  const { dictionary } = initialState;
  // 以@logic开头的下拉选数据获取
  useAsyncEffect(async () => {
    if (attr.type === 'select' || attr.type === 'selects' || attr.type === 'treeSelect') {
      const selectData: any = [];
      if (attr.keys) {
        for (const row of attr.keys) {
          selectData.push({
            label: row[Object.keys(row)[0]],
            value: Object.keys(row)[0],
          });
        }
      } else if (
        !attr.group &&
        attr.keyName &&
        attr.keyName.indexOf('logic@') !== -1
      ) {
        if (attr.type !== 'treeSelect') {
          const data: any = await getLogicData(attr.keyName, {});
          for (const row of data) {
            selectData.push({
              label: row[Object.keys(row)[0]],
              value: row[Object.keys(row)[1]],
            });
          }
        } else {
          const data: any = await getLogicData(attr.keyName, {});
          for (const row of data) {
            selectData.push(row);
          }
          attr.name = (attr.name as string).split("-")[0]
        }
      } else {
        const data = dictionary[attr.keyName] || [];
        for (const row of data) {
          selectData.push({ label: row.label, value: row.value });
        }
      }
      setOption(selectData);
    }
  }, []);
  const { model, name } = attr;
  let vm = <></>;
  switch (attr.type) {
    case 'input':
      vm = (
        <Form.Item label={name} name={model}>
          <Input placeholder={'请输入' + name} />
        </Form.Item>
      );
      break;
    case 'select':
      vm = (
        <Form.Item label={name} name={[model]}>
          <XSelect label={name} basicColumns={[option]} />
        </Form.Item>
      );
      break;
    // 级联下拉框
    case 'selects':
      vm = (
        <Form.Item
          label={name}
          name={model}
          disabled={!selectsArray[attr.group]?.[attr.groupIndex]}
        >
          <XSelectS
            label={name}
            attr={attr}
            options={selectsArray[attr.group]?.[attr.groupIndex]}
            selectsItemCheck={selectsItemCheck}
          />
        </Form.Item>
      );
      break;
    case 'rangePicker':
      vm = (
        <Form.Item label={name} name={model}>
          <XCalendar name={model} label={name} />
        </Form.Item>
      );
      break;
    // 级联下拉框
    case 'treeSelect':
      vm = (
        <Form.Item
          label={name}
          name={model}
        >
          <TreeSelect label={name} basicColumns={option} />
        </Form.Item>
      );
  }

  return vm;
};