'use strict';

import React from 'react';
import Immutable, {Map} from 'immutable';
import YH_Image from '../../common/components/YH_Image';
import {getSlicedUrl} from '../../classify/utils/Utils';

import ReactNative, {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    Platform,
} from 'react-native';

let nameIndent;
if (Platform.OS === 'ios') {
  nameIndent = '             ';
} else {
  nameIndent = '              ';
}

export default class GroupDetailProduct extends React.PureComponent {

    constructor(props) {
        super(props);
    }

    render() {
        let { resource ,perpleNum,pageGo, joinLimit} = this.props;
        if(!resource) return null;
        let productIcon = resource.productIcon ? getSlicedUrl(resource.productIcon,109*DEVICE_WIDTH_RATIO, 141*DEVICE_WIDTH_RATIO, 2) : '';
        let productGroupPrice = resource.productGroupPrice;
        let productName = resource.productName;
        let productSalePrice = resource.productSalePrice;
        let productSkn = resource.productSkn;
        let otdTime = resource.expectArrivalTimeStr;
        let priceViewTop = otdTime ? {} :{marginTop: 25 * DEVICE_WIDTH_RATIO}
        otdTime = otdTime ? otdTime.replace(/_/, '-'): otdTime;

        return (
          <View style={styles.container}>
            <View style={styles.subcontainer}>
              <YH_Image style={styles.image} url={productIcon}></YH_Image>
              <View style={styles.right}>
                <View style={styles.titleView}>
                  {joinLimit == 1 && <Image style={styles.priceImg} source={require('../images/ptj_tab.png')} />}
                  <Text style={styles.title} numberOfLines={2}>{(joinLimit == 1 ? nameIndent : '') + productName}</Text>
                </View>
                <View style={[styles.priceView, priceViewTop]}>
                  <Text style={styles.price1}>{productGroupPrice}</Text>
                </View>
                <View style={styles.subPriceView}>
                  <Text style={styles.subPrice1}>单人购买：</Text>
                  <Text style={[styles.price2, { textDecorationLine: 'line-through' }]}>{productSalePrice}</Text>
                </View>
                {otdTime ? 
                (<View style={styles.otdView}>
                  <Text style={styles.subPrice1}>到货日期：</Text>
                  <Text style={styles.otdTime}>{otdTime}</Text>
                </View>): null}
              </View>
            </View>

          </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;

let styles = StyleSheet.create({
    container: {
        width: 300*DEVICE_WIDTH_RATIO + 30,
        height: 141*DEVICE_WIDTH_RATIO + 30,
        backgroundColor: 'transparent',
        alignItems: 'center',
    },
    subcontainer: {
        width: 300*DEVICE_WIDTH_RATIO,
        height: 141*DEVICE_WIDTH_RATIO,
        shadowColor: 'rgba(0,0,0,0.4)',
        shadowOffset: {width: 0, height: 5},
        shadowOpacity: 0.5,
        shadowRadius: 5,
        elevation: 1,
        flexDirection: 'row',
        backgroundColor: 'white',
    },
    image: {
      width: 106*DEVICE_WIDTH_RATIO,
      height: 141*DEVICE_WIDTH_RATIO,
    },
    right: {
      width: 191*DEVICE_WIDTH_RATIO,
      height: 141*DEVICE_WIDTH_RATIO,
      flexDirection: 'column',
    },
    titleView: {
      width: 174*DEVICE_WIDTH_RATIO,
      height: 40*DEVICE_WIDTH_RATIO,
      marginTop: 17*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
    },
    title: {
      fontSize: 12,
      color: '#444444',
      includeFontPadding: false,
      textAlignVertical: 'top',
      lineHeight: 20,
    },
    otdView: {
      width: 174*DEVICE_WIDTH_RATIO,
      height: 14*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
      marginTop: 3.2*DEVICE_WIDTH_RATIO,
      flexDirection: 'row',
      alignItems: 'center',
    },
    subPriceView: {
      width: 174*DEVICE_WIDTH_RATIO,
      height: 14*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
      marginTop: 3.2*DEVICE_WIDTH_RATIO,
      flexDirection: 'row',
      alignItems: 'center',
    },
    subPrice1: {
      fontSize: 10*DEVICE_WIDTH_RATIO,
      color: '#B0B0B0',
      lineHeight: 12*DEVICE_WIDTH_RATIO,
    },
    priceView: {
      width: 174*DEVICE_WIDTH_RATIO,
      height: 24*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
      marginTop: 12.7*DEVICE_WIDTH_RATIO,
      flexDirection: 'row',
      alignItems: 'center',
    },
    iconTextView: {
      width: 40*DEVICE_WIDTH_RATIO,
      height: 14*DEVICE_WIDTH_RATIO,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#D0021B',
    },
    iconText: {
      color: 'white',
      fontSize: 9*DEVICE_WIDTH_RATIO,
      textAlign: 'center',
    },
    priceImg: {
      top: 3*DEVICE_WIDTH_RATIO,
      position: 'absolute',
      marginRight: 5,
    },
    price1: {
      fontSize: 20*DEVICE_WIDTH_RATIO,
      color: '#D0021B',
      fontWeight: 'bold',
    },
    otdTime: {
      fontSize: 10*DEVICE_WIDTH_RATIO,
      lineHeight: 12*DEVICE_WIDTH_RATIO,
      fontWeight: '500',
      color: '#444444',
      alignItems: 'center',
    },
    price2: {
      fontSize: 12*DEVICE_WIDTH_RATIO,
      lineHeight: 12*DEVICE_WIDTH_RATIO,
      fontWeight: '500',
      color: '#B0B0B0',
      alignItems: 'center',
      marginTop: 2*DEVICE_WIDTH_RATIO,
    },
    styleBtn: {
      position: 'absolute',
      width: 52*DEVICE_WIDTH_RATIO,
      height: 20*DEVICE_WIDTH_RATIO,
      top: 111*DEVICE_WIDTH_RATIO,
      right: -10*DEVICE_WIDTH_RATIO,
    },
   styleBtnicon: {
     width: 52*DEVICE_WIDTH_RATIO,
     height: 20*DEVICE_WIDTH_RATIO,
   },
});