'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';
import * as Progress from 'react-native-progress';

export default class PBProductListView extends Component {

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

    render() {
        let {
            index,
            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 = '马上抢';
        }

        let percent = 0;
        let stock = rowData.configStorage?rowData.configStorage:0;
        if (rowData.configStorage && rowData.storageSum && stock != 0) {
            let sale = rowData.configStorage - rowData.storageSum;
            percent = Math.floor(sale/stock*100);
            if (percent == 0 && sale > 0) {
                percent = 1;
            }
        }

        let progressText = '';
        if (percent < 80) {
            progressText = '已抢' + percent + '%';
        } else if (percent < 100) {
            progressText = '即将售罄';
        } else {
            progressText = '已售罄';
        }

        return (
            <TouchableOpacity activeOpacity={1.0} yh_exposureData={rowData.yh_exposureData} onPress={() => {
                this.props.onPressProductItem && this.props.onPressProductItem(rowData, index);
            }}>
                <View style={styles.rowContainer}>
                    <View style={styles.leftImage}>
                        <YH_Image style={{flex:1}} url={brandIconUrl} />

                        {rowData.tag ?
                        <View style={styles.tagView}>
                            <Text style= {styles.tag}>{rowData.tag}</Text>
                        </View>: null}
                    </View>


                    <View style={styles.rowRight}>
                        <Text style={styles.productTitle}
                              numberOfLines={2}>{rowData.productName}</Text>
                            {tipState == '马上抢' && <View style = {styles.progressBar}>
                                <Progress.Bar
                                progress={percent/100}
                                width={adjustPx(100)}
                                color={'#D0021B'}
                                unfilledColor={'#ffffff'}
                                borderWidth={1}
                                style={styles.bar}
                                />
                                <Text style = {styles.progressText}>{progressText}</Text>
                            </View>}

                            {tipState == '已抢光' && <View style = {styles.progressBar}>
                                <Progress.Bar
                                progress={1}
                                width={adjustPx(100)}
                                color={'#B0B0B0'}
                                unfilledColor={'#B0B0B0'}
                                borderWidth={1}
                                style={styles.bar}
                                />
                                <Text style = {styles.progressText}>已售罄</Text>
                            </View> }

                            {rowData.wait && <View style={styles.limit}>
                                <Text style={styles.limitText}>限量{stock}件</Text>
                            </View>}
                        <View style={{
                            flexDirection: 'row',
                            flex: 1,
                            alignItems: 'flex-end',
                            justifyContent: 'space-between'
                        }}>

                            <View style={{ flexDirection : 'row'}}>
                                <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 == '已抢光' ?
                                    <TouchableOpacity onPress={()=> {
                                        this.props.onPressProductItem && this.props.onPressProductItem(rowData, index);
                                        // this.props.onPressGuangShopWithURL && this.props.onPressGuangShopWithURL(url);
                                    }} style={[styles.priceClickTipViewRight, {
                                        backgroundColor: '#B2B2B2'
                                    }]}>
                                        <Text style={{color: 'white'}}>已抢完</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>

            </TouchableOpacity>
        );
    }
}

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

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,
    },
    progressText: {
        fontSize: 10,
        color: '#B0B0B0',
        left: 5,
        top: -3
    },
    seckillPrice: {
        fontSize: 18,
        lineHeight: 30,
        fontWeight: 'bold',
        color: '#d0021b',
        justifyContent: 'center',
    },
    originPrice: {
        textDecorationLine: 'line-through',
        color: '#B0B0B0',
        fontSize: 12,
        height: 17,
        left: 5,
        top: 10,
    },
    seckillBeginTimeTip: {
        fontSize: 9,
        marginTop: 6,
        color: '#D0021B',
    },
    separator: {
        position: 'absolute',
        left: 15,
        right: 0,
        bottom: 0,
        height: 0.5,
        backgroundColor: '#e5e5e5',
    },
    tagView: {
        backgroundColor: '#ff575c',
        position: 'absolute',
        left: -5,
        top: 5,
        width: 44,
        height: 15,
        alignItems: 'center',
        justifyContent: 'center',
    },
    bar: {
        height: 6,
    },
    progressBar: {
        flexDirection : 'row',
        position: 'absolute',
        top: adjustPx(80),
    },
    tag: {
        fontSize: 10,
        color: 'white',
    },
    limit: {
        position: 'absolute',
        top: adjustPx(80),
    },
    limitText: {
        fontSize: 12,
        color: '#B0B0B0',
    },

});