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

import React, { Component } from 'react'
import {
  View,
  Text,
  PixelRatio,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  Image,
  FlatList,
  Dimensions,
  Animated,
  TextInput,
} from 'react-native'
import phonaq from '../../../static/images/defaultimg.jpg'
import Icon from '../../../components/Iconfont/Iconfont'
import { Bubble, ModalEcx, CountNum } from '../../../components'
import { ScaleUtil, accMul } from '../../../utils/utils'
import { ImageBaseUrl } from '../../../utils/fetch/Fetchx'
import OptFlatList from './OptFlatList'
import {
  SpecificationMethod,
  _isContained,
  _isArrEqual,
  checkedKey,
} from '../../../utils/SpecificationMethod'
import Toast from 'react-native-root-toast'
const { width } = Dimensions.get('window')

export default class Specification extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: {},
      mockdata: [],
      proid: '',
      isCheckVal: [],
      isCheckName: [],
      noticeOpacity: new Animated.Value(0),
      noicename: '',
      vcode: '',
      price: '',
      picture: '',
      submit: false,
      totalAmt: 0,
      orderNum: 1,
      conversionRate: 1,
      // 不启动聚合
      AttrValues: [],
      optionData: [],
      chooseColor: ""
    }
  }

  // 选配开始入口
  _defaultOptional(optionData) {
    const {colorData } = this.props;
    if(colorData && colorData.length) {
      colorData[0].goodsAttrVals.forEach(touchData => {
        touchData.isChecked = false
      })
    }
    this.setState({ optionData: JSON.parse(JSON.stringify(optionData)),chooseColor:"" })
  }
  
  //选择的色卡颜色
  _chooseColor(colorData) {
    const {optionData} = this.state;
    optionData.chooseColor = colorData;
    if(colorData) {
      this.setState({
        chooseColor : colorData,
        price : colorData.goodsPriceByColor[0].goodsPrice,
        optionData : optionData
      })
    }
  }

  //默认选择该商品自由属性
  _defaultVfree(data, attrVals) {
    const freeArr = data.polyAttrsDtoList
    let vfreeda = []
    //将所选商品的自由辅助属性有值的都存在数组vfreeda中
    attrVals.map(item => vfreeda.push(item.attrValId))
    //筛选出的自由辅助属性vfreeda 与 自由辅助属性库匹配，并勾选
    for (let j = 0; j < freeArr.length; j++) {
      for (let g = 0; g < freeArr[j].values.length; g++) {
        if (vfreeda.indexOf(freeArr[j].values[g].id) != -1) {
          freeArr[j].values[g].isChecked = true
        } else {
          freeArr[j].values[g].isChecked = false
        }
      }
    }

    this.setState({
      mockdata: freeArr,
      submit: false,
    })
    //'default是标注从默认开始走'
    SpecificationMethod(freeArr, data, e => this.defaultMethod(e))
  }

  defaultMethod(e) {
    this.state.isCheckVal = e.checktrue
    this.state.isCheckName = e.checkname

    // 选择商品
    this._productSelect(e.data)
    this.setState({
      mockdata: e.freeArr,
      data: e.data,
    })
  }

  //对选择的属性找对应商品（第四步）
  _productSelect(data, verify) {
    const isCheckVal = this.state.isCheckVal
    const prodata = data.goodsInfos
    for (let prodataFirst of Object.keys(prodata)) {
      if (
        _isContained(prodata[prodataFirst], isCheckVal) &&
        _isArrEqual(prodata[prodataFirst], isCheckVal)
      ) {
        if (!verify) {
          this.props.cb(prodataFirst)
          this.setState({ submit: true })
        } else {
          return true
        }
      }
    }
  }

  _submitOrder() {
    if (this.toast) {
      Toast.hide(this.toast)
    }
    if (
      this.state.optionData &&
      this.state.optionData.length > 0 &&
      this.state.optionData.every(itea => itea.isChoose)
    ) {
      if (this._productSelect(this.state.data, true)) {
        this.props.cb(this.state.orderNum, this.state.optionData, 'touchaddd')
      } else {
        this.toast = Toast.show('所选属性没有对应商品！', {
          position: toastHeight,
        })
      }
    } else {
      this.toast = Toast.show('请先选择选配属性后再加入购物车！', {
        position: toastHeight,
      })
    }
  }

  _submitWithOutPloy() {
    // let returnOptionData = [];
    // this.state.optionData.forEach(item => {
    //   if (item.isChoose) {
    //     returnOptionData.push(item.isChoose);
    //   } else {
    //     returnOptionData = returnOptionData.concat(item.item);
    //   }
    // });
    if(!this.state.optionData.chooseColor) {
      return;
    }
    this.props.cb(this.state.orderNum, this.state.optionData, 'touchaddd')
  }

  //提示框渐显渐隐动画
  _noticeFun(val) {
    if (!val) {
      val = 0
    }
    Animated.timing(
      // 随时间变化而执行的动画类型
      this.state.noticeOpacity, // 动画中的变量值
      {
        toValue: val, // 透明度最终变为1，即完全不透明
      }
    ).start()
  }

  // 选择每行标签
  _proCategoryred(val, index, bool) {
    //对提示框进行初始化并清除延时
    this._noticeFun(0)
    clearTimeout(this.settime)
    if (bool) {
      for (let i = 0; i < this.state.mockdata.length; i++) {
        for (let j = 0; j < this.state.mockdata[i].values.length; j++) {
          delete this.state.mockdata[i].values[j].isChecked
          delete this.state.mockdata[i].values[j].isDisabled
          delete this.state.mockdata[i].values[j].isDisableTrue
        }
      }
      this._noticeFun(0.7)
      this.state.noicename = val[index].name
      //提示框显示2s后消失
      this.settime = setTimeout(this._noticeFun.bind(this), 2000)
      this.setState({ submit: false })
    }
    for (let i = 0; i < val.length; i++) {
      val[i].isChecked = false
    }
    val[index].isChecked = true
    this.setState({ mockdata: this.state.mockdata })
    SpecificationMethod(this.state.mockdata, this.state.data, e =>
      this.defaultMethod(e)
    )
    // this._proCateSelected(this.state.mockdata, this.state.data, val[index]);
  }

  // FlatList做的聚合列表
  _renderRow(val) {
    let item = val.values
    let valuesname = []
    let confirmred, confdisable, disabled
    for (let i = 0; i < item.length; i++) {
      if (checkedKey(item[i], 'isChecked') && item[i].isChecked === true) {
        confirmred = ['#E14C46', '#E14C46']
      } else {
        confirmred = ['#ddd', '#333']
      }
      if (checkedKey(item[i], 'isDisabled') && item[i].isDisabled === true) {
        ;(confdisable = 'dashed'), (confirmred = ['#ddd', '#ddd'])
      } else {
        confdisable = 'solid'
      }
      if (
        checkedKey(item[i], 'isDisableTrue') &&
        item[i].isDisableTrue === true
      ) {
        ;(confdisable = 'solid'), (confirmred = ['#ddd', '#ddd'])
      }
      valuesname.push(
        <TouchableOpacity
          disabled={item[i].isDisableTrue}
          key={i}
          activeOpacity={1}
          style={{
            // height: 30,
            paddingHorizontal: 16,
            paddingVertical: 6,
            borderRadius: 100,
            borderStyle: confdisable,
            borderColor: confirmred[0],
            borderWidth: 1,
            justifyContent: 'center',
            alignItems: 'center',
            marginRight: 15,
          }}
          onPress={() => {
            this._proCategoryred(item, i, item[i].isDisabled)
          }}
        >
          <Text
            style={{ color: confirmred[1], fontSize: 12, lineHeight: 17 }}
            numberOfLines={1}
          >
            {item[i].name}
          </Text>
        </TouchableOpacity>
      )
    }
    return (
      <View>
        <Text
          style={{
            color: '#999',
            fontSize: 14,
            marginTop: 15,
            lineHeight: 20,
            letterSpacing: 0.17,
          }}
        >
          {val.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>
    )
  }

  rowClosePoly(item) {
    return (
      <View
        style={{
          // height: 30,
          paddingHorizontal: 16,
          paddingVertical: 6,
          borderRadius: 100,
          borderColor: '#ddd',
          borderWidth: 1,
          justifyContent: 'center',
          alignItems: 'center',
          marginRight: 15,
        }}
      >
        <Text
          style={{ color: '#ddd', fontSize: 12, lineHeight: 17 }}
          numberOfLines={1}
        >
          {item.name}
        </Text>
      </View>
    )
  }

  _renderModalContent() {
    const {chooseColor} = this.state;
    return (
      <View style={styles.contentBox}>
        <View style={{ height: 20, backgroundColor: 'transparent' }} />
        <View
          style={{
            height: 101,
            backgroundColor: '#FFF',
            paddingLeft: 140,
            paddingTop: 20,
            justifyContent: 'space-between',
            paddingBottom: 20,
          }}
        >
          <Text
            style={{
              fontSize: 17,
              color: '#E70013',
              fontWeight: 'bold',
            }}
          >
            {CURRENCY.currencySign}
            {this.state.price || 0}
          </Text>
          <View
            style={{
              flexDirection: 'row',
              width: width * 0.5,
              backgroundColor: '#FFF',
              marginTop: 5,
            }}
          >
            <Text
              style={{
                fontSize: 12,
                lineHeight: 17,
                letterSpacing: 0.14,
                color: '#999',
              }}
            >
              {"已选："+(chooseColor?(chooseColor.children.custDocGroupName+"->"+chooseColor.children.attrValName):"")}
            </Text>
            <ScrollView>
              <Text
                style={{
                  fontSize: 12,
                  lineHeight: 17,
                  letterSpacing: 0.14,
                  color: '#151515',
                }}
              >
                {this.state.isCheckName.join(' | ')}
              </Text>
            </ScrollView>
          </View>
          <TouchableOpacity
            onPress={() => {
              this.closeModalCate()
            }}
            style={{ position: 'absolute', right: 11, top: 11 }}
          >
            <Icon name="icon-icon-guanbianniu" size={28} color="#999" />
          </TouchableOpacity>
        </View>
        {this.state.picture ? (
          <View
            style={{
              position: 'absolute',
              marginLeft: 10,
              borderColor: '#EEE',
              borderWidth: 1 / PixelRatio.get(),
              borderRadius: 4,
              backgroundColor: '#FFF',
            }}
          >
            <Image
              source={{
                uri: ImageBaseUrl + this.state.picture,
              }}
              style={{
                height: 120,
                width: 120,
              }}
            />
          </View>
        ) : (
          <View
            style={{
              position: 'absolute',
              marginLeft: 10,
              borderColor: '#EEE',
              borderWidth: 1 / PixelRatio.get(),
              borderRadius: 4,
              backgroundColor: '#FFF',
            }}
          >
            <Image
              source={phonaq}
              style={{
                height: 120,
                width: 120,
              }}
            />
          </View>
        )}
        <View style={styles.Categorycontain}>
          <View style={{ backgroundColor: '#FFF', height: 15 }} />
          {/* 提示栏  */}
          <Animated.View
            style={{
              width: width,
              backgroundColor: '#E14C46',
              position: 'absolute',
              zIndex: 1,
              opacity: this.state.noticeOpacity,
              justifyContent: 'center',
              alignItems: 'center',
              paddingTop: 10,
              paddingBottom: 10,
            }}
          >
            <Text style={{ color: '#FFF', fontSize: 12 }}>
              {'"' +
                this.state.noicename +
                '"' +
                '与其他已选项无法组成可售商品，请重选'}
            </Text>
          </Animated.View>

          <ScrollView 
            style={{ flex: 1 }}
            keyboardShouldPersistTaps={'handled'}
          >
            {this.state.mockdata && this.state.mockdata.length > 0 ? (
              <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: '600' }}>
                规格选项
              </Text>
            ) : null}
            <FlatList
              keyExtractor={(item, index) => index}
              data={this.state.mockdata}
              extraData={this.state}
              // columnWrapperStyle={{ flexWrap: "wrap" }}
              //numColumns={2}
              //horizontal={false}
              renderItem={({ item }) => this._renderRow(item)}
            />

            {/* 选配 */}
            {/* {this.state.optionData && this.state.optionData.length > 0 ? (
              <Text
                style={{
                  fontSize: 14,
                  lineHeight: 20,
                  fontWeight: '600',
                  marginTop: 20,
                }}
              >
                选配选项
              </Text>
            ) : null} */}
            <OptFlatList optionData={this.state.optionData}  chooseColor={this._chooseColor.bind(this)}/>
            {/* <View style={{ marginTop: 15 }}>
              <Text style={{ color: '#999', fontSize: 14, marginBottom: 10 }}>
                数量
              </Text>
              <View style={{ flexDirection: 'row' }}>
                <CountNum
                  defaultValue={this.state.orderNum}
                  fontSize={20}
                  size={30}
                  top={0}
                  callback={nv => {
                    this.state.orderNum = nv
                    this.state.totalAmt = ScaleUtil(
                      accMul(this.state.price, this.state.orderNum),
                      CURRENCY.currencyAmountScale
                    )
                    this.setState({
                      orderNum: nv,
                    })
                  }}
                />
                <Text
                  style={{
                    alignSelf: 'center',
                    fontSize: 12,
                    lineHeight: 17,
                    letterSpacing: 0.14,
                    color: '#999',
                    marginLeft: 15,
                  }}
                >
                  主数量
                </Text>
                <Text
                  style={{
                    alignSelf: 'center',
                    fontSize: 12,
                    lineHeight: 17,
                    letterSpacing: 0.14,
                    color: '#333',
                    marginLeft: 4,
                    marginTop: 2,
                  }}
                >
                  {accMul(this.state.orderNum, this.state.conversionRate)}
                </Text>
              </View>
            </View> */}
          </ScrollView>
        </View>
        <View
          style={{
            height: 45 + HEADERSTYLE.paddingBottom,
            paddingBottom: HEADERSTYLE.paddingBottom,
            backgroundColor: '#FFF',
            borderTopColor: '#ddd',
            borderTopWidth: 1 / PixelRatio.get(),
            flexDirection: 'row',
            justifyContent: 'space-between',
          }}
        >
          {/* 加入购物车 */}
          {this.state.submit ? (
            <View style={{ flex: 1, flexDirection: 'row' }}>
              <View
                style={{
                  flex: 2,
                  alignSelf: 'center',
                  paddingLeft: 10,
                  flexDirection: 'row',
                }}
              >
                <Text style={{ fontSize: 12, lineHeight: 17, color: '#333' }}>
                  订货金额：
                </Text>
                <Text
                  style={{
                    fontSize: 14,
                    lineHeight: 20,
                    letterSpacing: 0.17,
                    color: '#E14C46',
                  }}
                >
                  {CURRENCY.currencySign}
                  {this.state.totalAmt}
                </Text>
              </View>
              <TouchableOpacity
                onPress={() => this._submitOrder()}
                style={{
                  flex: 1,
                  backgroundColor: '#E14C46',
                }}
              >
                <View
                  style={{
                    flex: 1,
                    alignSelf: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <Text
                    style={{
                      fontSize: 14,
                      color: '#FFF',
                      lineHeight: 20,
                    }}
                  >
                    加入购物车
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
          ) : this.state.optionData &&
          this.state.mockdata &&
          this.state.mockdata.length == 0 ? (
            <View style={{ flex: 1, flexDirection: 'row' }}>
              <View
                style={{
                  flex: 2,
                  alignSelf: 'center',
                  paddingLeft: 10,
                  flexDirection: 'row',
                }}
              >
                <Text style={{ fontSize: 12, lineHeight: 17, color: '#333' }}>
                  订货金额：
                </Text>
                <Text
                  style={{
                    fontSize: 14,
                    lineHeight: 20,
                    letterSpacing: 0.17,
                    color: '#E14C46',
                  }}
                >
                  {CURRENCY.currencySign}
                  {this.state.price}
                </Text>
              </View>
              <TouchableOpacity
                onPress={() => this._submitWithOutPloy()}
                style={{
                  flex: 1,
                  backgroundColor: this.state.optionData.chooseColor?'#E14C46':'gray',
                }}
              >
                <View
                  style={{
                    flex: 1,
                    alignSelf: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <Text
                    style={{
                      fontSize: 14,
                      color: '#FFF',
                      lineHeight: 20,
                    }}
                  >
                    加入购物车
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
          ) : (
            <View style={{ flex: 1, flexDirection: 'row' }}>
              <View
                style={{
                  flex: 2,
                  alignSelf: 'center',
                  paddingLeft: 10,
                  flexDirection: 'row',
                }}
              >
                <Text style={{ fontSize: 12, lineHeight: 17, color: '#333' }}>
                  订货金额：
                </Text>
                <Text
                  style={{
                    fontSize: 14,
                    lineHeight: 20,
                    letterSpacing: 0.17,
                    color: '#E14C46',
                  }}
                >
                  {CURRENCY.currencySign}
                  {this.state.totalAmt}
                </Text>
              </View>
              <View
                style={{
                  flex: 1,
                  backgroundColor: '#969696',
                }}
              >
                <View
                  style={{
                    flex: 1,
                    alignSelf: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <Text
                    style={{
                      fontSize: 14,
                      color: '#FFF',
                      lineHeight: 20,
                    }}
                  >
                    加入购物车
                  </Text>
                </View>
              </View>
            </View>
          )}
        </View>
      </View>
    )
  }

  _openModalCate(va, data, showData, detailDatas,colorGroups) {
    let goodsAttrs = [],
      optionalAtts = [],
      obj = {},
      result = []
    this.setState({
      price: showData.price,
      picture: showData.picture,
      conversionRate: detailDatas.conversionRate,
      totalAmt: ScaleUtil(
        accMul(showData.price, this.state.orderNum),
        CURRENCY.currencyAmountScale
      ),
    })
    this.mdCategory._setModalVisible(va)
    goodsAttrs = detailDatas.goodsAttrVals.filter(item => !item.isOptionalAttr)
    optionalAtts = detailDatas.goodsAttrVals.filter(item => item.isOptionalAttr)

    if (data && Object.keys(data).length > 0) {
      this._defaultVfree(data, goodsAttrs)
    }

    // 对特征属性合并
    optionalAtts.map(item => {
      obj[item.productAttrId]
        ? obj[item.productAttrId].push(item)
        : (obj[item.productAttrId] = [].concat(item))
    })
    // productAttrId
    for (let i in obj) {
      result.push({
        name: obj[i].length > 0 && obj[i][0].name,
        typeCode: obj[i].length > 0 && obj[i][0].productAttrTypeCode,
        id: i,
        item: obj[i],
        colorGroups : colorGroups,
        goodsId: detailDatas.id,
        saleOrgId : detailDatas.saleOrgId
      })
    }
    this._defaultOptional(result);
  }

  closeModalCate() {
    this.mdCategory._setModalVisible(false)
  }
  _refreshdata(price, carouselInfos) {
    this.setState({
      // vcode: data.vcode,
      price: price,
      picture: carouselInfos,
    })
  }

  render() {
    return (
      <ModalEcx
        animationType={'fade'}
        ref={mdCategory => (this.mdCategory = mdCategory)}
        content={this._renderModalContent()}
      />
    )
  }
}
const styles = StyleSheet.create({
  contentBox: {
    height: '80%',
    width: '100%',
    bottom: 0,
    position: 'absolute',
    backgroundColor: 'transparent',
  },
  Categorycontain: {
    flex: 1,
    padding: 10,
    paddingTop: 0,
    backgroundColor: '#FFF',
    borderBottomColor: '#ddd',
    borderBottomWidth: 1 / PixelRatio.get(),
  },
})