'use strict';

import React from 'react';
import ReactNative, {StyleSheet,View,TouchableOpacity,Text,Image} from 'react-native';
import Immutable from 'immutable';
import YH_Image from '../../../common/components/YH_Image';

const {Dimensions} = ReactNative;


export default class SingleFocusProduct extends React.Component {

    constructor(props) {
        super(props);
    }

    shouldComponentUpdate(nextProps) {
        if (Immutable.is(nextProps.data, this.props.data)) {
            return false;
        } else {
            return true;
        }
    }

    render() {
        let {data} = this.props;
        let prdImage = YH_Image.getSlicedUrl(data.default_images, 107, 142, 2);
        return (
            <View style={styles.container}>
                <TouchableOpacity activeOpacity={1} style={styles.prdImage} onPress={() => {
                    this.props.onPressProduct && this.props.onPressProduct(Immutable.fromJS(data),null);
                }}>
                    <YH_Image style={styles.prdImage} url={prdImage}/>
                </TouchableOpacity>

                <Text style={styles.nowPrice} numberOfLines={1}>¥{data.sales_price || '-'}</Text>
                <View style={styles.priceReturnContainer}>
                    <Image source={require('../../images/money_back.png')} />
                    <Text style={styles.returnPrice} numberOfLines={1}>¥{data.rebates_amount || '-'}</Text>
                </View>
            </View>
        )
    }
}

let {width} = Dimensions.get('window');

const DEVICE_WIDTH_RATIO = width / 375;

let styles = StyleSheet.create({
    container: {
        height: 210*DEVICE_WIDTH_RATIO,
        width: 107*DEVICE_WIDTH_RATIO,
        flexDirection: 'column',
    },
    prdImage: {
        width: 107*DEVICE_WIDTH_RATIO,
        height: 142*DEVICE_WIDTH_RATIO
    },
    nowPrice: {
        fontSize: 12,
        color: '#222222',
        fontFamily: 'PingFang-SC-Regular',
        marginTop: 10*DEVICE_WIDTH_RATIO,
    },
    priceReturnContainer: {
        flexDirection: 'row',
        marginTop: 10*DEVICE_WIDTH_RATIO,
    },
    returnPrice: {
        fontSize: 16,
        color: '#d0021b',
        marginLeft: 3,
        fontWeight: 'bold',
    }

})