import React from 'react';
import {View, Text, Image, Dimensions} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import QRCode from 'react-native-qrcode-svg';
import CounterMixins from './CounterMixins';
import Layout from '../components/Layout';
import Touch from '../components/Touch';
import {width as screenWidth} from '../utils/screen';
import GoodsItem from '../components/GoodsItem';
import {colors, font} from '../utils/common';
import {login, payScancodeTitle} from '../utils/config';
import NP from '../utils/np';

const {width, height} = Dimensions.get('window');
const pageSize = width > height ? 8 : 5; // 分页大小
window.pageSize = pageSize;
class HomePage extends React.Component {
  getGoodsArr = goodsArr => {
    let {current, numRemove, numAdd, removeIndex, numChange} = this.props;
    let gaTemp = goodsArr.slice((current - 1) * pageSize, current * pageSize);
    return gaTemp.map((item, index) => (
      <GoodsItem
        key={index}
        item={item}
        index={index + (current - 1) * pageSize}
        numRemove={numRemove}
        numAdd={numAdd}
        removeIndex={removeIndex}
        numChange={numChange}
      />
    ));
  };

  getPagination = goodsArr => {
    let {current, dropUp, dropDown} = this.props;
    let goodsLength = Math.ceil(parseFloat(goodsArr.length / pageSize));
    return (
      <View style={styles.pagination}>
        <Touch onPress={() => dropUp()} feddback={false}>
          <Icon
            name="ios-arrow-dropup"
            color={current > 1 ? '#EA460F' : '#DEDEDE'}
            size={36}
          />
        </Touch>
        <Text style={{fontSize: font.textS, marginVertical: 10}}>
          {current}/{goodsLength}
        </Text>
        <Touch onPress={() => dropDown(goodsLength)} feddback={false}>
          <Icon
            name="ios-arrow-dropdown"
            color={current < goodsLength ? '#EA460F' : '#DEDEDE'}
            size={36}
          />
        </Touch>
      </View>
    );
  };

