occ-mobile/app/containers/commodity/CommodityShowbase.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  StatusBar,
  Dimensions,
  TouchableOpacity,
  PixelRatio,
  Text,
  FlatList,
  ActivityIndicator,
} from 'react-native'
import { connect } from 'react-redux'

import Icon from '../../components/Iconfont/Iconfont'
import { NavigationActions, createAction, Storage } from '../../utils'
import Input from '../../components/input/index'
import Checkbox from '../../components/checkbox/index'
import Grid from '../../components/Grid'
import Collapsible from 'react-native-collapsible'
import SearchModal from './SearchResults'
import dataModel from '../common/datamodel/dataModel'
import ToastView from '../../components/ToastView'

const { width, height } = Dimensions.get('window')

const AllData = {
  saleOrganizationName: '全部供应商',
  saleOrganizationId: '',
}

const ProductLineData = {
  productLineName: '全部产品线',
  productLineId: '',
}

@connect(({ theme, search, shoppingcart, mine }) => ({
  ...theme,
  ...search,
  ...shoppingcart,
  ...mine,
}))
class CommodityShowbase extends Component {
  constructor(props) {
    super(props)
    this.state = {
      allProDatas: [],
      priceCompany: false,
      listRowBool: true,
      filterIndex1: 0,
      filterIndex2: 0,
      collapsed: true,
      collapsed1: false,
      collapsed2: false,
      gridStyle: {
        viewWid: {
          width: width,
          height: width * 0.4 + 1,
          borderBottomColor: '#F5F5F5',
          borderBottomWidth: 1 / PixelRatio.get(),
        },
        imgWid: {
          width: width * 0.4,
          height: width * 0.4,
        },
      },
      // searchCondition: {
      isNew: false,
      productLineId: ProductLineData.productLineId,
      productLineName: ProductLineData.productLineName,
      keyWord: props.navigation.state.params.searchval,
      organizationId: AllData.saleOrganizationId,
      organizationName: AllData.saleOrganizationName,
      Loading: false,
      // }
    }
    this.page = 0
    this.size = 10
  }

  componentDidMount = () => {
    this.props.dispatch(
      createAction('mine/getCusSup')({
        customerId: CUSTOMERINFO.id,
        customerRankCode: CUSTOMERINFO.customerRankCode,
        addDefaultData: 'productLine',
      })
    )
    this.props.dispatch(
      createAction('search/searchGoodsAll')({
        comeFrom: 'Filter',
        actionData: [],
        pageInfo: { page: 0, size: this.size },
        searchInfo: this.SearchVal(),
      })
    )
    this.setState({ keyWord: this.props.navigation.state.params.searchval })
  }

  onRefresh() {
    this._SearchGood()
  }

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

  toggleExpanded(e) {
    if (!this.state.collapsed1 && !this.state.collapsed2) {
      e == '1'
        ? this.setState({
            collapsed: !this.state.collapsed,
            collapsed1: !this.state.collapsed1,
          })
        : this.setState({
            collapsed: !this.state.collapsed,
            collapsed2: !this.state.collapsed2,
          })
    } else {
      this.state.collapsed1
        ? e == '1'
          ? this.setState({
              collapsed: !this.state.collapsed,
              collapsed1: !this.state.collapsed1,
            })
          : this.setState({
              collapsed1: !this.state.collapsed1,
              collapsed2: !this.state.collapsed2,
            })
        : e == '1'
          ? this.setState({
              collapsed1: !this.state.collapsed1,
              collapsed2: !this.state.collapsed2,
            })
          : this.setState({
              collapsed: !this.state.collapsed,
              collapsed2: !this.state.collapsed2,
            })
    }
  }

  filterIndexfun(item, selnum) {
    if (selnum == '1') {
      this.state.productLineId = item.item.productLineId
      this.setState({
        filterIndex1: item.index,
        productLineName: item.item.productLineName,
        productLineId: item.item.productLineId,
        collapsed: !this.state.collapsed,
        collapsed1: !this.state.collapsed1,
      })
    } else {
      this.state.organizationId = item.item.saleOrganizationId
      this.setState({
        filterIndex2: item.index,
        organizationName: item.item.saleOrganizationName,
        organizationId: item.item.saleOrganizationId,
        collapsed: !this.state.collapsed,
        collapsed2: !this.state.collapsed2,
      })
    }
    this.onRefresh()
  }

