import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  StatusBar,
  Text,
  TouchableOpacity,
  PixelRatio,
  FlatList,
} from 'react-native'
import { connect } from 'react-redux'
import Icon from '../../../components/Iconfont/Iconfont'
import { NavigationActions } from '../../../utils'
import png from '../../../static/images/defaultimg.jpg'
import CountNum from '../../../components/CountNum'
import Collapsible from 'react-native-collapsible'
import lodash from 'lodash'

class OrderEditGoods extends Component {
  constructor() {
    super()
    this.state = { activeAllCollaps: true }
  }

  setActive() {
    this.setState({ activeAllCollaps: !this.state.activeAllCollaps })
  }

  goodsInfo(item, index) {
    return (
      <View key={index}>
        <View style={{ padding: 10, marginTop: 10, backgroundColor: '#FFF' }}>
          <View style={{ flexDirection: 'row' }}>
            <Image source={png} style={{ width: 80, height: 80 }} />
            <View style={{ marginLeft: 10, flex: 1 }}>
              <Text style={{ fontSize: 13, lineHeight: 18, color: '#333' }}>
                布艺沙发可拆洗组合储物坐在沙发上美人榻在右手边
              </Text>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  marginTop: 10,
                }}
              >
                {/* <Text style={{ fontSize: 12, lineHeight: 17, color: '#666' }}>
                  库存：200 件
                </Text> */}
                <CountNum
                  defaultValue={4}
                  size={24}
                  callback={nv => console.log(nv)}
                />
              </View>
            </View>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginTop: 10,
            }}
          >
            <Text style={{ fontSize: 12, lineHeight: 17, color: '#666' }}>
              成交价：<Text
                style={{ fontSize: 14, lineHeight: 17, color: '#E14C46' }}
              >
                {CURRENCY.currencySign}696.00
              </Text>
            </Text>
            <Text style={{ fontSize: 12, lineHeight: 17, color: '#666' }}>
              成交金额：<Text
                style={{ fontSize: 14, lineHeight: 17, color: '#E14C46' }}
              >
                {CURRENCY.currencySign}122096.00
              </Text>
            </Text>
          </View>
        </View>
        <Collapsible collapsed={this.state.activeAllCollaps}>
          <View style={{ padding: 10, backgroundColor: '#FAFAFA' }}>
            <View
              style={{ flexDirection: 'row', justifyContent: 'space-between' }}
            >
              <Text style={styles.text666}>
                单价：{CURRENCY.currencySign}5099.00
              </Text>
              <Text style={styles.text666}>
                金额：{CURRENCY.currencySign}55099.00
              </Text>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 3,
              }}
            >
              <Text style={styles.text666}>重量：200kg</Text>
              <Text style={styles.text666}>体积：8平方米</Text>
            </View>
          </View>
        </Collapsible>
      </View>
    )
  }

  render() {
    return [1, 2, 3].map((item, key) => this.goodsInfo(item, key))
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  text333: {
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.17,
    color: '#333',
  },
  text666: {
    fontSize: 12,
    lineHeight: 17,
    color: '#666',
  },
  text999: {
    fontSize: 12,
    lineHeight: 17,
    color: '#999',
  },
})

export default OrderEditGoods