'use strict';

import React, {Component} from 'react';
import {Dimensions, StyleSheet, Text, TouchableOpacity, View, ImageBackground,Image} 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 == 2) {
            des = '已成功';
        }else if (status == 3){
            des = '已结束';
        }

        return (
          <View style= {styles.timeFatherContainer}>
              <ImageBackground source={require('../../images/timeBg.png')} style={styles.timeBg}>
              </ImageBackground>
              <View style={styles.timeContainer}>
                {data.get('cutStatus')==1? <TimerLabel leftTime = {leftTime} style={styles.timeCount} onStop = {this.props.onStop}/>:null }
                <Text style={styles.timeDes}>{des}</Text>
              </View>

          </View>
        );

    }

    _priceView(data) {

      let status = data.get('cutStatus');
      if (status==2 || status==3) {
        return null;
      }else {
        return (
          <View>
              <View style={styles.priceFatherContainer}>
                <View style={styles.nowPriceContainer}>
                    <Text style={styles.nowPrice}>¥</Text>
                    <Text style={[styles.nowPrice, {
                        marginLeft: 1,
                        marginTop:-4,
                        fontSize: 18
                    }]}>{data && data.get('highPrice')}</Text>
                </View>

                {data.get('hasCutPrice') ?
                   <View style={styles.cutPriceContainer}>
                        <Text style={styles.hasCutPrice}>已砍¥</Text>
                        <Text style={[styles.hasCutPrice, {
                            marginLeft: 1,
                        }]}>{data && data.get('hasCutPrice')}</Text>
                  </View>
                    : null }
              </View>
          </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) {
              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}>
                    <Image source={require('../../images/cutPriceBg.png')} style={styles.cutPriceBg}></Image>
                    <Text style={styles.cutPrice}>-¥{data && data.get('lowPrice')}</Text>
                </View>
            </View>
          )
        }

}

    render() {
        let data = this.props.data;
        let prdImage = YH_Image.getSlicedUrl(data && data.get('defaultImages', ''), 98, 130, 2);
        return (
            <View>
                <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);
                        }}>
                        <View style={styles.container}>
                            <YH_Image style={styles.prdImage} url={prdImage}/>
                            <View style={styles.rightContainer}>
                                <Text style={styles.prdName} numberOfLines={2}>{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',
    },
    prdImage: {
        marginTop: 5,
        width: 98,
        height: 130,
    },
    prdName: {
        fontFamily: 'PingFang-SC-Light',
        fontSize: 14,
        color: '#444444',
        marginTop: 10,
        marginLeft: 10,
        width: nameWidth,
        letterSpacing: -0.34,
    },
    timeFatherContainer: {
        flexDirection: 'row',
    },

    priceFatherContainer: {
      flex:1,
      marginBottom: 0,
      marginLeft: 10,
    },

    nowPriceContainer: {
      flexDirection: 'row',
    },

    cutPriceContainer:{
      flexDirection: 'row',
    },

    nowPrice: {
        fontSize: 14,
        fontFamily: 'PingFang-SC-Medium',
        color: '#222222',
    },
    hasCutPrice: {
        fontSize: 14,
        fontFamily: 'PingFang-SC-Medium',
        color: '#d0021b',
    },

    cutActionContainer: {
        width: 91,
        height: 33,
        justifyContent: 'center',
    },
    cutPriceBg: {
      width: 91,
      height: 33,
    },
    cutPrice: {
        fontSize: 14,
        fontFamily: 'PingFang-SC-Medium',
        color: 'white',
        marginTop:-25,
        marginRight: 10,
        textAlign: 'right',
    },

    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'
    },
    timeBg:{
      justifyContent: 'center',
      width: 21,
      height: 31,
      marginLeft:-3,
    },

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

    },
    timeIcon:{
      width: 9,
      height: 10,
      marginLeft:3,
    },
    timeCount:{
      width:55,
      marginLeft: 4,

    },
    timeDes:{
      fontSize: 12,
      color: 'white',
      marginLeft:3,
      marginRight:10,
      fontFamily: 'PingFang-SC-Medium',
    },
    invalidDes: {
        fontSize: 14,
        fontFamily: 'PingFang-SC-Medium',
        color: '#b0b0b0',
    },
    actionContainer: {
        position: 'absolute',
        right: 0,
        width: 91,
        height: 33,
        bottom: 0,
    }

});