  render() {
    const isLandscape = width > height;
    let {
      admin,
      goods,
      goodsArr,
      qrHost,
      handleBarcode,
      handleCodeless,
      clearList,
      pushBag,
    } = this.props;
    let total = 0; // 总数量
    let totalPrice = 0; // 总价
    let totalCount = 0; // 总优惠
    this.totalWeight = 0; // 商品重量
    goodsArr.map(item => {
      total += item.num;
      this.totalWeight += item.weight * item.num;
      if (item.price) {
        totalPrice += item.price * item.num;
        totalCount += (item.prePrice - item.price) * item.num;
      } else {
        totalPrice += item.prePrice * item.num;
      }
    });
    this.totalNum = total;
    this.totalPrice = totalPrice;
    this.totalCount = totalCount;
    if (isLandscape) {
      return (
        <Layout>
          <View style={landscapeStyles.cont}>
            <View style={landscapeStyles.contLeft}>
              <View
                style={{
                  flex: 1,
                  flexDirection: 'row',
                  backgroundColor: '#ffffff',
                  borderTopLeftRadius: 3,
                  borderTopRightRadius: 3,
                  overflow: 'hidden',
                }}>
                <View style={{flex: 1}}>
                  <View style={landscapeStyles.clTop}>
                    <View style={{width: 38}} />
                    <View style={{flex: 1, flexDirection: 'row'}}>
                      <Text
                        style={{
                          ...landscapeStyles.cltText,
                          flex: 0.4,
                          textAlign: 'left',
                        }}>
                        商品名称
                      </Text>
                      <Text
                        style={{
                          ...landscapeStyles.cltText,
                          flex: 0.25,
                          textAlign: 'right',
                        }}>
                        单价
                      </Text>
                      <Text
                        style={{
                          ...landscapeStyles.cltText,
                          flex: 0.2,
                          textAlign: 'right',
                        }}>
                        数量
                      </Text>
                      <Text
                        style={{
                          ...landscapeStyles.cltText,
                          flex: 0.15,
                          textAlign: 'right',
                        }}>
                        金额
                      </Text>
                    </View>
                    <View style={{width: 50}} />
                  </View>
                  <View style={landscapeStyles.cltScroll}>
                    {this.getGoodsArr(goodsArr)}
                  </View>
                </View>
                <View style={{width: 70}}>{this.getPagination(goodsArr)}</View>
              </View>
              <View
                style={{
                  height: 60,
                  flexDirection: 'row',
                  justifyContent: 'center',
                  alignItems: 'center',
                  backgroundColor: '#ffffff',
                  borderBottomLeftRadius: 3,
                  borderBottomRightRadius: 3,
                }}>
                {goods.bags.map((v, k) => {
                  return (
                    <Touch
                      key={k}
                      onPress={() => pushBag(k)}
                      style={[
                        landscapeStyles.bagButton,
                        {marginLeft: k === 0 ? 0 : 20, paddingHorizontal: 20},
                      ]}>
                      <Text style={{color: '#ffffff', fontSize: 18}}>
                        点击购买{v.name} ￥{v.price}
                      </Text>
                    </Touch>
                  );
                })}
              </View>
              <View
                style={{
                  height: 70,
                  backgroundColor: '#ffffff',
                  marginTop: 10,
                  borderRadius: 3,
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <View
                  style={{
                    borderLeftColor: '#cccccc',
                    flex: 1,
                    flexDirection: 'row',
                    justifyContent: 'center',
                  }}>
                  <View style={landscapeStyles.infoView}>
                    <Text style={landscapeStyles.infoText}>合计：</Text>
                    <Text style={landscapeStyles.infoText}>
                      {NP.round(
                        Number(totalPrice) + Number(totalCount),
                        2,
                      ).toFixed(2)}
                    </Text>
                  </View>
                  <View style={landscapeStyles.infoView}>
                    <Text style={landscapeStyles.infoText}>数量：</Text>
                    <Text style={landscapeStyles.infoText}>{total}</Text>
                  </View>
                  <View style={landscapeStyles.infoView}>
                    <Text style={landscapeStyles.infoText}>优惠：</Text>
                    <Text style={landscapeStyles.infoText}>
                      -{NP.round(totalCount, 2).toFixed(2)}
                    </Text>
                  </View>
                  <View style={landscapeStyles.infoView}>
                    <Text style={landscapeStyles.infoText}>金额：</Text>
                    <Text style={landscapeStyles.infoText}>
                      {NP.round(totalPrice, 2).toFixed(2)}
                    </Text>
                  </View>
                </View>
              </View>
            </View>
            <View style={landscapeStyles.contRight}>
              <View
                style={{
                  display: 'flex',
                  backgroundColor: '#ffffff',
                  padding: 10,
                  borderRadius: 3,
                  flex: 1,
                }}>
                <View
                  style={{
                    display: 'flex',
                    flex: 1,
                    backgroundColor: '#00be34',
                    paddingVertical: 15,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <Text
                    style={{
                      color: 'white',
                      fontSize: 26,
                      fontWeight: '700',
                      marginBottom: 5,
                    }}>
                    {payScancodeTitle}
                  </Text>
                  <View
                    style={{
                      flex: 1,
                      marginTop: 10,
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}>
                    <View style={{padding: 10, backgroundColor: '#fff'}}>
                      <QRCode
                        logoSize={height * 0.07}
                        logo={require('../assets/logo.png')}
                        size={height * 0.2}
                        value={`${qrHost || login}/#/counter-order-${
                          admin.socket
                        }`}
                      />
                    </View>
                  </View>
                </View>
                <View
                  style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    backgroundColor: '#FC4000',
                    marginTop: 10,
                    paddingTop: 15,
                  }}>
                  <Text
                    style={{
                      color: 'white',
                      fontSize: 26,
                      fontWeight: '700',
                      margin: 5,
                    }}>
                    微信、支付宝付款码付款
                  </Text>
                  <View
                    style={{
                      width: '100%',
                      backgroundColor: '#ccc',
                      marginTop: 10,
                    }}>
                    <Image
                      style={{width: '100%', height: height * 0.25}}
                      resizeMode="stretch"
                      source={require('../assets/payment_code.gif')}
                    />
                  </View>
                </View>
              </View>
              <View
                style={{
                  height: 70,
                  backgroundColor: '#ffffff',
                  marginTop: 10,
                  borderRadius: 3,
                  flexDirection: 'row',
                  alignItems: 'center',
                  paddingHorizontal: 15,
                }}>
                <Touch
                  onPress={() => handleBarcode()}
                  style={[landscapeStyles.button, {marginRight: 10}]}>
                  <Text style={{color: '#ffffff', fontSize: 18}}>输入条码</Text>
                </Touch>
                <Touch
                  onPress={() => handleCodeless()}
                  style={landscapeStyles.button}>
                  <Text style={{color: '#ffffff', fontSize: 18}}>输入价格</Text>
                </Touch>
                <Touch
                  onPress={() => clearList()}
                  style={{
                    width: 50,
                    height: 46,
                    backgroundColor: '#FC4000',
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginLeft: 10,
                  }}>
                  <Image
                    style={{width: 25, height: 25, resizeMode: 'contain'}}
                    source={require('../assets/car_clear.png')}
                  />
                </Touch>
              </View>
            </View>
          </View>
        </Layout>
      );
    } else {
      // 竖屏
      return (
        <Layout>
          <View style={styles.cont}>
            <View style={styles.contLeft}>
              <View
                style={{
                  flex: 1,
                  flexDirection: 'row',
                  backgroundColor: '#ffffff',
                  borderTopLeftRadius: 3,
                  borderTopRightRadius: 3,
                  overflow: 'hidden',
                }}>
                <View style={{flex: 1}}>
                  <View style={styles.clTop}>
                    <View style={{screenWidth: 38}} />
                    <View style={{flex: 1, flexDirection: 'row'}}>
                      <Text
                        style={{
                          ...styles.cltText,
                          flex: 0.4,
                          textAlign: 'left',
                        }}>
                        商品名称
                      </Text>
                      <Text
                        style={{
                          ...styles.cltText,
                          flex: 0.25,
                          textAlign: 'right',
                        }}>
                        单价:
                      </Text>
                      <Text
                        style={{
                          ...styles.cltText,
                          flex: 0.2,
                          textAlign: 'right',
                        }}>
                        数量
                      </Text>
                      <Text
                        style={{
                          ...styles.cltText,
                          flex: 0.15,
                          textAlign: 'right',
                        }}>
                        金额
                      </Text>
                    </View>
                    <View
                      style={{screenWidth: 50, backgroundColor: '#cccccc'}}
                    />
                  </View>
                  <View style={styles.cltScroll}>
                    {this.getGoodsArr(goodsArr)}
                  </View>
                </View>
                <View style={{screenWidth: 70}}>
                  {this.getPagination(goodsArr)}
                </View>
              </View>
              <View
                style={{
                  height: 60,
                  flexDirection: 'row',
                  justifyContent: 'center',
                  alignItems: 'center',
                  backgroundColor: '#ffffff',
                  borderBottomLeftRadius: 3,
                  borderBottomRightRadius: 3,
                }}>
                {goods.bags.map((v, k) => {
                  return (
                    <Touch
                      key={k}
                      onPress={() => pushBag(k)}
                      style={[
                        styles.bagButton,
                        {marginLeft: k === 0 ? 0 : 20, paddingHorizontal: 20},
                      ]}>
                      <Text style={{color: '#ffffff', fontSize: 18}}>
                        点击购买{v.name} ￥{v.price}
                      </Text>
                    </Touch>
                  );
                })}
              </View>
              <View
                style={{
                  height: 70,
                  backgroundColor: '#ffffff',
                  marginTop: 10,
                  borderRadius: 3,
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <View
                  style={{
                    borderLeftscreenWidth: 1,
                    borderLeftColor: '#cccccc',
                    flex: 1,
                    flexDirection: 'row',
                    justifyContent: 'center',
                  }}>
                  <View style={styles.infoView}>
                    <Text style={styles.infoText}>合计：</Text>
                    <Text style={styles.infoText}>
                      {NP.round(
                        Number(totalPrice) + Number(totalCount),
                        2,
                      ).toFixed(2)}
                    </Text>
                  </View>
                  <View style={styles.infoView}>
                    <Text style={styles.infoText}>数量：</Text>
                    <Text style={styles.infoText}>{total}</Text>
                  </View>
                  <View style={styles.infoView}>
                    <Text style={styles.infoText}>优惠：</Text>
                    <Text style={styles.infoText}>
                      -{NP.round(totalCount, 2).toFixed(2)}
                    </Text>
                  </View>
                  <View style={styles.infoView}>
                    <Text style={styles.infoText}>金额：</Text>
                    <Text style={styles.infoText}>
                      {NP.round(totalPrice, 2).toFixed(2)}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={{height: 50, backgroundColor: '#333'}} />
            </View>
            <View style={styles.contRight}>
              <View
                style={{
                  backgroundColor: '#ffffff',
                  padding: 10,
                  borderRadius: 3,
                  flex: 1,
                }}>
                <View
                  style={{
                    backgroundColor: '#00be34',
                    paddingTop: 15,
                    paddingBottom: 20,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <Image
                    style={{
                      height: 22,
                      resizeMode: 'contain',
                      marginBottom: 12,
                    }}
                    source={require('../assets/payment_scan.png')}
                  />
                  <View style={{padding: 15, backgroundColor: 'white'}}>
                    <QRCode
                      logoSize={40}
                      logoBackgroundColor="#fc4000"
                      logo={require('../assets/logo.png')}
                      size={200}
                      value={`${qrHost || login}/#/counter-order-${
                        admin.socket
                      }`}
                    />
                  </View>
                </View>
                <View
                  style={{
                    flex: 1,
                    backgroundColor: '#FC4000',
                    marginTop: 10,
                    alignItems: 'center',
                  }}>
                  <Image
                    style={{
                      height: 22,
                      resizeMode: 'contain',
                      marginBottom: 12,
                      marginTop: 10,
                    }}
                    source={require('../assets/payment_code_text.png')}
                  />
                  <Image
                    style={{flex: 1}}
                    source={require('../assets/payment_code.gif')}
                  />
                </View>
              </View>
              <View
                style={{
                  height: 70,
                  backgroundColor: '#ffffff',
                  marginTop: 10,
                  borderRadius: 3,
                  flexDirection: 'row',
                  alignItems: 'center',
                  paddingHorizontal: 15,
                }}>
                <Touch
                  onPress={() => handleBarcode()}
                  style={[styles.button, {marginRight: 15}]}>
                  <Text style={{color: '#ffffff', fontSize: 18}}>输入条码</Text>
                </Touch>
                <Touch onPress={() => clearList()} style={styles.button}>
                  <Text style={{color: '#ffffff', fontSize: 18}}>重新开始</Text>
                </Touch>
              </View>
              <View style={{height: 50, backgroundColor: '#333'}} />
            </View>
          </View>
        </Layout>
      );
    }
  }
}
const landscapeStyles = {
  crImg: {
    screenWidth: screenWidth * 0.25 * 0.9,
    height: screenWidth * 0.25 * 0.8,
  },
  cltLine: {
    height: 10,
    borderTopscreenWidth: 2,
    borderTopColor: '#cccccc',
  },
  cltScroll: {
    flex: 1,
    overflow: 'hidden',
    paddingLeft: 20,
  },
  cltText: {
    textAlign: 'center',
    fontSize: 22,
    color: colors.text,
  },
  cltFirst: {
    screenWidth: screenWidth * 0.03,
  },
  clTop: {
    height: 76,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomscreenWidth: 20,
    borderBottomColor: '#DDDDDD',
    paddingLeft: 20,
    paddingTop: 5,
  },
  cont: {
    flex: 1,
    flexDirection: 'row',
  },
  contLeft: {
    flex: 7,
    // backgroundColor: '#2E2E2E',
    marginRight: 10,
  },
  pagination: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    paddingLeft: 5,
    paddingRight: 5,
  },
  contRight: {
    flex: 3,
    borderRadius: 3,
    // backgroundColor: '#2E2E2E',
  },
  amount: {
    flex: 1,
    fontSize: 16,
    color: '#ff8900',
    textAlign: 'right',
  },
  amountLabel: {
    fontSize: 16,
  },
  btnRow: {
    flexDirection: 'row',
    marginTop: 15,
  },
  bagButton: {
    height: 44,
    marginLeft: 30,
    marginTop: 10,
    marginBottom: 15,
    backgroundColor: '#00c670',
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    flex: 1,
    height: 46,
    backgroundColor: '#106C9F',
    justifyContent: 'center',
    alignItems: 'center',
  },
  clearBtn: {
    alignSelf: 'center',
    marginTop: 20,
    screenWidth: 150,
    height: 40,
    borderscreenWidth: 1,
    borderColor: colors.bg,
    justifyContent: 'center',
    alignItems: 'center',
  },
  infoView: {
    flexDirection: 'row',
    marginHorizontal: 30,
  },
  infoText: {
    fontSize: 22,
    color: '#000000',
  },
};

const styles = {
  crImg: {
    screenWidth: screenWidth * 0.25 * 0.9,
    height: screenWidth * 0.25 * 0.8,
  },
  cltLine: {
    height: 10,
    borderTopscreenWidth: 2,
    borderTopColor: '#cccccc',
  },
  cltScroll: {
    flex: 1,
    overflow: 'hidden',
    paddingLeft: 20,
  },
  cltText: {
    textAlign: 'center',
    fontSize: 22,
    color: colors.text,
  },
  cltFirst: {
    screenWidth: screenWidth * 0.03,
  },
  clTop: {
    height: 76,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomscreenWidth: 20,
    borderBottomColor: '#DDDDDD',
    paddingLeft: 20,
    paddingTop: 5,
  },
  cont: {
    height: 702,
    backgroundColor: '#333',
    flexDirection: 'row',
    position: 'relative',
  },
  contLeft: {
    flex: 7,
    overflow: 'hidden',
    backgroundColor: '#2E2E2E',
    position: 'relative',
    marginRight: 10,
  },
  pagination: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    paddingLeft: 5,
    paddingRight: 5,
  },
  contRight: {
    flex: 3,
    borderRadius: 3,
    backgroundColor: '#2E2E2E',
  },
  amount: {
    flex: 1,
    fontSize: 16,
    color: '#ff8900',
    textAlign: 'right',
  },
  amountLabel: {
    fontSize: 16,
  },
  btnRow: {
    flexDirection: 'row',
    marginTop: 15,
  },
  bagButton: {
    height: 44,
    marginLeft: 30,
    marginTop: 10,
    marginBottom: 15,
    backgroundColor: '#00c670',
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    flex: 1,
    height: 46,
    backgroundColor: '#106C9F',
    justifyContent: 'center',
    alignItems: 'center',
  },
  clearBtn: {
    alignSelf: 'center',
    marginTop: 20,
    screenWidth: 150,
    height: 40,
    borderscreenWidth: 1,
    borderColor: colors.bg,
    justifyContent: 'center',
    alignItems: 'center',
  },
  infoView: {
    flexDirection: 'row',
    marginHorizontal: 30,
  },
  infoText: {
    fontSize: 22,
    color: '#000000',
  },
};

export default CounterMixins(HomePage);
