/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text,TouchableHighlight} from 'nuke-components';
import { DropRefresh } from 'nuke';
import {mount} from 'nuke-mounter';
import Util from 'nuke-util';
let Dimensions=Util.Dimensions;

let {height} = Dimensions.get('window');

const styles ={
    wrapper:{
      width:'750rem',
      height:'2000rem'
    },
    refresh:{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    }
}

let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state = {
            show:'show'
        }
    }

    refreshHandler(){
        console.log('下拉刷新了');
        this.setState({
           show:'show' 
        });
        setTimeout(()=>{
            this.setState({
                 show:'hide' 
            });
        },2000);
    }

    render() {
        return (
                <DropRefresh onRefresh = {this.refreshHandler.bind(this)} style={styles.wrapper}>
                    <View ref="refreshTitle"  show={this.state.show}>
                      <Text>下拉刷新333333</Text>
                      <Text>222222</Text>
                    </View>
                    <Text>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</Text>
                    <Text>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</Text>
                </DropRefresh>

        );
    }
}
mount(<App/>, mountNode);