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

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  StatusBar,
  Dimensions,
  PixelRatio,
  TouchableOpacity,
  Text,
  FlatList,
  ScrollView,
} from 'react-native'
import { connect } from 'react-redux'
import { CarouselHorizontal } from '../../../components/carousel'
import { NavigationActions, createAction } from '../../../utils'
import { ScaleUtil, accMul } from '../../../utils/utils'
import { ImageBaseUrl } from '../../../utils/fetch/Fetchx'
import Icon from '../../../components/Iconfont/Iconfont'
import Specification from './Specification'
import Promotions from './Promotions'
import morePng from '../../../static/images/ic-moredian.png'
import AddShopModel from '../../common/datamodel/dataModel'
import Toast from 'react-native-root-toast'

const { width, height } = Dimensions.get('window')
@connect(({ theme, detail, optional, shoppingcart }) => ({
  ...theme,
  ...detail,
  ...optional,
  ...shoppingcart,
}))
class Commodity extends Component {
  constructor() {
    super()
    this.state = {
      ScrollLocked: false,
    }
  }

  componentDidMount = () => {
    let flagone = false,
      flagsec = false
    this.props
      .dispatch(
        createAction('detail/getSpec')({
          product: this.props.detailDatas.productId,
          id: this.props.detailDatas.id,
          customer: CUSTOMERINFO.id,
        })
      )
      .finally(() => {
        if (this.props.detailDatas) {
          flagone = true
        }
      })

    this.props
      .dispatch(
        createAction('optional/optionalByGoodIdSaga')({
          product: this.props.detailDatas.id,
        })
      )
      .finally(() => {
        if (this.props.detailSpec) {
          flagsec = true
        }
      })

      this.props
        .dispatch(
          createAction('optional/getColorByGroups')({
            id : this.props.detailDatas.id,
            groupId : "",
            colourCode : ""
          })
        )
    // if (
    //   this.props.TabopenSpec &&
    //   this.props.navigate.state.parame.userFor == "openModel" &&
    //   flagone &&
    //   flagsec
    // ) {
    //   this.openSpecification(
    //     this.props.detailSpec,
    //     this.props.detailDatas,
    //     this.props.detailPicts
    //   );
    // }
    // console.log(this.props, 422);
  }

  gotoDetail = () => {
    this.props.dispatch(NavigationActions.navigate({ routeName: 'Detail' }))
  }

  openSpecification(detailSpec, detailDatas, detailPicts,colorGroups) {
    let showData = {}
    showData.price = detailDatas.baseDiscountPrice || 0
    // showData.price = detailDatas.salePrice || detailDatas.basePrice;
    // showData.price = detailDatas.salePrice;
    showData.picture = detailPicts && detailPicts[0]
    this.mdCategory._openModalCate(true, detailSpec, showData, detailDatas,colorGroups)
  }

  PictureViews(Arr) {
    let pictures = []
    if (Arr && Arr.length > 0) {
      Arr.forEach((item, index) =>
        pictures.push(
          <Image
            key={index}
            source={{ uri: ImageBaseUrl + item }}
            resizeMode="cover"
            style={{ width: width, height: width - 60 }}
          />
        )
      )
    }
    return pictures
  }

  ProductInfo(detailDatas) {
    const ggdata2 = [
      {
        id: 1,
        key: '重量',
        value: detailDatas.grossWeight,
        unit: detailDatas.weightUnitName,
        precision: detailDatas.weightUnitPrecision,
      },
      // {
      //   id: 2,
      //   key: '体积',
      //   value: detailDatas.volume,
      //   unit: detailDatas.volumeUnitName,
      //   precision: detailDatas.volumeUnitPrecision,
      // },
      // { id: 3, key: "主数量", value: "-", unit: detailDatas.assistUnitName }
    ]
    let testdata = []
    for (let val of ggdata2) {
      testdata.push(
        <Text
          key={val.id}
          style={{
            fontSize: 12,
            lineHeight: 17,
            letterSpacing: 0.14,
            color: '#999',
          }}
        >
          {val.key}{' '}
          <Text
            style={{
              fontSize: 12,
              lineHeight: 17,
              letterSpacing: 0.14,
              color: '#333',
            }}
          >
            {ScaleUtil(val.value, val.precision)}
            {val.unit}
          </Text>
        </Text>
      )
    }
    return testdata
  }

