'use strict';

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

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

export default class ProductCell extends Component {
    constructor(props) {
        super(props);
    }

    render(){
        let {width,height} = Dimensions.get('window');
        let scale = width/320;
        let goodsData = this.props.goodsData;
        let goodsImageURL = YH_Image.getSlicedUrl(goodsData.get('goods_image',''),90*scale,120*scale,2);
        let goodsName = goodsData.get('product_name','');
        let goodsSize = goodsData.get('size_name','');
        let goodsColor = goodsData.get('color_name','');
        let goodsPrice = goodsData.get('goods_price','');
        let goodsCount = goodsData.get('buy_number','');
        let arrivalTime = goodsData.get('expect_arrival_time');
        let goodsSKN = goodsData.get('product_skn','');

        let colorString = '';
        let sizeString = '';
        let refundExchangeImagePath = '';
        let showStatusImage = false;
        if (this.props.isVirtualOrder) {
            if (goodsSKN == this.props.yohoodTicketsSkn) {
                colorString = '日期:'+goodsColor;
                sizeString = '区域:'+goodsSize;
            }else if (goodsSKN == this.props.yohoodTicketSkn) {
                colorString = '日期:'+goodsColor;
            }else {
                colorString = '颜色:'+goodsColor;
            }
        }else {
            colorString = '颜色:'+goodsColor;
            sizeString = '尺码:'+goodsSize;
            let goodsStatus = goodsData.get('goods_status','');

            if (goodsStatus == '已退货') {
                showStatusImage = true;
                refundExchangeImagePath=require('../../image/has_refunded.png')
            }else if (goodsStatus == '已换货') {
                showStatusImage = true;
                refundExchangeImagePath=require('../../image/had_exchanged.png')
            }else if (goodsStatus == '已退换') {
                showStatusImage = true;
                refundExchangeImagePath=require('../../image/has_refundedExchange.png')
            }
        }

        let goodsTyle = goodsData.get('goods_type',0)//商品类型，默认0为普通商品
        let typeTipColor = 'transparent';
        let typeTipString = '';
        switch (goodsTyle) {
            case 'gift':{
                typeTipString='赠品';
                typeTipColor='rgba(133, 196, 91, 1.0)'
            }
                break;
            case 'price_gift':{
                typeTipString='加价购';
                typeTipColor='rgba(245, 91, 144, 1.0)'
            }
                break;
            case 'outlet':{
                typeTipString='OUTLET';
                typeTipColor='#ff9900'
            }
                break;
            default:
        }
        let showDate = arrivalTime.length > 0 && !this.props.isPresaleOrder;

        return (
            <TouchableOpacity style={styles.container} activeOpacity={1} onPress={() => {
                    this.props.onPressProduct && this.props.onPressProduct(goodsSKN);
                }}>
                <View style={styles.leftMiddleContainer}>
                    <View style={styles.leftContainer}>
                        <YH_Image style={styles.goodsImageStyle}
                            url={goodsImageURL}
                        />
                    <View style={[styles.goodsTypeStyle,{backgroundColor:typeTipColor}]}>
                            <Text style={{fontSize: 8,color: 'white',textAlign:'center'}}>
                                {typeTipString}
                            </Text>
                        </View>

                    </View>

                    <View style={styles.middleContainer}>
                        <Text style={styles.nameStyle} numberOfLines={2}>
                            {goodsName}
                        </Text>
                        <Text style={styles.colorStyle} >
                            {(colorString)+' '+(sizeString)}
                        </Text>
                    </View>
                </View>

                <View style={styles.rightContainer}>
                    <Text style={styles.priceStyle}> {'¥'+(goodsPrice)} </Text>
                    <Text style={styles.countStyle}> {'x'+(goodsCount)} </Text>
                    {showDate > 0 ?<Text style={styles.dateStyle}> {'上市期:' + (arrivalTime)} </Text> : null}
                    {showStatusImage ?
                        <TouchableOpacity
                            onPress={() => {
                                this.props._onPressRefundExchange && this.props._onPressRefundExchange()
                            }}
                        >
                            <Image style={styles.refundImageStyle}
                                source={refundExchangeImagePath}
                            />
                        </TouchableOpacity>
                    : null}

                </View>

            </TouchableOpacity>
        );
    }

}
let {width,height} = Dimensions.get('window');
let styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        height: 82,
        width:width,
        backgroundColor: 'white',
        borderColor: '#f0f0f0',
        borderBottomWidth: 0.5,
    },
    leftMiddleContainer:{
        flexDirection:'row',
    },
    leftContainer: {
        backgroundColor: 'transparent',
        flexDirection:'column',
        marginLeft: 15,
        marginTop: 10,
        width: 45,
        height: 60,
    },
    middleContainer: {
        flexDirection: 'column',
        justifyContent : 'flex-start',
        marginLeft: 10,
        width:200*(width/375)
    },
    rightContainer: {
        flexDirection: 'column',
        marginRight: 15,
        alignItems: 'flex-end',
    },
    goodsImageStyle: {
        width: 45,
        height: 60,
    },
    goodsTypeStyle: {
        position: 'absolute',
        justifyContent: 'center',
        top: 48,
        left: 0,
        height: 12,
        width: 45,
    },
    nameStyle: {
        fontSize: 14,
        color: '#444444',
        backgroundColor: 'transparent',
        marginTop: 11,
    },
    colorSizeContainer: {
        flexDirection: 'row',

    },
    colorStyle:{
        fontSize: 11,
        color: '#b0b0b0',
        marginTop: 5,
    },
    sizeStyle: {
        fontSize: 11,
        color: '#b0b0b0',
    },
    priceStyle: {
        fontSize: 14,
        color: '#d0021b',
        marginTop: 13,
    },
    countStyle: {
        fontSize: 12,
        color: '#b0b0b0',
        marginTop: 4,
    },
    dateStyle:{
        fontSize: 14,
        color: '#d0021b',
        marginTop: 5,
    },
    taxImageStyle:{

    },
    taxInfoStyle:{

    },
    refundImageStyle:{
        marginTop:10,
    },
    refundInfoStyle:{
        fontSize: 10,
        color: '#b0b0b0',
    },
    lineStyle: {
        color: "#e5e5e5",
        height: 0.5,
    }
});