/** @jsx createElement */

'use strict';

import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Tabbar from 'nuke-tabbar';

const tradeType = ['all', 'dfk', 'dfh', 'yfh', 'finished', 'closed', 'refund', 'xypj', 'mjwp', 'today', 'yesterday', 'last7Day'];

const tabJson = [
  { opt: 'dfk', name: '待付款', count: 10 },
  { opt: 'dfh', name: '待发货', count: 0 },
  { opt: 'yfh', name: '已发货', count: 11 },
  { opt: 'xypj', name: '待评价', count: 99 },

];

class TabbarDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      opt: 'all',
      tabArr: tabJson,
      activeKey: 'all',
    };
  }
    renderContent = i => (
      <View style={[styles.tabContent]}>
        <Text style={styles.tabText}>法瓦而发</Text>
      </View>
    )
    renderTitle(item, status) {
      return (
        <View style={[styles.rowRow, styles.rowCenter]}>
          <Text style={(status ? [styles.rowNormal, styles.red] : styles.rowNormal)}>
            {item.name}
          </Text>&nbsp;
          <Text style={[(status ? [styles.rowNormal, styles.red] : styles.rowNormal), styles.rowLittle]}>
            {item.count == 0 ? item.count.toString() : item.count}
          </Text>
        </View>
      );
    }

    onChange(status) {
      this.setState({
        activeKey: status.next,
        opt: this.state.tabArr[status.next].opt,
      });
    }

    render() {
      return (
        <View style={styles.main}>
          <Tabbar
            activeKey={0}
            itemStyle={styles.tabbar}
            onChange={this.onChange.bind(this)}
          >
            {
              this.state.tabArr.map((item, index) => (<Tabbar.Item
                render={(status, key) => (this.renderTitle(item, status))}
                tabKey={index}
              >
                <View style={[styles.tabContent]}>
                  <Text style={styles.tabText}>page {index}</Text>
                </View>
              </Tabbar.Item>))
            }
          </Tabbar>
        </View>
      );
    }
}

const styles = {
  main: { flex: 1 },
  tabbar: {
    height: '68rem',

  },
  boxBasics: {
    width: '167.5rem',
    justifyContent: 'center',
  },
  rowRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'stretch',
    flex: 1,
    height: '68rem',
  },
  rowCenter: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  rowNormal: {
    fontSize: '28rem',
    color: '#333333',
  },
  red: {
    color: '#e33b3f',
  },
  rowLittle: {
    fontSize: '20rem',
  },
  tabContent: {
    flex: 1,
    backgroundColor: '#ff6600',
    alignItems: 'center',
    justifyContent: 'center',
  },
  tabText: {
    fontSize: '40rem',
  },


};

render(<TabbarDemo />);