  render() {
    const { detailDatas, detailPicts, detailSpec,colorGroups } = this.props
    console.log(detailDatas)
    let attrVals = []
    if (
      detailDatas &&
      detailDatas.goodsAttrVals &&
      detailDatas.goodsAttrVals.length > 0
    ) {
      detailDatas.goodsAttrVals.map(data => {
        if (!data.isOptionalAttr) {
          attrVals.push(data.attrValName)
        }
      })
    }
    return (
      <ScrollView
        showsHorizontalScrollIndicator={false}
        tabLabel={this.props.tabLabel}
        style={{ backgroundColor: '#EEE' }}
        scrollEnabled={!this.state.ScrollLocked}
      >
        <View style={styles.card}>
          {/* 轮播图 */}
          <View style={styles.image}>
            <CarouselHorizontal
              panResponBool={true}
              width={width}
              enableScroll={true}
              tintColor={'#E14C46'}
              touchArrStyle={{
                bottom: '8%',
                flexDirection: 'row',
              }}
              entertouchItemStyle={{
                marginRight: 12,
                width: 14,
                height: 8,
                borderRadius: 5,
              }}
              touchItemStyle={{
                backgroundColor: '#D8D8D8',
                opacity: 0.5,
                marginRight: 12,
                width: 8,
                height: 8,
                borderRadius: 4,
              }}
              imgTouch={a => {
                console.log(a)
              }}
            >
              {this.PictureViews(detailPicts)}
            </CarouselHorizontal>
          </View>
        </View>

        {/* 商品信息 */}
        <View>
          <View
            style={{
              backgroundColor: '#FFF',
              paddingVertical: 12,
              paddingLeft: 20,
              paddingRight: 10,
              borderTopColor: '#DDD',
              borderTopWidth: 1 / PixelRatio.get(),
            }}
          >
            <View style={{ flexDirection: 'row' }}>
              <Text
                style={{
                  flex: 1,
                  marginRight: 20,
                  fontSize: 14,
                  lineHeight: 20,
                  color: '#333',
                }}
              >
                {detailDatas.displayName}
              </Text>
            </View>

            <View
              style={{
                flexDirection: 'row',
                marginTop: 10,
                marginRight: 10,
              }}
            >
              <Text style={{ fontSize: 20, lineHeight: 28, color: '#E14C46' }}>
                {CURRENCY.currencySign}
                {detailDatas.baseDiscountPrice || 0}
              </Text>
              <Text
                style={{
                  marginTop: 10,
                  marginLeft: 23,
                  fontSize: 14,
                  color: '#ccc',
                  textDecorationLine: 'line-through',
                }}
              >
                {CURRENCY.currencySign}
                {detailDatas.basePrice || 0}
              </Text>
            </View>

            <View
              style={{
                flexDirection: 'column',
                justifyContent: 'space-between',
                marginTop: 10,
                marginRight: 10,
              }}
            > 
              <View>
                <Text style={{ fontSize: 12, lineHeight: 17, color: '#666' }}>
                  编码：{detailDatas.code}
                </Text>
              </View>
              <View>
                <Text style={{ fontSize: 12, lineHeight: 17, color: '#666' }}>
                  {/* 型号：{detailDatas.model?detailDatas.model.substring(0,10):""} */}
                  型号：{detailDatas.model?detailDatas.model:""}
                </Text>
              </View>
              <View>
                <Text style={{ fontSize: 12, lineHeight: 17, color: '#666' }}>
                  规格：{detailDatas.specification?(detailDatas.specification.split('/')[0]+'/'+detailDatas.basicUnitName):""}
                </Text>
              </View>
              {/* <Text
                style={{
                  fontSize: 12,
                  lineHeight: 17,
                  color: '#666',
                }}
              >
                库存：{detailDatas.stock || 9999}
                {detailDatas.orderUnitName}
              </Text> */}
            </View>
          </View>
          {/* 促销信息 */}
          {/* {detailDatas.isPromotion == 1 ? (
            <TouchableOpacity
              onPress={() => this.mdPromot._openModalCate(true)}
              style={{
                backgroundColor: '#FFF',
                marginTop: 10,
                flexDirection: 'row',
                paddingHorizontal: 20,
                paddingTop: 10,
              }}
            >
              <Text
                style={{
                  fontSize: 12,
                  lineHeight: 17,
                  letterSpacing: 0.14,
                  color: '#999',
                }}
              >
                促销
              </Text>
              <View style={{ flex: 1, marginLeft: 5 }}>
                <FlatList
                  keyExtractor={(item, index) => index}
                  data={[
                    { title: '满减', data: '满100件20' },
                    { title: '满额返券', data: '全场满199元包邮' },
                    { title: '组合', data: '搭配商品A可以立省30元' },
                  ]}
                  extraData={this.state}
                  renderItem={({ item, index }) => (
                    <View style={{ flexDirection: 'row', marginBottom: 10 }}>
                      <View
                        style={{
                          paddingVertical: 2,
                          paddingHorizontal: 8,
                          borderRadius: 100,
                          borderColor: '#E70013',
                          borderWidth: 1 / PixelRatio.get(),
                        }}
                      >
                        <Text
                          style={{
                            fontSize: 10,
                            lineHeight: 14,
                            letterSpacing: 0.14,
                            color: '#E70013',
                          }}
                        >
                          {item.title}
                        </Text>
                      </View>
                      <Text
                        style={{
                          fontSize: 12,
                          lineHeight: 17,
                          color: '#333',
                          marginLeft: 5,
                          marginTop: 1,
                        }}
                      >
                        {item.data}
                      </Text>
                    </View>
                  )}
                />
              </View>
              <Image
                resizeMode="contain"
                source={morePng}
                style={{ width: 30, height: 18 }}
              />
            </TouchableOpacity>
          ) : null} */}

          {/* 规格 */}
          {(detailSpec &&
            Object.keys(detailSpec).length > 0 &&
            detailSpec.polyAttrsDtoList.length > 0) ||
          (detailDatas &&
            detailDatas.goodsAttrVals &&
            detailDatas.goodsAttrVals.length > 0) ||
          detailDatas.isOptional ? (
            <TouchableOpacity
              activeOpacity={1}
              onPress={() =>
                this.openSpecification(detailSpec, detailDatas, detailPicts,colorGroups)
              }
              style={{
                backgroundColor: '#FFF',
                marginTop: 10,
                paddingHorizontal: 20,
                paddingVertical: 12,
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}
            >
              <View
                style={{
                  flexDirection: 'row',
                  width: width * 0.73,
                }}
              >
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 17,
                    color: '#999',
                    marginRight: 6,
                  }}
                >
                  选择调色
                </Text>
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 17,
                    color: '#333',
                    marginTop: 1,
                  }}
                >
                  {attrVals.join(' | ')}
                </Text>
              </View>
              <Image
                resizeMode="contain"
                source={morePng}
                style={{ width: 24, height: 5, alignSelf: 'center' }}
              />
            </TouchableOpacity>
          ) : null}
          {/* 重量 信息等... */}
          <View
            style={{
              backgroundColor: '#FFF',
              marginTop: 10,
              paddingHorizontal: 20,
              paddingVertical: 12,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}
          >
            {this.ProductInfo(detailDatas)}
          </View>
          {/* 规格 */}
          <Specification
            cb={(cproductid, optionData, touch) => {
              touch == 'touchaddd'
                ? this.addToShopcartfen(cproductid, optionData)
                : this._cbClick(cproductid)
            }}
            ref={mdCategory => (this.mdCategory = mdCategory)}
            colorData= {this.props.colorData}
          />

          {/* 促销 */}
          <Promotions ref={mdPromot => (this.mdPromot = mdPromot)} />
        </View>
      </ScrollView>
    )
  }

  // 选配请求参数
  optionalPostModel(data, optionData) {
    let optResult = [],
      goodsAttrsObj = {},
      goodsOptVals = []
    goodsOptVals.push({
      attrValCode: optionData.chooseColor.children.attrValCode,
      attrValId: optionData.chooseColor.children.attrValId,
      attrValName: optionData.chooseColor.children.attrValName,
      goodsOptId: "",
      prodAttrStrucItemId: optionData.chooseColor.children.prodAttrStrucItemId,
      prodAttrStrucItemName: optionData.chooseColor.children.name
    })
    // optResult = optionData.map(item => {
    //   goodsAttrsObj[item.isChoose.name] = item.isChoose.attrValName
    //   goodsOptVals.push({
    //     attrValCode: item.isChoose.attrValCode,
    //     attrValId: item.isChoose.attrValId,
    //     attrValName: item.isChoose.ttrValName,
    //     goodsOptId: item.isChoose.id,
    //     prodAttrStrucItemId: item.isChoose.name,
    //     prodAttrStrucItemName: item.isChoose.prodAttrStrucItemName,
    //   })
    //   return `${item.isChoose.name}:${item.isChoose.attrValName}`
    // })
    const returnData = {
      goodsId: data.id,
      optResult: optionData[0].name+":"+optionData.chooseColor.children.attrValName,
      uniqueKey: data.id,
      goodsOptVals: goodsOptVals,
    }

    return { ...returnData, ...goodsAttrsObj }
  }

  // 规格添加购物车
  addToShopcartfen(orderNum, optionData) {
    let newGoodsAttrs = [],
      newDetailDatas = JSON.parse(JSON.stringify(this.props.detailDatas))
    newGoodsAttrs = newDetailDatas.goodsAttrVals.filter(
      item => !item.isOptionalAttr
    )
    newGoodsAttrs = newGoodsAttrs.concat(optionData)
    newDetailDatas.goodsAttrVals = newGoodsAttrs

    const saveOpt = this.optionalPostModel(newDetailDatas, optionData),
      postData = AddShopModel(
        newDetailDatas,
        CUSTOMERINFO.id,
        CUSTOMERINFO.customerRankCode
      )
    this.props
      .dispatch(
        createAction('optional/saveGoodsOpt')([{ goodsOptDtos: [saveOpt] }])
      )
      .finally(() => {
        if (this.props.goodsOpt && this.props.goodsOpt.length > 0) {
          const goodsOptIds = []
          this.props.goodsOpt.forEach(item => {
            item.goodsOptDtos.forEach(itemSec => {
              goodsOptIds.push(itemSec.id)
            })
          })

          postData.baseGoodsOptId = goodsOptIds.join()
          postData.baseGoodsOptValue = saveOpt.optResult

          postData.orderNum = orderNum
          postData.mainNum = accMul(postData.orderNum, postData.conversionRate)
          postData.ext04 = '1'
          postData.ext05 = saveOpt.goodsOptVals[0].attrValId
          this.props.dispatch(createAction('shoppingcart/addShop')(postData))
          this.getCartNum()
          this.mdCategory.closeModalCate()
        }
      })

    // postData.orderNum = orderNum;
    // postData.mainNum = accMul(postData.orderNum, postData.conversionRate);
    // this.props.dispatch(createAction("shoppingcart/addShop")(postData));
    // this.getCartNum();
  }
  getCartNum() {
    // 获取购物车数量
    this.props.dispatch(
      createAction('shoppingcart/getCartNum')({ customer: CUSTOMERINFO.id })
    )
    this.toast = Toast.show('加入购物车成功！', {
      position: toastHeight,
    })
    //this.mdCategory.closeModalCate()
  }
  //自由辅助属性回调函数
  async _cbClick(cproductid) {
    this.state.prodId = cproductid
    this.props.dispatch(
      createAction('detail/getDetail')({
        inFo: {
          id: cproductid,
          customer: CUSTOMERINFO.id,
          supplier: this.props.detailDatas.saleOrgId,
        },
        useFor: 'specification',
        refresh: this.mdCategory,
      })
    )
    // await this.funProductDetail();
    // await this.funPicture();
    // await this._queryIsFavourite(cproductid);
    //其中this.state.carouselInfos[0]&&this.state.carouselInfos[0].cslPic 先判断carouselInfos[0]是否有值，无值则不传
    // this.mdCategory._refreshdata(
    //   this.state.cateData,
    //   this.state.basePrice,
    //   this.state.carouselInfos[0] && this.state.carouselInfos[0].cslPic
    // );
  }
}

const styles = StyleSheet.create({
  card: {
    flex: 1,
  },
  image: {
    height: width - 60,
  },
})

export default Commodity