'use strict';

import React, {Component} from 'react';
import {
    Dimensions,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    ImageBackground,
    Image,
    PixelRatio,
    Platform
} from 'react-native';

import YH_Image from '../../../common/components/YH_Image';
import TimerLabel from './TimerLable';

export default class productCell extends Component {

    constructor(props) {
        super(props);
        this._topTimerView = this._topTimerView.bind(this);
        this._priceView = this._priceView.bind(this);
        this._cutActionView = this._cutActionView.bind(this);
    }

    _topTimerView(data) {
        let leftTime = data.get('cutEndTime') - data.get('currentTime');
        let status = data.get('cutStatus');
        let des = '后结束';
        if (status === 5) {
            des = '已成功';
        } else if (status === 6 || leftTime <= 0) {
            des = '已结束';
        }
        let timeFlag = leftTime > 0 && status !== 5 && status !== 6;
        return (
            <View style={styles.timeFatherContainer}>
                <View style={styles.timeContainer}>
                    {timeFlag ?
                        <TimerLabel leftTime={leftTime} style={styles.timeText} onStop={this.props.onStop}/> : null}
                    <Text style={[timeFlag ? styles.timeText : styles.lightGrayColor, styles.timeDes]}>{des}</Text>
                </View>
            </View>
        );
    }

    _priceView(data) {
        let categoryType = this.props.categoryType;
        let status = data.get('cutStatus');
        let text, textStyle;
        if (categoryType) {
            if (status === 4) {
                text = '已下单';
                textStyle = styles.redColor;
            } else if (status === 5) {
                text = data.get('hasCutPrice') && '已砍¥' + data.get('hasCutPrice');
                textStyle = styles.blackColor;
            } else if (status === 6) {
                text = '砍价失败';
                textStyle = styles.lightGrayColor;
            } else {
                text = data.get('hasCutPrice') && '已砍¥' + data.get('hasCutPrice');
                textStyle = styles.redColor;
            }
        } else {
            text = data.get('sales_price') && '¥' + data.get('sales_price');
            textStyle = styles.priceTextHome;
        }
        let cutSuccessNum = data.get('cutSuccessNum') || 0
        return <View style={[styles.priceFatherContainer,{bottom:!categoryType && cutSuccessNum ? -2 : 6 }]}>
            <Text style={[styles.priceText, textStyle]}>{text}</Text>
            {!categoryType && cutSuccessNum? <Text style={styles.hasCut}>已抢{cutSuccessNum}件</Text> : null}
        </View>
    }

    _cutActionView(data) {
        let categoryType = this.props.categoryType;
        if (categoryType == 1) {
            if (data.get('cutStatus') == 1) {
                return (
                    <View style={styles.actionContainer}>
                        <View style={styles.continueCutContainer}>
                            <Text style={styles.continueCut}>继续砍价</Text>
                        </View>
                    </View>

                )
            } else if (data.get('cutStatus') == 2 || data.get('cutStatus') == 3) {
                return (
                    <View style={styles.actionContainer}>
                        <View style={styles.continueCutContainer}>
                            <Text style={styles.continueCut}>立即购买</Text>
                        </View>
                    </View>
                )
            } else if (data.get('cutStatus') == 4) {
                return <View style={styles.actionContainer}>
                    <View style={styles.continueCutContainer}>
                        <Text style={styles.continueCut}>立即支付</Text>
                    </View>
                </View>;
            } else {
                return null;
            }

        } else {
            return (
                <View style={styles.actionContainer}>
                    <View style={styles.cutActionContainer}>
                        <Text style={styles.cutText}>砍</Text>
                        <Text style={styles.cutPrice}>¥{data.get('cutTotalPrice')}</Text>
                    </View>
                </View>
            )
        }

    }

