import React, { Fragment, Component } from 'react';
import { DatePicker, Picker, TextareaItem, InputItem, List, Switch } from 'antd-mobile';
import moment from 'moment';
import PropTypes from 'prop-types';
import FieldList from '@/H5Public/baseComponents/FieldList';


const DiyInput = (props) => {
  let { config, formValue, changeValue, otherProps } = props;
  if (config.readOnly) {
    config.placeholder = '';
  } else {
    config.placeholder = config.placeholder || '点击输入';
  }
  return (
    <InputItem
      key={config.key}
      type={config.dataType}
      editable={!config.readOnly}
      value={formValue[config.key]}
      placeholder={config.placeholder}
      onChange={(e) => {
        changeValue(e, config.key);
      }}
      {...config.otherProps}
    >
      {giveRequiredName(config)}
    </InputItem>
  );
};

const DiyTextarea = (props) => {
  let { config, formValue, changeValue } = props;
  if (config.readOnly) {
    config.placeholder = '';
  } else {
    config.placeholder = config.placeholder || '点击输入';
  }
  return (
    <TextareaItem
      key={config.key}
      title={giveRequiredName(config)}
      maxLength={200}
      autoHeight={true}
      placeholder={config.placeholder}
      editable={!config.readOnly}
      value={formValue[config.key]}
      onChange={(e) => {
        changeValue(e, config.key);
      }}
      {...config.otherProps}

    >
    </TextareaItem>
  );
};

const DiyPicker = (props) => {
  let { config, formValue, changeValue } = props;
  if (config.readOnly) {
    config.placeholder = ' ';
  } else {
    config.placeholder = config.placeholder || '点击输入';
  }
  let opt = config.options.map((x) => {
    return {
      label: x.name,
      value: x.key,
    };
  });
  return (
    <Picker
      data={opt}
      cols={1}
      extra={' '}
      key={config.key}
      value={[formValue[config.key]]}
      disabled={config.readOnly}
      onChange={(val) => {
        changeValue(val[0], config.key);
      }}
      {...config.otherProps}
    >
      <List.Item arrow={config.readOnly ? '' : 'horizontal'}>
        {giveRequiredName(config)}
      </List.Item>
    </Picker>
  );
};

const DiySwitch = (props) => {
  let { config, formValue, changeValue } = props;
  if (config.readOnly) {
    config.placeholder = ' ';
  } else {
    config.placeholder = config.placeholder || '点击输入';
  }
  return (
    <List.Item
      key={config.key}
      extra={
        <Switch
          checked={formValue[config.key]}
          disabled={config.readOnly}
          onChange={(val) => {
            changeValue(val, config.key);
          }}
          {...config.otherProps}
        />
      }
    >
      {giveRequiredName(config)}
    </List.Item>
  );
};

const DiyDatePicker = (props) => {
  let { config, formValue, changeValue } = props;
  let value = formValue[config.key] ? new Date(formValue[config.key].replace(/-/g, '/')) : null;
  const change = (date) => {
    let v = moment(date.valueOf()).format('YYYY-MM-DD');
    changeValue(v, config.key);
  };
  if (config.readOnly) {
    config.placeholder = '';
  } else {
    config.placeholder = config.placeholder || '点击输入';
  }
  return (
    <DatePicker
      value={value}
      extra={config.placeholder}
      mode={'date'}
      key={config.key}
      disabled={config.readOnly}
      onChange={(date) => change(date)}
      {...config.otherProps}

    >
      <List.Item
        arrow="horizontal"
      >
        {giveRequiredName(config)}
      </List.Item>
    </DatePicker>
  );

};


const giveRequiredName = (config) => {
  if (config.required) {
    return (
      <Fragment>
        <i style={{ color: 'red' }}>*&nbsp;</i>
        {config.name}
      </Fragment>
    );
  } else {
    return (
      <Fragment>
        <i style={{ color: 'red' }}>&nbsp;&nbsp;</i>
        {config.name}
      </Fragment>
    );
  }
};

class FormArray extends Component {

  changeValue = (value, key) => {
    this.props.changeValue(value, key);
  };

  detailDom = () => {
    const { config, formValues, readOnly } = this.props;
    return config.map((x) => {
      x.readOnly = readOnly || false;
      switch (x.type) {
        case 'InputItem':
          return (
            <DiyInput
              key={x.key}
              config={x}
              formValue={formValues}
              changeValue={this.changeValue}

            />
          );
        case 'TextareaItem':
          return (
            <DiyTextarea
              key={x.key}
              config={x}
              formValue={formValues}
              changeValue={this.changeValue}
            />
          );
        case 'Picker':
          return (
            <DiyPicker
              config={x}
              key={x.key}
              formValue={formValues}
              changeValue={this.changeValue}
            />
          );
        case 'DatePicker':
          return (
            <DiyDatePicker
              key={x.key}
              config={x}
              formValue={formValues}
              changeValue={this.changeValue}
            />
          );
        case 'Switch':
          return (
            <DiySwitch
              key={x.key}
              config={x}
              formValue={formValues}
              changeValue={this.changeValue}
            />
          );
        default:
          return null;

      }
    });
  };

  render() {
    return (
      <List>
        {this.detailDom()}
      </List>
    );
  }
}


FormArray.propTypes = {
  formValues: PropTypes.object.isRequired, //数据
  config: PropTypes.array.isRequired,  // 配置项
  changeValue: PropTypes.func.isRequired, // 改值的方法
  readOnly: PropTypes.bool, // 是否 只读
};
FormArray.defaultProps = {
  formValues: {},
  config: [
    {
      type: 'input',
    },
  ],
  changeValue: (value, key) => {
    console.log(value, key);
  },
  readOnly: false,
};

export default FormArray;

