'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 DeleteLineText from '../../common/components/DeleteLineText';

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



export default class GroupDetailProduct extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        let { resource ,perpleNum,pageGo} = 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 tipIcon = '';
        let needShowTioIcon = false;
        if (pageGo == 4) {
          needShowTioIcon = true;
          tipIcon = require('../images/success_tab.png');
        }else if (pageGo == 6 || pageGo == 7) {
          needShowTioIcon = true;
          tipIcon = require('../images/lost_tab.png');
        }

        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}>
                <Text style={styles.title} numberOfLines={2}>{productName}</Text>
              </View>
              <View style={styles.priceView}>
                <View style={styles.iconTextView}>
                  <Text style={styles.iconText}>{perpleNum}人团</Text>
                </View>
                <Text style={styles.price1}>{productGroupPrice}</Text>
              </View>
              <View style={styles.subPriceView}>
                <Text style={styles.subPrice1}>单人购买：</Text>
                <DeleteLineText
                    style={styles.oldPriceContainer}
                    textStyle={styles.price2}
                    lineStyle={styles.deleteLine}
                    text={productSalePrice}
                />
              </View>
            </View>
            {needShowTioIcon ?
              <View style={styles.styleBtn}>
                <Image source={tipIcon} style={styles.styleBtnicon} resizeMode={'contain'}/>
              </View>
              : null
            }

            </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: 109*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: 32*DEVICE_WIDTH_RATIO,
      marginTop: 17*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
    },

    title: {
      fontSize: 12,
      color: '#444444',
      lineHeight: 19,
    },
    subPriceView: {
      width: 174*DEVICE_WIDTH_RATIO,
      height: 14*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
      marginTop: 5*DEVICE_WIDTH_RATIO,
      flexDirection: 'row',
      alignItems: 'center',
    },
    subPrice1: {
      fontSize: 10*DEVICE_WIDTH_RATIO,
      color: '#B0B0B0',
      lineHeight: 10*DEVICE_WIDTH_RATIO,
    },
    priceView: {
      width: 174*DEVICE_WIDTH_RATIO,
      height: 21*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
      marginTop: 33*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',
    },

    price1: {
      fontSize: 18*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
      color: '#444444',
      lineHeight: 18*DEVICE_WIDTH_RATIO,
      fontWeight: 'bold',
    },

    oldPriceContainer: {
        flexDirection: 'row',
        height: 12*DEVICE_WIDTH_RATIO,
        marginTop: 2*DEVICE_WIDTH_RATIO,
    },

    price2: {
      fontSize: 12*DEVICE_WIDTH_RATIO,
      lineHeight: 12*DEVICE_WIDTH_RATIO,
      color: '#B0B0B0',
      alignItems: 'center',
    },
    deleteLine: {
        position: 'absolute',
        top: (16*DEVICE_WIDTH_RATIO / 2) - 3,
        left: 0,
        right: 0,
        height: 1,
        backgroundColor: '#b0b0b0',
    },
    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,
   },
});