import { createElement, render, Component } from 'rax';
import DriverUniversal from 'driver-universal';
import { Button, Field, Icon } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

const styles = {
  wrap: {
    padding: '16rpx'
  },
  block: {
    marginBottom: '20rpx'
  },
  row: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingTop: '20rpx',
    paddingBottom: '20rpx',
    marginTop: '20rpx'
  }
}

class MyComponent extends Component {

    field = Field.create(this);

    normFile(list) {
        if (Array.isArray(list)) {
            return list;
        }
        return list && list.fileList;
    }

    normDate(date, strdate) {
        console.log('normDate:', date, strdate);
        return strdate;
    }

    render() {
        const init = this.field.init;

        return (
            <View style={styles.wrap}>
                <View style={styles.block}>
                    <Text>Normalize</Text>
                    <View style={styles.row}>
                        <input {...init('name', { getValueFromEvent: (e) => {
                            const value = e.target && e.target.value || '';
                            if (value.match(/##/)) {
                                return value;
                            } else {
                                return `## title-${value}`;
                            }
                        }})} />
                        <Button type="small" type="primary" onClick={() => {
                            console.log(this.field.getValues());
                        }}>
                            getValues
                        </Button>
                    </View>
                </View>
            </View>
        );
    }
}


// render(<MyComponent />, null, { driver: DriverUniversal });
 export default MyComponent