/**
 * Description:
 * <p> new_user_floor：新人专享
 * Author:  Bruce.Lu
 * Version: 1.0
 * Created on 2017/2/9.
 */
import React, {Component} from 'react';
import ReactNative, {
    Image,
    Text,
    StyleSheet,
    
    View,
    TouchableOpacity,
    Dimensions,
} from 'react-native';
import ListView from 'deprecated-react-native-listview'
import ImmutablePropTypes from 'react-immutable-proptypes';
import Immutable from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
import HeadTitleCell from '../cell/HeadTitleCell';
import ImageSlider from '../cell/ImageSlider';
import YH_Image from '../../../common/components/YH_Image';

export default class NewUserFloor extends Component {
    constructor(props) {
        super(props);
        this.renderRow = this.renderRow.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

    renderRow(rowData, sectionID, rowID, highlightRow) {
        let data = this.props.data;
        let banner = data.get("banner_image");
        let bannerLength = banner.toJS().length;
        let index = parseInt(rowID)+bannerLength;

        let productName = rowData.get('product_name');
        let productPrice = '¥'+rowData.get('sales_price').toFixed(2);
        let productId = rowData.get('product_id');
        let productSkn = rowData.get('product_skn');
        let imgUrl = SlicedImage.getSlicedUrl(rowData.get('default_images'),cellWidth / 2,cellHeight,2);

        let yh_exposureData = rowData.get('yh_exposureData') ? rowData.get('yh_exposureData').toJS() : null;
        return (
            <TouchableOpacity style={styles.row} yh_exposureData={yh_exposureData}
                onPress={()=>{this.props.onPressVipProduct&&this.props.onPressVipProduct(rowData, imgUrl, index + rowID)}}>
                <YH_Image style={styles.image}
                       url={imgUrl}/>
                <View style={styles.detailContainer}>
                    <Text style={styles.detail} numberOfLines={2}>{productName}</Text>
                    <Text style={styles.detail2} numberOfLines={1}>{productPrice}</Text>
                    <View style={styles.buyContainer}>
                        <Text style={styles.buy} numberOfLines={1}>立即购买</Text>
                        <Image style={{width:4,height:7,marginLeft:2}}
                               source={require('../../images/yh_home_new_user_arrow.png')}/>
                    </View>
                </View>
            </TouchableOpacity>);
    }

    render() {
      let data = this.props.data?this.props.data:{};
      let title = data.get('title').get('title');
      let moreUrl = data.get('title').get('more_url');
      let bgUrl = '';
      let visible = bgUrl ? true : false;
      let bannerData = data.get('banner_image');
      let productData = data.get('list');
      let floorH = 130 + 40 + bannerHeight;

      let yh_exposureDataTitle = (data.get('title') && data.get('title').get('yh_exposureData')) ? data.get('title').get('yh_exposureData').toJS() : null;

        return (
            <View style={{backgroundColor:'white',width:width,height:floorH}}>
                <HeadTitleCell title={title} moreUrl={moreUrl}
                    onPressTitleMore={this.props.onPressTitleMore} yh_exposureData={yh_exposureDataTitle}/>
                <ImageSlider
                    resource={bannerData}
                    sliderWidth={width}
                    sliderHeight={bannerHeight}
                    onPressSlideItem={this.props.onPressVipBannerItem}
                />

                <View style={styles.listContianer}>
                  {visible ?
                    <YH_Image style={styles.listBg}
                           url={SlicedImage.getSlicedUrl(bgUrl,width,130,2)}
                           /> : null}
                        <ListView
                            style={{position:'absolute',left:0,top:0,paddingTop:12,paddingBottom:12}}
                            contentContainerStyle={styles.listContent}
                            horizontal={true}
                            dataSource={this.dataSource.cloneWithRows(productData.toArray())}
                            renderRow={this.renderRow}
                            showsHorizontalScrollIndicator={false}
                        />
                        <View style={{position:'absolute',left:0,top:12,alignItems:'center'}}>
                            <Image source={require('../../images/yh_home_new_user.png')}
                                   style={{width:20,height:cellHeight}}/>
                            <Text
                                style={{color:'white',fontSize:11,textAlignVertical:"center",height:90,position:'absolute',left:0,top:0}}>
                                新{'\n'}人{'\n'}专{'\n'}享{'\n'}
                            </Text>
                        </View>
                </View>

            </View>
        );
    }
}


let {width, height} = Dimensions.get('window');
let bannerHeight = Math.ceil((234 / 750) * width);
let sectionHeight = Math.ceil((419 / 750) * width);
let cellWidth = 150;
let cellHeight = 100;

const styles = StyleSheet.create({
    listContianer: {
        width:width,
        height: 130,
        alignItems: 'center',
    },
    listBg: {
        width: width,
        height: 130,
    },
    listContent: {
        backgroundColor: 'transparent',
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        paddingRight: 5,
        paddingLeft:18
    },
    row: {
        flexDirection: 'row',
        height: cellHeight,
        width:cellWidth,
        backgroundColor: 'white',
        justifyContent: 'center',
        marginLeft: 6,
        marginRight: 6
    },
    detailContainer: {
        width: cellWidth / 2,
        height: cellHeight,
        flexDirection: 'column',
        alignItems: 'flex-start',
        padding: 4
    },
    detail: {
        fontSize: 11,
        textAlign: 'center',
        color: '#444444',
        width: cellWidth / 2 - 8,
        marginTop:8
    },
    detail2: {
        fontSize: 11,
        textAlign: 'center',
        color: '#444444',
        width: cellWidth / 2,
        marginTop:12
    },
    buyContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        width: cellWidth / 2,
        height: 20,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 12,
    },
    buy: {
        fontSize: 11,
        textAlign: 'center',
        color: '#b0b0b0',
    },
    image: {
        width: cellWidth / 2,
        height: cellHeight,
    },
    text: {
        width: cellWidth / 2,
        fontSize: 12,
        color: 'gray',
        textAlign: 'center',
    }
});