/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import RefreshControl from 'nuke-refresh-control';
import Touchable from 'nuke-touchable';
import Icon from 'nuke-icon';
import Image from 'nuke-image';
import ListView from 'nuke-list-view';
import Page from 'nuke-page';


class ListViewDemo extends Component {
  constructor() {
    super();

    this.state = {
      arr1: [
        { key: 'a0', text: '所有类别' },
        { key: 'a1', text: '所有类别', arrow: true },
        { key: 'a2', text: '所有类别', arrow: true, sub: '请选择' },
      ],
      arr2: [
        { key: 'b0', text: '所有类别', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png' },
        { key: 'b1', text: '所有类别', arrow: true, icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png' },
        { key: 'b2', text: '所有类别', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png' },
      ],
      arr3: [
        { key: 'c0', text: '所有类别', sub: '次级文本' },
        { key: 'c1', text: '所有类别', arrow: true, sub: '次级文本' },
        { key: 'c2', text: '所有类别', arrow: true, sub: '次级文本' },

      ],
      arr4: [
        { key: 'd0', text: '所有类别', sub: '次级文本', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png' },
        { key: 'd1', text: '所有类别', arrow: true, sub: '次级文本', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png' },
        { key: 'd2', text: '所有类别', arrow: true, sub: '次级文本', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png' },

      ],
      arr5: [
        { key: 'e0', text: '所有类别', sub: '次级文本', desc: '内容内容内容' },
        { key: 'e1', text: '所有类别', sub: '次级文本', desc: '内容内容内容' },
        { key: 'e2', text: '所有类别', sub: '次级文本', desc: '内容内容内容' },

      ],
      arr6: [
        { key: 'f0', text: '所有类别', sub: '次级文本', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png', desc: '内容内容内容' },
        { key: 'f1', text: '所有类别', sub: '次级文本', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png', desc: '内容内容内容' },
        { key: 'f2', text: '所有类别', sub: '次级文本', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png', desc: '内容内容内容' },

      ],
    };
  }

  linkTo(item, e) {
    console.log(e);
  }
  componentDidMount() {

  }
  renderInner(length, item, index) {
    const wrapStyle = index === length - 1 ? [styles.cellItem, styles.cellItemLast] : styles.cellInner;
    return (
      <Touchable style={wrapStyle} onPress={this.linkTo.bind(this, item)}>
        {
          item.icon ? <Image style={styles.icon} source={{ uri: item.icon }} /> : null
        }
        <Text style={styles.itemTextList}>{item.text}</Text>
        {
          item.sub ? <Text style={styles.sub}>{item.sub}</Text> : null
        }
        {
          item.arrow ? <Icon name="arrowRight" style={styles.arrow} /> : null
        }
      </Touchable>
    );
  }
  renderItem(length, item, index) {
    if (index == length - 1) {
      return this.renderInner(length, item, index);
    }
    return (<View style={styles.cellItem}>
      {this.renderInner(length, item, index)}
    </View>
    );
  }
  renderItemTwo(length, item, index) {
    const wrapStyle = index === length - 1 ? [styles.cellItemTwo, styles.cellItemTwoLast] : styles.cellItemTwo;
    return (
      <View style={wrapStyle}>
        <Touchable style={[styles.cellInnerTwo, index === length - 1 ? styles.cellInnerTwoLast : {}, item.icon ? styles.hasIcon : {}]} onPress={this.linkTo.bind(this, item)}>
          {
            item.icon ? <Image style={styles.iconTwo} source={{ uri: item.icon }} /> : null
          }
          <Text style={styles.itemTextTwo}>{item.text}</Text>
          {
            item.sub ? <Text style={styles.subTwo}>{item.sub}</Text> : null
          }
          {
            item.arrow ? <Icon name="arrowRight" style={styles.arrowTwo} /> : null
          }
          {
            index === length - 1 ? <View style={styles.line} /> : null
          }
        </Touchable>
      </View>
    );
  }
  renderItemThree(length, item, index) {
    const wrapStyle = index === length - 1 ? [styles.cellItemThree, styles.cellItemThreeLast] : styles.cellItemThree;
    return (
      <View style={wrapStyle}>
        <Touchable style={[styles.cellInnerThree, index === length - 1 ? styles.cellInnerThreeLast : {}, item.icon ? styles.hasIcon : {}]} onPress={this.linkTo.bind(this, item)}>
          {
            item.icon ? <Image style={styles.iconThree} source={{ uri: item.icon }} /> : null
          }
          <Text style={styles.itemTextThree}>{item.text}</Text>
          {
            item.sub ? <Text style={styles.subThree}>{item.sub}</Text> : null
          }
          {
            item.desc ? <Text style={styles.descThree}>{item.desc}</Text> : null
          }
          {
            item.arrow ? <Icon name="arrowRight" style={styles.arrowThree} /> : null
          }
          {
            index === length - 1 ? <View style={styles.line} /> : null
          }
        </Touchable>
      </View>
    );
  }

    renderFooter=() => (this.state.showLoading ?
      <View style={[styles.loading]}><Text style={styles.loadingText}>加载中...</Text></View>
      : null)

    render() {
      return (
        <Page title="ListView">
          <Page.Intro main="List/SingleLine" sub="normal" />
          <ListView
            renderRow={this.renderItem.bind(this, this.state.arr1.length)}
            dataSource={this.state.arr1}
            style={styles.list1}
          />

          <ListView
            renderRow={this.renderItem.bind(this, this.state.arr2.length)}
            dataSource={this.state.arr2}
            style={styles.list2}
          />
          <Page.Intro main="List/Two Lines" sub="normal" />
          <ListView
            renderRow={this.renderItemTwo.bind(this, this.state.arr3.length)}
            dataSource={this.state.arr3}
            style={styles.list3}
          />
          <ListView
            renderRow={this.renderItemTwo.bind(this, this.state.arr4.length)}
            dataSource={this.state.arr4}
            style={styles.list4}
          />
          <Page.Intro main="List/Three Lines" sub="normal" />
          <ListView
            renderRow={this.renderItemThree.bind(this, this.state.arr5.length)}
            dataSource={this.state.arr5}
            style={styles.list5}
          />
          <ListView
            renderRow={this.renderItemThree.bind(this, this.state.arr6.length)}
            dataSource={this.state.arr6}
            style={styles.list6}
          />
        </Page>

      );
    }
}
const styles = {
  list1: {
    height: `${96 * 3 + 2}rem`,
    marginTop: '35rem',
  },
  cellItem: {
    backgroundColor: '#ffffff',
    'backgroundColor:active': '#f2f3f7',
    height: '96rem',
    paddingLeft: '30rem',

  },
  cellInner: {
    flex: 1,
    borderBottomWidth: '2rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#e6e7eb',
    alignItems: 'center',
    flexDirection: 'row',
  },
  cellItemLast: {
    backgroundColor: '#ffffff',
    height: '96rem',
    borderBottomWidth: '2rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#e6e7eb',
    paddingLeft: '30rem',
    alignItems: 'center',
    flexDirection: 'row',
  },
  icon: {
    color: '#c7c7cc',
    width: '72rem',
    height: '72rem',
    marginRight: '26rem',
    // position:'absolute',
    // top:'34rem',
    // right:'24rem'
  },
  itemTextList: {
    fontSize: '32rem',
    color: '#5F646E',
  },
  arrow: {
    color: '#c7c7cc',
    position: 'absolute',
    top: '34rem',
    right: '24rem',
  },
  sub: {
    color: '#c7c7cc',
    position: 'absolute',
    top: '26rem',
    right: '64rem',
    fontSize: '28rem',
  },
  list2: {
    height: `${96 * 3 + 2}rem`,
    marginTop: '40rem',

  },
  cellItemTwo: {
    backgroundColor: '#ffffff',
    'backgroundColor:active': '#f2f3f7',
    paddingLeft: '30rem',
  },
  cellInnerTwo: {
    borderBottomWidth: '2rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#e6e7eb',
    height: '136rem',
  },
  cellInnerTwoLast: {
    borderBottomWidth: '0rem',
  },
  cellItemTwoLast: {
    backgroundColor: '#ffffff',
    height: '134rem',
    borderBottomWidth: '2rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#e6e7eb',
  },
  iconTwo: {
    color: '#c7c7cc',
    width: '100rem',
    height: '100rem',
    marginRight: '26rem',
    position: 'absolute',
    top: '18rem',
    left: '0rem',
  },
  arrowTwo: {
    color: '#c7c7cc',
    position: 'absolute',
    top: '54rem',
    right: '24rem',
  },
  subTwo: {
    color: '#c7c7cc',
    fontSize: '28rem',
    marginTop: '10rem',
  },
  itemTextTwo: {
    fontSize: '32rem',
    marginTop: '20rem',
    color: '#5F646E',
  },
  list3: {
    height: `${136 * 3}rem`,
    marginTop: '40rem',
  },
  list4: {
    height: `${136 * 3}rem`,
    marginTop: '40rem',
  },
  hasIcon: {
    paddingLeft: '124rem',
  },
  cellItemThree: {
    backgroundColor: '#ffffff',
    paddingLeft: '30rem',
    'backgroundColor:active': '#f2f3f7',
  },
  cellInnerThree: {
    borderBottomWidth: '2rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#e6e7eb',
    height: '152rem',
  },
  cellInnerThreeLast: {
    borderBottomWidth: '0rem',
  },
  cellItemThreeLast: {
    backgroundColor: '#ffffff',
    height: '150rem',
    borderBottomWidth: '2rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#e6e7eb',
  },
  iconThree: {
    color: '#c7c7cc',
    width: '100rem',
    height: '100rem',
    marginRight: '26rem',
    position: 'absolute',
    top: '26rem',
    left: '0rem',
  },
  arrowThree: {
    color: '#c7c7cc',
    position: 'absolute',
    top: '54rem',
    right: '24rem',
  },
  subThree: {
    color: '#c7c7cc',
    fontSize: '28rem',
    // marginTop:'4rem'
  },
  descThree: {
    color: '#c7c7cc',
    fontSize: '28rem',
    // marginTop:'4rem'
  },
  itemTextThree: {
    fontSize: '32rem',
    marginTop: '16rem',
    color: '#5F646E',
  },
  list5: {
    height: `${152 * 3}rem`,
    marginTop: '40rem',
  },
  list6: {
    height: `${152 * 3}rem`,
    marginTop: '40rem',
    marginBottom: '40rem',
  },
};

render(<ListViewDemo />);