'use strict';

import React, {Component} from "react";
import {View, Text, Image, ListView, StyleSheet, Dimensions, TouchableOpacity} from "react-native";
import SlicedImage from "../../../common/components/SlicedImage";
import YH_Image from '../../../common/components/YH_Image';

export default class ProductListView extends Component {

    constructor(props) {
        super(props);
        this.tipMessage = '';
        this.state = {
            selectedIndex: 0,
        };
    }

    render() {
        let {
            rowData,
            tipMessage,
        } = this.props;
        this.tipMessage = tipMessage;
        let brandIconUrl = SlicedImage.getSlicedUrl(rowData.defaultImages, 152, 203, 2);
        let tipState = '';
        let btnBgColor = '#d30018';
        let btnTextcolor = 'white';
        let url = rowData.shopUrl;
        if (rowData.over) {
            tipState = '已抢光';
            btnBgColor = '#b2b2b2';
        } else if (rowData.wait) {
            if (!rowData.remindFlag) {
                tipState = '提醒我';
                btnBgColor = '#444444';
            } else {
                tipState = '取消提醒';
                btnBgColor = 'white';
                btnTextcolor = '#000000';
            }
        } else {
            tipState = '去抢购';
        }
        return (
            <TouchableOpacity activeOpacity={1.0} onPress={() => {
                this.props.onPressProductItem && this.props.onPressProductItem(rowData);
            }}>
                <View style={styles.rowContainer}>
                    <View style={styles.leftImage}>
                        <YH_Image style={{flex:1}} url={brandIconUrl} />
                        {tipState == '已抢光' ?
                            <View style={styles.soldOutContainer}>
                                <Image source={require('../../images/yqg.png')}/>
                            </View>
                            : null }

                    </View>


                    <View style={styles.rowRight}>
                        <Text style={styles.productTitle}
                              numberOfLines={2}>{rowData.productName}</Text>

                        <View style={{
                            flexDirection: 'row',
                            flex: 1,
                            alignItems: 'flex-end',
                            justifyContent: 'space-between'
                        }}>
                            <View style={{}}>
                                <Text
                                    style={styles.seckillPrice}>¥{parseFloat(rowData.secKillPrice + "").toFixed(2)}</Text>
                                <Text style={styles.originPrice}>
                                    {'¥' + parseFloat(rowData.marketPrice + '').toFixed(2)}</Text>
                            </View>
                            <View style={{justifyContent: 'center', alignItems: 'flex-end'}}>
                                {tipState == '已抢光' && url && url.length ?
                                    <TouchableOpacity onPress={()=> {
                                        this.props.onPressGuangShopWithURL && this.props.onPressGuangShopWithURL(url);
                                    }} style={[styles.priceClickTipViewRight, {
                                        backgroundColor: 'white',
                                        borderColor: 'black',
                                        borderWidth: 1
                                    }]}>
                                        <Text style={{color: 'black'}}>进店逛逛</Text>
                                    </TouchableOpacity>
                                    : null}

                                {tipState != '已抢光' ? <TouchableOpacity onPress={() => {
                                    if (this.tipMessage == '') {
                                        if (rowData.wait) {
                                            this.props.onPressRemindBtn && this.props.onPressRemindBtn(rowData);
                                        } else {
                                            this.props.onPressProductItem && this.props.onPressProductItem(rowData);
                                        }
                                    }

                                }}>
                                    {
                                        (tipState == '取消提醒') ?
                                            <View style={[styles.priceClickTipViewRight, {
                                                backgroundColor: btnBgColor,
                                                borderWidth: 1.0
                                            }]}>
                                                <Text style={{color: btnTextcolor}}>{tipState}</Text>
                                            </View>
                                            : <View
                                            style={[styles.priceClickTipViewRight, {backgroundColor: btnBgColor}]}>
                                            <Text style={{color: btnTextcolor}}>{tipState}</Text>
                                        </View>
                                    }

                                </TouchableOpacity> : null
                                }
                                {rowData.wait &&
                                <Text style={styles.seckillBeginTimeTip}>{rowData.readableTime + '  开始'}</Text>}

                            </View>
                        </View>
                    </View>
                    <View style={styles.separator}/>
                </View>

            </TouchableOpacity>
        );
    }
}

let {width, height} = Dimensions.get('window');
let backgroundWidth = width;
let backgroundHeight = 121;
let rowHeight = backgroundHeight;
let WIDTH_RATION = width / 375.0;
let imageWidth = 80;
let imageHeight = 106;

let adjustPx = (number) => Math.round(number * WIDTH_RATION)

let styles = StyleSheet.create({
    rowContainer: {
        flexDirection: 'row',
        paddingLeft: adjustPx(15),
        paddingRight: adjustPx(15),
        paddingTop: adjustPx(10),
        paddingBottom: adjustPx(10),
        backgroundColor: 'white',
    },
    leftImage: {
        width: adjustPx(imageWidth),
        height: adjustPx(imageHeight),

    },
    soldOutContainer: {
        backgroundColor: '#0000007F',
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
        alignItems: 'center',
        justifyContent: 'center',
    },
    rowRight: {
        flexDirection: 'column',
        marginLeft: 10,
        justifyContent: 'space-between',
        flex: 1,
    },
    priceClickTipView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: width - imageWidth - 35,
        height: 50,
        backgroundColor: 'yellow',
    },
    priceClickTipViewLeft: {
        top: 25,
    },
    priceClickTipViewRight: {
        width: 80,
        height: 30,
        marginTop: 10,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 3,
        backgroundColor: '#d0021b',
    },

    secKillMarketPriceContainer: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    bottomToolBar: {
        top: 200,
        height: 44,
        backgroundColor: '#000',
    },
    closeScan: {
        left: 10,
        width: 25,
        height: 25,
        top: 10,
    },
    productTitle: {
        fontSize: 14,
        color: '#444444',
        lineHeight: 20,
        marginRight: 20,
    },
    seckillPrice: {
        fontSize: 18,
        lineHeight: 21,
        fontWeight: 'bold',
        color: '#d0021b',
    },
    originPrice: {
        textDecorationLine: 'line-through',
        color: '#B0B0B0',
        fontSize: 12,
        lineHeight: 17
    },
    seckillBeginTimeTip: {
        fontSize: 9,
        marginTop: 6,
        color: '#D0021B',
    },
    separator: {
        position: 'absolute',
        left: 15,
        right: 0,
        bottom: 0,
        height: 0.5,
        backgroundColor: '#e5e5e5',
    },
});