/*
 * 明星原创--资讯组件
 * create by 陈林 2016.12.13
 */

'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    NativeAppEventEmitter,
    StyleSheet,
} from 'react-native';
import Immutable from 'immutable';
import SingleImage from './SingleImage';

import {SlicedImage} from '../../../common/components/SlicedImage';



export default class BrandArticleCell extends Component {

    constructor(props) {
        super(props);
        this._renderTimeAndVisit = this._renderTimeAndVisit.bind(this);
    }

    shouldComponentUpdate(nextProps,nextState){
        if (Immutable.is(nextProps.rowData, this.props.rowData)) {
            return false;
        } else {
            return true;
        }
    }

    //时间和访问次数以及是否喜欢
    _renderTimeAndVisit(time, visit, likeNum, id, rowID, isliked){

        let likeicon = isliked ? require("../../images/like_on.png") : require("../../images/like_off.png");
        let likestyle = isliked ? styles.darkgrayfont : styles.grayfont;

        return (
            <View style={styles.timebar}>
                <Image style={styles.timeicon} source={require("../../images/time_icon.png")} />
                <Text style={styles.grayfont} numberOfLines={1}>{time}&nbsp;&nbsp;&nbsp;&nbsp;</Text>

                <Image style={styles.eyeicon} source={require("../../images/eye_icon.png")} />
                <Text style={styles.grayfont} numberOfLines={1}>{visit}&nbsp;&nbsp;&nbsp;&nbsp;</Text>

                <TouchableOpacity
                    style={styles.likecontainer}
                    activeOpacity={1}
                    onPress={()=>{
                        this.props.onPressArticleLike && this.props.onPressArticleLike(id, rowID, !isliked, likeNum)
                    }}>

                    <View><Image style={styles.likeicon} source={likeicon} /></View>
                    
                    <Text style={likestyle} numberOfLines={1}>{likeNum}</Text>
                </TouchableOpacity>


            </View>
        );

    }


    render() {
        let {rowData, rowID} = this.props;
        //url跳转地址
        let url = rowData.get('url');
         //id
        let id = rowData.get('id');       
        //标题
        let title = rowData.get('title');
        //图片
        let imgUrl = rowData.get('src').replace('{mode}', 2).replace('{width}', width).replace('{height}', width);
        // let imgUrl = SlicedImage.getSlicedUrl(rowData.get('src'), width, width, 2);
        //介绍
        let intro = rowData.get('intro');
        //发布时间
        let publishTime = rowData.get('publish_time');
        //访问次数
        let viewsNum = rowData.get('views_num');
        //喜欢信息
        let likedata = rowData.get('like');
        //是否喜欢
        let isLiked = likedata ? likedata.get("isLiked") : false;
        //喜欢人数
        let likeCount = likedata ? likedata.get("count") : "0";

        return (
            <View style={styles.cellContainer}>

                <TouchableOpacity
                    style={[styles.touchableContainer]}
                    activeOpacity={1}
                    onPress={()=>{
                        this.props.onPressArticle && this.props.onPressArticle(url)
                    }}>

                    <SingleImage source={imgUrl} />

                    <Text style={styles.title}>{title}</Text>

                </TouchableOpacity>

                <Text style={styles.content} numberOfLines={4}>{intro}</Text>

                {this._renderTimeAndVisit(publishTime, viewsNum, likeCount, id, rowID, isLiked)}

            
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    cellContainer: {
        width: width,
        backgroundColor: '#ffffff',
    },
    touchableContainer: {
        width: width,
    },
    // image: {
    //     width: width,
    //     height: Math.ceil(width * 410 / 655),
    // },

    title:{
        width: width,
        fontSize: 20,
        fontWeight: 'bold',
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop:10,
        paddingBottom:5,
    },
    content:{
        width: width,
        fontSize: 15,
        color: '#3E3A39',
        paddingLeft: 15,
        paddingRight: 15,
        paddingBottom:5,
    },
    timebar:{
        width: width,
        height: 30,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingLeft: 15,
        paddingRight: 15,
        paddingBottom:5,
    },
    likecontainer:{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',

    },
    grayfont:{
        fontSize: 15,
        color: '#A5A5A5',
        marginLeft: 5,
        marginTop: 2,
    },
    darkgrayfont:{
        fontSize: 15,
        color: '#444444',
        marginLeft: 5,
        marginTop: 2,
    },
    timeicon:{
        width: 12,
        height:12,
    },
    eyeicon:{
        width: 16,
        height:12,
        marginLeft: 6,
    },
    likeicon:{
        width: 18,
        height:17,
        marginTop: 1,
    },
});