import React from 'react';
import { View } from '@tarojs/components';
import Input from '../../components/input';
import { CompDefault, MetaProps } from '../data-channel';
import connect from '../connect';

export interface Props extends MetaProps {
  // 标签
  label?: string;
  // 是否必填
  require?: boolean;
  // 数据输出回调
  onChange?: Function;
}

export interface State {}

const defaultValue: CompDefault<Props, State> = {
  props: {
    label: '',
    require: false,
    onChange: (_value) => {},
  },
  state: {},
  meta: {
    compName: 'inline',
    output: { tags: ['form-item'] },
    __mergeCb: (props, meta) => {
      meta.output.key = props.formKey;
    },
  },
};

/**
 * 表单项-输入框
 */
const FormItemInput: React.FC<Props> = ({ label, onChange, meta }) => {
  return (
    <View className='wm-tpl-form-item'>
      <Input
        label={label}
        placeholder={'请输入' + label}
        size='middle'
        onInput={(e) => {
          onChange({
            value: e.detail.value,
            meta: meta.output,
          });
        }}
      />
    </View>
  );
};

export default connect(FormItemInput, defaultValue);