import React, { Component } from 'react'
import {
  View,
  Dimensions,
  FlatList,
  TouchableOpacity,
  Text,
  StyleSheet,
  PixelRatio,
} from 'react-native'

import { NavigationActions, createAction } from '../../../utils'
import Icon from '../../../components/Iconfont/Iconfont'
import ModalEcx from '../../../components/Modal'
import OptFlatList from '../../commodity/commoditydetail/OptFlatList'
import Toast from 'react-native-root-toast'

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

class OrderOptional extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      optionAttrs: [],
    }
  }

  _closeModal() {
    this.optional._setModalVisible(false)
  }

  _openModal = (value, isAll) => {
    this.optional._setModalVisible(true)
    const chooseOpt = this.props.optDataByIds
    let optionDatas = [],
      optionDataChoose = [],
      goodId = ''
    isAll
      ? // 点击全部
        (goodId = value.goodsId || value.parentGoodsId)
      : // 点击各自
        (goodId = value.goodsId || value.childGoodsId)
    //
    this.props
      .dispatch(createAction('optional/optionalByGoodIdSaga')(goodId))
      .finally(() => {
        optionDatas = this.props.optDataByGoodId
        if (value.reqOrderItemBoms && value.reqOrderItemBoms.length > 0) {
          value.reqOrderItemBoms.map(dataFst => {
            optionDatas.forEach(dataSec => {
              if (dataFst.childGoodsId == dataSec.id) {
                dataFst.goodsAttrVals = dataSec.goodsAttrVals
              }
            })
          })
          optionDataChoose = value.reqOrderItemBoms
          // this.setState({ data:optionDataChoose});
        } else {
          value.goodsAttrVals = optionDatas[0].goodsAttrVals
          optionDataChoose = [].concat(value)
          // this.setState({ data: optionDataChoose });
        }
        optionDataChoose.forEach(item => {
          item.newGoodsAttrVals = this.combineAttr(item.goodsAttrVals)
        })

        //  匹配之前选中 （两层数据做比较，每个数据有两层 ----待优化）
        if (optionDataChoose && optionDataChoose.length > 1) {
          optionDataChoose.forEach(dataFir => {
            chooseOpt.forEach(optFir => {
              if (dataFir.childGoodsId == optFir.goodsId) {
                dataFir.newGoodsAttrVals.forEach(dataSec => {
                  if (dataSec.isOptionalAttr) {
                    dataSec.item.forEach(dataTh => {
                      optFir.goodsOptVals.forEach(optSec => {
                        if (
                          dataTh.prodAttrStrucItemId ==
                          optSec.prodAttrStrucItemId
                        ) {
                          dataSec.isChoose = optSec
                          if (dataSec.productAttrTypeCode == '04') {
                            dataTh.attrValId = dataSec.isChoose.attrValId
                            dataTh.attrValCode = dataSec.isChoose.attrValCode
                            dataTh.attrValName = dataSec.isChoose.attrValName
                          }
                          if (dataTh.attrValId == optSec.attrValId) {
                            dataTh.isChecked = true
                          }
                        }
                      })
                    })
                  }
                })
              }
            })
          })
        }
        this.setState({ data: optionDataChoose })
      })
    // 添加Bom信息
    this.props.onPressBom()
  }

  // 选配请求参数
  optionalPostModel() {
    let returnArr = [],
      newArr = { goodsOptDtos: [] },
      alertText = []
    this.state.data.forEach(FirData => {
      let optResult = [],
        goodsAttrsObj = {},
        goodsOptVals = []
      FirData.newGoodsAttrVals.forEach(item => {
        if (item.isOptionalAttr) {
          if (item && item.isChoose && Object.keys(item.isChoose).length > 0) {
            goodsAttrsObj[
              item.isChoose.name ||
                item.name ||
                item.isChoose.prodAttrStrucItemName
            ] =
              item.isChoose.attrValName
            goodsOptVals.push({
              attrValCode: item.isChoose.attrValCode,
              attrValId: item.isChoose.attrValId,
              attrValName: item.isChoose.attrValName,
              goodsOptId: item.isChoose.id,
              prodAttrStrucItemId: item.isChoose.prodAttrStrucItemId,
              prodAttrStrucItemName:
                item.isChoose.name || item.isChoose.prodAttrStrucItemName,
            })
            optResult.push(
              `${item.isChoose.name ||
                item.name ||
                item.isChoose.prodAttrStrucItemName}:${
                item.isChoose.attrValName
              }`
            )
          } else {
            alertText.push(item.name)
          }
        } else {
          optResult.push(
            item.item.map(SecData => {
              goodsAttrsObj[SecData.name] = SecData.attrValName
              goodsOptVals.push({
                attrValCode: SecData.attrValCode,
                attrValId: SecData.attrValId,
                attrValName: SecData.attrValName,
                goodsOptId: SecData.id,
                prodAttrStrucItemId: SecData.prodAttrStrucItemId,
                prodAttrStrucItemName: SecData.name,
              })
              return `${SecData.name}:${SecData.attrValName}`
            })
          )
        }
      })
      const returnData = {
        goodsId: FirData.goodsId || FirData.childGoodsId,
        optResult: optResult.join(),
        uniqueKey: FirData.goodsId,
        goodsOptVals: goodsOptVals,
      }
      returnArr = { ...returnData, ...goodsAttrsObj }
      // returnArr.push({ ...returnData, ...goodsAttrsObj });
      newArr.goodsOptDtos = newArr.goodsOptDtos.concat(returnArr)
    })

    return { newArr, alertText }
  }

  confirmOpt() {
    // let postData = [].concat(this.optionalPostModel());
    let postData = this.optionalPostModel()
    if (postData && postData.alertText && postData.alertText.length > 0) {
      if (this.toast) {
        Toast.hide(this.toast)
      }
      this.toast = Toast.show(
        `选配项：'${postData.alertText.join()}'没有选择`,
        { position: toastHeight }
      )
    } else {
      this.props
        .dispatch(createAction('optional/saveOptionalSaga')([postData.newArr]))
        .finally(() => {
          if (
            this.props.optionalReturn &&
            this.props.optionalReturn.length > 0
          ) {
            const cbReturn = []
            let cbData = {}
            this.props.optionalReturn.forEach(firData => {
              firData.goodsOptDtos.forEach(secData => {
                cbData = { parentId: '', optIds: [], optVals: '' }
                cbData.goodsId = secData.goodsId
                cbData.optVals = secData.optResult

                cbData.optIds.push(secData.id)
                cbData.optIds = cbData.optIds.join()
                cbReturn.push(cbData)
              })
            })
            this.props.optCb(cbReturn)
            this._closeModal()
          }
        })
    }
  }

  // 对特征属性合并
  combineAttr(optionalAtts) {
    let obj = {},
      result = []
    // 对特征属性合并
    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,
        prodAttrStrucItemId: obj[i][0].prodAttrStrucItemId,
        item: obj[i],
        isOptionalAttr: obj[i][0].isOptionalAttr,
        productAttrTypeCode: obj[i][0].productAttrTypeCode,
      })
    }
    return result
  }

  OrderOpt(item) {
    // const newGoodsAttrVals = this.combineAttr(item.goodsAttrVals);
    // item.newGoodsAttrVals = newGoodsAttrVals;
    if (item.isOptional) {
      return (
        <OptFlatList
          havaOpt={true}
          {...this.props}
          optionData={item}
          chooseOpt={this.props.optDataByIds.filter(
            filData => filData.goodsId == item.childGoodsId
          )}
        />
      )
    }
  }

  _renderModalContent() {
    return (
      <View
        style={{
          width: width,
          height: height * 0.9,
          backgroundColor: '#FFF',
          paddingTop: 38,
        }}
      >
        <TouchableOpacity
          onPress={() => {
            this._closeModal()
            // this.props.cb && this.props.cb();
          }}
          style={{ position: 'absolute', right: 5, top: 5 }}
        >
          <Icon name="icon-icon-guanbianniu" size={30} color={'#CCC'} />
        </TouchableOpacity>
        <View style={{ flex: 1 }}>
          <FlatList
            keyExtractor={(item, index) => index}
            data={this.state.data}
            extraData={this.state}
            style={{ padding: 10 }}
            renderItem={({ item, index }) => this.OrderOpt(item, index)}
          />
        </View>
        <TouchableOpacity
          onPress={() => {
            this.confirmOpt()
          }}
          style={{
            backgroundColor: '#E70013',
            height: 45,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text style={{ fontSize: 14, lineHeight: 20, color: '#FFF' }}>
            确定
          </Text>
        </TouchableOpacity>
      </View>
    )
  }

  render() {
    return (
      <ModalEcx
        ref={optional => (this.optional = optional)}
        content={this._renderModalContent()}
      />
    )
  }
}

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