    render() {
        let data = this.props.data;
        let prdImage = YH_Image.getSlicedUrl(data && data.get('defaultImages', ''), 98, 98, 2);
        let productType = data.get('productType');
        return (
            <View yh_exposureData={data.get('yh_exposureData')}>
                <View style={styles.fatherContainer}>
                    {data.get('cutStatus') ? this._topTimerView(data) : null}
                    <TouchableOpacity
                        activeOpacity={1} style={[styles.container]}
                        onPress={() => {
                            this.props.onPressProduct && this.props.onPressProduct(data,this.props.rowID);
                        }}>
                        <View style={styles.container}>
                            <YH_Image style={styles.prdImage} url={prdImage} resizeMode={'contain'}/>
                            <View style={styles.rightContainer}>
                                {productType ?
                                    <Image style={[{width: 47, height: 14, position: 'absolute', top: 3, left: 10}]}
                                           source={require('../../images/logo.png')}/> : null}
                                <Text style={styles.prdName} numberOfLines={2}>
                                    {productType ? Platform.OS === 'ios' ? '           ' : '               ' : null}
                                    {data && data.get('productName', '')}
                                </Text>
                                {this._priceView(data)}
                            </View>
                            {this._cutActionView(data)}
                        </View>

                    </TouchableOpacity>
                </View>
                <View style={styles.separator}/>
            </View>
        );
    }
};

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

let nameWidth = width - 15 - 98 - 15 - 10;

let styles = StyleSheet.create({
    fatherContainer: {
        backgroundColor: 'white',
        padding: 15,
    },
    container: {
        flexDirection: 'row',
        width: width - 30,
    },

    rightContainer: {
        justifyContent: 'space-between',
        marginTop: 3,
        height:103
    },
    prdImage: {
        marginTop: 5,
        width: 98,
        height: 98,
    },
    prdName: {
        fontFamily: 'PingFang-SC-Light',
        fontSize: 14,
        color: '#444444',
        marginLeft: 10,
        width: nameWidth,
    },
    timeFatherContainer: {
        flexDirection: 'row',
        alignItems: 'center'
    },

    priceFatherContainer: {
        position: 'absolute',
        left: 10,
    },

    priceText: {
        fontSize: 14,
        fontFamily: 'PingFang-SC-Medium',
        marginBottom: 2,
    },
    blackColor: {
        color: '#222222',
    },
    priceTextHome: {
        fontSize: 18,
        fontFamily: 'PingFang-SC-Medium',
        color: '#222222',
        fontWeight: 'bold',
        marginBottom: 0
    },
    redColor: {
        color: '#d0021b',
    },
    timeText: {
        color: '#444',
        fontWeight: '600'
    },
    lightGrayColor: {
        color: '#B0B0B0'
    },
    cutActionContainer: {
        width: 91,
        height: 33,
        justifyContent: 'center',
        backgroundColor:'#222222',
        alignItems:'center',
        borderRadius: 3,
        flexDirection: 'row'
    },
    cutPriceBg: {
        width: 91,
        height: 33,
    },
    cutPrice: {
        fontSize: 14,
        fontFamily: 'PingFang-SC-Medium',
        color: 'white',
        fontWeight: 'bold',
    },
    cutText:{
        fontSize: 16,
        fontFamily: 'PingFang-SC-Medium',
        color: 'white',
        fontWeight: 'bold',
    },

    continueCutContainer: {
        width: 91,
        height: 33,
        borderRadius: 3,
        backgroundColor: '#D0021B',
        justifyContent: 'center',
    },

    continueCut: {
        fontSize: 14,
        color: 'white',
        textAlign: 'center',
    },

    separator: {
        width: width - 30,
        marginLeft: 15,
        height: 1,
        backgroundColor: '#f0f0f0'
    },

    timeContainer: {
        alignItems: 'center',
        flexDirection: 'row',
        marginLeft: -2,
        height: 24,

    },
    timeIcon: {
        width: 9,
        height: 10,
        marginLeft: 3,
    },
    timeDes: {
        fontSize: 12,
        marginLeft: 3,
        marginRight: 10,
        fontFamily: 'PingFang-SC-Medium',
    },

    actionContainer: {
        position: 'absolute',
        right: 0,
        width: 91,
        height: 33,
        bottom: 1,
    },
    bottom: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    hasCut:{
        fontSize:12,
        marginTop:4,
        color: '#B0B0B0'
    }
});