occ-mobile/app/containers/commodity/commoditydetail/OptFlatList.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  StatusBar,
  Dimensions,
  PixelRatio,
  TouchableOpacity,
  Text,
  FlatList,
  ScrollView,
  TextInput,
} from 'react-native'
import { connect } from 'react-redux'
import { createAction } from '../../../utils'
import Input from '../../../components/input'
const { width, height } = Dimensions.get('window')
@connect(({ optional }) => ({ ...optional }))
class OptFlatList extends Component {
  constructor(props) {
    super(props)
    this.state = { touchColor: '', refresh: true,findValue:'' }
  }

  _optionalRow(item, index) {
    let valuesname = []
    if (item.typeCode !== '04') {
      item.colorGroups.content.forEach((data, key) => {
        valuesname.push(
          <TouchableOpacity
            disabled={false}
            key={data.id}
            activeOpacity={1}
            style={{
              // height: 30,
              paddingHorizontal: 16,
              paddingVertical: 6,
              borderRadius: 100,
              borderColor: data.isChecked ? '#E14C46' : '#DDD',
              borderWidth: 1,
              justifyContent: 'center',
              alignItems: 'center',
              marginRight: 15,
            }}
            onPress={() => {
              this.props.dispatch(
                createAction('optional/getColorByGroups')({
                  id : item.goodsId,
                  groupId : data.id,
                  colourCode : ""
                })
              )
              item.colorGroups.content.forEach(touchData => {
                touchData.isChecked = false
              })
              item.isChoose = data
              data.isChecked = true
              this.setState({ 
                touchColor: {
                  "id" : data.id,
                  "name" : data.name,
                } 
              })
            }}
          >
            <Text
              style={{
                color: data.isChecked ? '#E14C46' : '#333',
                fontSize: 12,
                lineHeight: 17,
              }}
              numberOfLines={1}
            >
              {data.name}
            </Text>
          </TouchableOpacity>
        )
      })
      return (
        <View>
          <Text
            style={{
              color: '#999',
              fontSize: 14,
              marginTop: 15,
              lineHeight: 20,
              letterSpacing: 0.17,
            }}
          >
            {item.name+"分组"}
          </Text>
          <ScrollView
            scrollEnabled={true}
            removeClippedSubviews={true}
            showsHorizontalScrollIndicator={false}
            automaticallyAdjustContentInsets={false}
            pagingEnabled={true}
            locked={true}
            horizontal={true}
            style={{ flexDirection: 'row', marginTop: 8, overflow: 'hidden' }}
          >
            {valuesname}
          </ScrollView>
        </View>
      )
    } else {
      valuesname = (
        <View
          style={{
            flex: 1,
            borderBottomColor: '#DDD',
            marginLeft: 10,
            marginBottom: 1,
            marginRight: 10,
            borderBottomWidth: 1 / PixelRatio.get(),
          }}
        >
          <TextInput
            style={{
              flex: 1,
              padding: 0,
              fontSize: 12,
              lineHeight: 20,
              letterSpacing: 0.38,
              color: '#333',
              marginTop: 4,
            }}
            autoCapitalize="none"
            autoCorrect={false}
            underlineColorAndroid={'transparent'}
            clearButtonMode="while-editing"
            onChangeText={text => {
              item.item[0].attrValCode = text
              item.item[0].attrValId = text
              item.item[0].attrValName = text
              item.isChoose = item.item[0]
            }}
            defaultValue={item.item[0].attrValName}
            onBlur={() => {
              this.setState({ refresh: !this.state.refresh })
            }}
            // value={item.item}
            multiline={false}
            placeholder={'请输入'}
            placeholderTextColor={'#CCC'}
          />
        </View>
      )
      return (
        <View
          style={{
            flexDirection: 'row',
            paddingVertical: 7,
            marginTop: 5,
          }}
        >
          <Text
            style={{
              color: '#999',
              fontSize: 14,
              lineHeight: 20,
              letterSpacing: 0.17,
              alignSelf: 'center',
            }}
          >
            {item.name}
          </Text>
          {valuesname}
        </View>
      )
    }
  }

  //颜色卡片列表
  _colorList( item, index,colorData) {
    return(
      <View>
        <TouchableOpacity
          disabled={false}
          key={item.attrValId}
          activeOpacity={1}
          style={{
            paddingHorizontal: 16,
            paddingVertical: 6,
            borderRadius: 100,
            borderColor: item.isChecked ? '#E14C46' : '#DDD',
            borderWidth: 1,
            justifyContent: 'center',
            alignItems: 'center',
            marginRight: 15,
            width: 160,
            marginTop : 5
          }}
          onPress={() => {
            colorData.forEach(touchData => {
              touchData.isChecked = false
            })
            item.isChecked = true
            const touchColor = {};
            touchColor.children = item;
            this.props.dispatch(
              createAction('optional/getPriceByColorId')({
                organizationId : this.props.optionData[0].saleOrgId,
                customerId : CUSTOMERINFO.id,
                goodsId : this.props.optionData[0].goodsId,
                orderTypeId : '01',
                paletteId : item.attrValId,
                shopId : ''
              })
            ).finally(() => {
              if(this.props.goodsPriceByColor && this.props.goodsPriceByColor.length) {
                touchColor.goodsPriceByColor = this.props.goodsPriceByColor;
                this.props.chooseColor(touchColor);
              }
            })
          }}
        >
          <Text
            style={{
              color: item.isChecked ? '#E14C46' : '#333',
              fontSize: 12,
              lineHeight: 17,
            }}
            numberOfLines={1}
          >
            {item.attrValName}
          </Text>
        </TouchableOpacity>
      </View>
    )
  }

