/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Page from 'nuke-page';
import Button from 'nuke-button';
import Picker from 'nuke-picker';


const data0 = [{ key: 'complex', value: '综合排序' }, { key: 'sale', value: '销量优先' }, { key: 'distance', value: '距离最近' }, { key: 'credit', value: '信用优先' }];


class Demo extends Component {
  constructor() {
    super();
    this.state = {
      data: '',
      selected: 'complex',
      cascadeProvince: 'jiangsu',
      cascadeCity: '210000',
    };
  }

  press() {
    Picker.show({
      title: '请选择',
      dataSource: data0,
      selectedKey: this.state.selected,
      maskClosable: true,
    }, (result) => {
      this.setState({
        data: result[0].value,
        selected: result[0].key,
      });
    }, (e) => {
      console.log('canceled');
    });
  }

  render() {
    return (
      <Page title="Picker">
        <View style={styles.result}>
          {this.state.data ? <Text style={styles.resultText}>选择了：{this.state.data}</Text> : null}
        </View>
        <View style={styles.btns}>
          <Button style={styles.btn} block onPress={this.press.bind(this)} type="primary">筛选排序</Button>

        </View>
      </Page>

    );
  }
}

const styles = {
  result: {
    height: '480rem',
    margin: '30rem',
    padding: '10rem',
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center',
  },
  resultText: {
    fontSize: '28rem',
  },
  btns: {
    margin: '30rem',
  },
  btn: {
    marginBottom: '30rem',
  },
};

render(<Demo />);