  filterRender(item) {
    if (this.state.collapsed1 && !this.state.collapsed2) {
      return (
        <TouchableOpacity
          key={item.item.id}
          style={{
            padding: 10,
          }}
          onPress={() => this.filterIndexfun(item, '1')}
        >
          {this.state.filterIndex1 == item.index ? (
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}
            >
              <Text style={{ color: 'red', alignSelf: 'center' }}>
                {item.item.productLineName}
              </Text>
              <Icon name="icon-icon-duigou" size={20} color={'red'} />
            </View>
          ) : (
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                paddingVertical: 5,
              }}
            >
              <Text style={{ alignSelf: 'center', color: '#333' }}>
                {item.item.productLineName}
              </Text>
            </View>
          )}
        </TouchableOpacity>
      )
    } else {
      return (
        <TouchableOpacity
          key={item.item.id}
          style={{
            padding: 10,
          }}
          onPress={() => this.filterIndexfun(item, '2')}
        >
          {this.state.filterIndex2 == item.index ? (
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}
            >
              <Text style={{ color: 'red', alignSelf: 'center' }}>
                {item.item.saleOrganizationName}
              </Text>
              <Icon name="icon-icon-duigou" size={20} color={'red'} />
            </View>
          ) : (
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                paddingVertical: 5,
              }}
            >
              <Text style={{ alignSelf: 'center', color: '#333' }}>
                {item.item.saleOrganizationName}
              </Text>
            </View>
          )}
        </TouchableOpacity>
      )
    }
  }

  checkClick(bool, checkname) {
    switch (checkname) {
      case 'newpro':
        this.state.isNew = bool
        this.setState({ isNew: bool })
        break
      case 'inventory':
        console.log('inventory>>>>' + bool)

        break
      case 'hotsale':
        console.log('hotsale>>>>>' + bool)

        break
    }
    // this._SearchGood();
    this.onRefresh()
  }

  SearchVal() {
    let searchVal = {}
    searchVal = {
      search_customerId: CUSTOMERINFO.id,
      search_customerRankCode: CUSTOMERINFO.customerRankCode,
      search_EQ_isEnable: 1,
      // search_EQ_isOptional: 0,
      // search_EQ_enableStrucManage: 0
    }

    if (this.state.isNew) {
      searchVal.search_EQ_isNew = 1
    }
    if (this.state.productLineId) {
      searchVal.search_EQ_productLineId = this.state.productLineId
    }
    if (this.state.keyWord) {
      searchVal.search_keywords = this.state.keyWord
    }
    if (this.state.organizationId) {
      searchVal.search_organizationId = this.state.organizationId
    }
    return searchVal
  }

  _SearchGood() {
    this.props.dispatch(
      createAction('search/searchGoodsAll')({
        comeFrom: 'Filter',
        actionData: [],
        pageInfo: { page: 0, size: this.size },
        searchInfo: this.SearchVal(),
      })
    )
    this.page = 0
  }

  listRowCol() {
    if (this.state.listRowBool) {
      this.setState({
        listRowBool: !this.state.listRowBool,
        gridStyle: {
          viewWid: {
            borderRightColor: '#F5F5F5',
            borderRightWidth: 1 / PixelRatio.get(),
            borderBottomColor: '#F5F5F5',
            borderBottomWidth: 1 / PixelRatio.get(),
            width: width / 2,
            height: width / 2 + 110,
          },
          imgWid: {
            width: width / 2 - 1,
            height: width / 2,
          },
        },
      })
    } else {
      this.setState({
        listRowBool: !this.state.listRowBool,
        gridStyle: {
          viewWid: {
            width: width,
            height: width * 0.4 + 1,
            borderBottomColor: '#F5F5F5',
            borderBottomWidth: 1 / PixelRatio.get(),
          },
          imgWid: {
            width: width * 0.4,
            height: width * 0.4,
          },
        },
      })
    }
  }

  _refreshPlist(data) {
    this.state.keyWord = data
    this.setState({ keyWord: data })
    this.onRefresh()
  }

  render() {
    let selectcolor1, selectcolor2
    this.state.collapsed1 && !this.state.collapsed2
      ? (selectcolor1 = '#E14C46')
      : (selectcolor1 = '#333')
    this.state.collapsed2 && !this.state.collapsed1
      ? (selectcolor2 = '#E14C46')
      : (selectcolor2 = '#333')
    const {
      appTheme,
      listDatas,
      totalPages,
      shopListIds,
      SupplierInfo,
      productRefs,
      searchRefresh,
    } = this.props

    let filterData = []
    !this.state.collapsed1 && this.state.collapsed2
      ? (filterData = SupplierInfo)
      : (filterData = productRefs)

    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          backgroundColor={'transparent'}
          translucent={true}
        />
        <View
          style={{
            width: width,
            // height: 60,
            height: HEADERSTYLE.height,
            backgroundColor: '#FFF',
            flexDirection: 'row',
            justifyContent: 'space-between',
            paddingHorizontal: 10,
            // paddingBottom: 5
            // borderBottomColor: "#DDD",
            // borderBottomWidth: 1 / PixelRatio.get()
          }}
        >
          <TouchableOpacity
            style={{ alignSelf: 'flex-end', paddingBottom: 4 }}
            onPress={() => this.props.dispatch(NavigationActions.back())}
          >
            <Icon
              name="icon-icon-fanhui"
              // style={{ transform: [{ rotate: "90deg" }] }}
              size={24}
              color={'#666'}
            />
          </TouchableOpacity>
          <View style={{ flexDirection: 'row' }}>
            <Input
              touchBool={true}
              touchInput={() => this.mdl._openModal(this.state.keyWord)}
              style={{
                height: 28,
                width: width / 1.36,
                borderRadius: width / 2,
                alignSelf: 'flex-end',
                paddingLeft: 14,
                marginBottom: 4,
              }}
              placeholder={this.state.keyWord || '请输入商品名称或商品编码'}
              textInputBacg={'#EEE'}
              iconColor={'#999'}
              placeholderTextColor={'#999'}
              // onchangeFn={e => {
              //   console.log(e);
              // }}
            />
            <TouchableOpacity
              onPress={() =>
                this.props.dispatch(
                  NavigationActions.navigate({ routeName: 'Replenishment' })
                )
              }
              style={{
                alignSelf: 'flex-end',
                marginLeft: 8,
              }}
            >
              <Icon name="icon-buhuo" size={32} color={'#666'} />
            </TouchableOpacity>
          </View>
        </View>
        <View
          style={{
            height: 40,
            flexDirection: 'row',
            backgroundColor: '#FFF',
            alignItems: 'center',
          }}
        >
          <TouchableOpacity
            style={{
              width: width / 2 - 1,
              alignItems: 'center',
            }}
            onPress={() => {
              this.toggleExpanded('1')
            }}
          >
            <View
              style={{
                flexDirection: 'row',
              }}
            >
              <Text style={{ fontSize: 13, color: selectcolor1 }}>
                {this.state.productLineName}
              </Text>
              <Icon
                name="icon-icon-xialaxiaosanjiao"
                size={13}
                style={{ marginLeft: 5 }}
                color={selectcolor1}
              />
            </View>
          </TouchableOpacity>
          <View style={{ height: 20, width: 1, backgroundColor: '#DDD' }} />
          <TouchableOpacity
            style={{
              width: width / 2,
              alignItems: 'center',
            }}
            onPress={() => {
              this.toggleExpanded('2')
            }}
          >
            <View
              style={{
                flexDirection: 'row',
              }}
            >
              <Text
                style={{
                  fontSize: 13,
                  color: selectcolor2,
                }}
              >
                {this.state.organizationName}
              </Text>
              <Icon
                name="icon-icon-xialaxiaosanjiao"
                size={13}
                style={{ marginLeft: 5 }}
                color={selectcolor2}
              />
            </View>
          </TouchableOpacity>
        </View>
        <View
          style={{
            backgroundColor: '#FFF',
            borderBottomColor: '#DDD',
            borderBottomWidth: 1 / PixelRatio.get(),
            borderTopColor: '#DDD',
            borderTopWidth: 1 / PixelRatio.get(),
            height: 40,
            flexDirection: 'row',
            // justifyContent: "space-around"
            // 暂时
            justifyContent: 'flex-end',
            paddingRight: 20,
          }}
        >
          <TouchableOpacity
            style={{
              flexDirection: 'row',
              alignSelf: 'center',
              marginLeft: 10,
            }}
            onPress={() => this.sortPrice()}
          >
            <Text style={{ fontSize: 12, color: '#333', marginTop: 5 }}>
              {/* 价格 */}
            </Text>
            {/* <Icon name=""/> */}
          </TouchableOpacity>
          <Checkbox
            shape="square"
            checked={this.state.isNew}
            checkBoxColor={'#E14C46'}
            size={14}
            labelStyle={{
              fontSize: 12,
              marginTop: 11,
              color: '#333',
            }}
            label={'新品'}
            onChange={a => this.checkClick(a, 'newpro')}
          />
          {/* <Checkbox
            shape="square"
            checked={this.state.isNew}
            checkBoxColor={"#E14C46"}
            size={14}
            labelStyle={{
              fontSize: 12,
              marginTop: 11,
              color: "#333"
            }}
            label={"新品"}
            onChange={a => this.checkClick(a, "newpro")}
          />
          <Checkbox
            shape="square"
            checked={true}
            checkBoxColor={"#E14C46"}
            size={14}
            labelStyle={{ fontSize: 12, marginTop: 11, color: "#333" }}
            label={"促销"}
            onChange={a => this.checkClick(a, "hotsale")}
          />
          <Checkbox
            shape="square"
            checked={true}
            checkBoxColor={"#E14C46"}
            size={14}
            labelStyle={{
              fontSize: 12,
              marginTop: 11,
              color: "#333"
            }}
            label={"有库存"}
            onChange={a => this.checkClick(a, "inventory")}
          /> */}
          <TouchableOpacity
            onPress={() => this.listRowCol()}
            style={{ alignSelf: 'center', marginTop: 5, marginLeft: 20 }}
          >
            {this.state.listRowBool ? (
              // 列表形式
              <Icon
                name="icon-icon-shangpinqiapianzhanshi"
                size={22}
                color={'#666'}
              />
            ) : (
              // 宫格形式
              <Icon
                name="icon-icon-shangpinliebiaozhanshi"
                size={22}
                color={'#666'}
              />
            )}
          </TouchableOpacity>
        </View>
        <Grid
          ref={gridPull => (this.gridPull = gridPull)}
          titleBool={false}
          listRowBool={this.state.listRowBool}
          // data={this.state.allProDatas}
          data={listDatas}
          // 名称key
          nameKey="displayName"
          extraData={this.state}
          // 图片key
          pictureKey="mainPictureFileUrl"
          // 价格key
          priceKey="baseDiscountPrice"
          // key值 一般输入code
          keyext="code"
          // 编码
          codeKey="code"
          // 库存
          invenKey="stock"
          viewWid={this.state.gridStyle.viewWid}
          imgWid={this.state.gridStyle.imgWid}
          imageTouch={e => {
            this.props.dispatch(createAction('detail/gotoDetail')({ item: e }))
            // this.props.dispatch(
            //   createAction("home/getRecentView")({ recentView: e })
            // );
          }}
          shoppingCart={item => {
            if(item.goodsAttrVals && item.goodsAttrVals.length) {
              this.plToast.show('该商品为调色商品，请到商品详情页面下单'); 
              return;
            }
            if(!item.baseDiscountPrice) {
              this.plToast.show('商品暂无价格，无法加入购物车');
              return;
            }
            let postData = dataModel(
              item,
              CUSTOMERINFO.id,
              CUSTOMERINFO.customerRankCode
            )
            this.props.dispatch(createAction('shoppingcart/addShop')(postData))
          }}
          SearchVal={this.SearchVal()}
          onEndReached={() => {
            if (this.props.showFoot != 0) {
              return
            }
            if (this.page != 1 && this.page >= totalPages) {
              return
            } else {
              this.page++
            }
            this.props.dispatch(
              createAction('search/searchGoodsAll')({
                comeFrom: 'Filter',
                actionData: listDatas,
                pageInfo: { page: this.page, size: this.size },
                searchInfo: this.SearchVal(),
                forUse: 'slipOn',
              })
            )
          }}
          onRefresh={() => this.onRefresh()}
          Parentprops={this.props}
          shopListIds={shopListIds}
        />
        {/* 遮罩 */}
        {!this.state.collapsed ? (
          <View
            style={{
              position: 'absolute',
              top: 110,
              height: 1000,
              width: width,
              backgroundColor: '#000',
              opacity: 0.5,
            }}
          />
        ) : null}
        {/* 产品线/供应商-折叠*/}
        <View
          style={{
            position: 'absolute',
            top: 101,
            left: 0,
            backgroundColor: '#FFF',
            width: width,
          }}
        >
          <Collapsible collapsed={this.state.collapsed}>
            <FlatList
              data={filterData}
              extraData={this.state}
              keyExtractor={(item, index) => index}
              renderItem={(item, index) => this.filterRender(item, index)}
            />
          </Collapsible>
        </View>
        <SearchModal
          cb={data => {
            this._refreshPlist(data)
          }}
          ref={mdl => (this.mdl = mdl)}
          dispatch={this.props.dispatch}
          comFrom={'CommodityShowbase'}
          defaultValue={this.props.defaultValue || '请输入商品名称或商品编码'}
          // fuleipro={this.state.footerdata}
        />
        <ToastView 
          onDismiss={() => {
            //alert('toast消失了');
          }}
          ref={(element) => {
              this.plToast = element;
          }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  icon: {
    width: 32,
    height: 32,
  },
})

export default CommodityShowbase