  //根据色卡号查询调色
  getColorByCode(colorCode) {
    const { optionData } = this.props
    console.log('getColorByCode==========>',colorCode)
    this.props.dispatch(
      createAction('optional/getColorByGroups')({
        id : optionData[0].goodsId,
        groupId : "",
        colourCode : colorCode?colorCode.toUpperCase():''
      })
    )
  }

  render() {
    console.log(this.props)
    const { optionData, chooseOpt,colorData } = this.props
    if (this.props.havaOpt) {
      const optChoose = []
      optionData.newGoodsAttrVals.sort(
        (a, b) => a.isOptionalAttr - b.isOptionalAttr
      )
      optionData.goodsAttrVals.forEach(data => {
        if (data.isOptionalAttr) {
          if (data.isChecked) {
            optChoose.push(data.attrValName)
          } else if (data.productAttrTypeCode == '04')
            optChoose.push(data.attrValName)
        }
      })
      return (
        <View
          style={{
            marginBottom: 10,
            paddingBottom: 20,
            paddingTop: 10,
            borderBottomColor: '#EEE',
            borderBottomWidth: 1 / PixelRatio.get(),
          }}
        >
          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            <Text style={styles.titleText}>子件：</Text>
            <Text style={styles.contentText}>
              {optionData.childGoodsName || optionData.goodsDisplayName}
            </Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              marginTop: 10,
              marginBottom: 10,
              alignItems: 'center',
            }}
          >
            <Text style={styles.titleText}>已选：</Text>
            <Text style={styles.contentText}>{optChoose.join(' | ')}</Text>
          </View>
          <FlatList
            keyExtractor={(item, index) => index}
            data={optionData.newGoodsAttrVals}
            extraData={{ ...this.props, ...this.state }}
            // columnWrapperStyle={{ flexWrap: "wrap" }}
            // numColumns={2}
            renderItem={({ item, key }) => this._optionalRow(item, key)}
          />
        </View>
      )
    } else {
      // optionData.sort((a, b) => a.isOptionalAttr - b.isOptionalAttr)
      return (
        <View>
          {/* <FlatList
            keyExtractor={(item, index) => index}
            data={optionData}
            extraData={{ ...this.props, ...this.state }}
            // columnWrapperStyle={{ flexWrap: "wrap" }}
            // numColumns={2}
            renderItem={({ item, key }) => this._optionalRow(item, key)}
          /> */}
          <Input
            // autoFocus={true}
            style={{
            //   //     fontSize: 12,
            //   //     lineHeight: 20,
            //   //     letterSpacing: 0.38,
            //   //     color: '#333',
            //   //     marginTop: 4,
            //   //     height: 32,
            //   //     borderRadius: 2,
            //   //     paddingLeft: 5,
            //   height: 32,
            //   // width: width - 50,
            //   borderRadius: width / 2,
            //   // alignSelf: 'center',
            //   paddingLeft: 14,

              height: 28,
              width: width - 50,
              marginTop: 20,
              borderRadius: width / 2,
              alignSelf: 'center',
              paddingLeft: 14,
            }}
            textStyle={{
              paddingLeft: 10,
              height: 28,
              fontSize: 11,
              padding: 0,
            }}
            iconSize={14}
            //blurOnSubmit={true}
            multiline={false}
            textInputBacg={'#F5F5F5'}
            iconColor={'#CCC'}
            placeholderTextColor={'#CCC'}
            placeholderSize={8}
            placeholder = {'请输入颜色编码'}
            onchangeFn={e => {
            // onSubmitEditing={e => {
              this.getColorByCode(e)
            }}
          />
          <Text
            style={{
              color: '#999',
              fontSize: 14,
              marginTop: 15,
              lineHeight: 20,
              letterSpacing: 0.17,
            }}
          >
            调色选项
          </Text>
          <FlatList
            keyExtractor={(item, index) => index}
            style={{height:280}} 
            data={colorData&&colorData.length&&colorData[0].goodsAttrVals}
            renderItem={({ item, key}) => this._colorList(item, key,colorData[0].goodsAttrVals)}
            numColumns= {2}
          />
        </View>
      )
    }
  }
}

const styles = StyleSheet.create({
  titleText: {
    fontSize: 14,
    lineHeight: 20,
    color: '#999',
  },
  contentText: {
    flex: 1,
    fontSize: 13,
    lineHeight: 18,
    color: '#333',
  },
})
export default OptFlatList