/**
 * Created by zzz on 2019/3/12.
 */
'use strict';

import React, {Component} from 'react';
import {Dimensions, Image, StyleSheet, Text, TouchableOpacity, View, NativeModules} from 'react-native';
import {Immutable} from "immutable";
import YH_Image from '../../../common/components/YH_Image';

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

    render() {
        let {data} = this.props;
        let resource = data.isMutualAttention ? require('../../images/content_attentioned.png') : require('../../images/content_fan.png');
        let status = data.isMutualAttention ? 1 : 0;
        let optUid = data.optUid;
        let userName = data.userName.length > 10 ? data.userName.slice(0,10)+'...' : data.userName;

        return (
          <View>
              <View style={styles.headerBackground}>
                  <TouchableOpacity activeOpacity={1} onPress={()=> this.props.jumpToPersonalGrassPage && this.props.jumpToPersonalGrassPage(data)}>
                      <YH_Image style={styles.headIcon} url={data.headIco} circle={true}/>
                  </TouchableOpacity>

                  <View style={styles.textView}>
                      <TouchableOpacity style={styles.toubleView} activeOpacity={1} onPress={()=> this.props.jumpToPersonalGrassPage && this.props.jumpToPersonalGrassPage(data)}>
                          <Text style={styles.nicknameText} numberOfLines={1}>{userName}</Text>
                          <Text style={styles.defaultReplyText}>关注了你</Text>
                      </TouchableOpacity>
                      <Text style={styles.startTimeText}>{data.createTime}</Text>
                  </View>
                  <TouchableOpacity activeOpacity={1} style={styles.fanContainer} onPress={()=> {this.props.updateAttentionAction && this.props.updateAttentionAction(status,optUid)}}>
                      <Image style={styles.fanImage} source={resource}/>
                  </TouchableOpacity>
              </View>
              { this.props.showLine ?  <View style={styles.lineView}/> : null }
          </View>
        );
    }
}

let { width, height } = Dimensions.get('window');
const DEVICE_HEIGHT_RATIO = height / 667;

let styles = StyleSheet.create({
    headerBackground: {
      width: width,
      height: 80,
      backgroundColor: 'white',
      flexDirection: 'row',
    },
    headIcon: {
      width: 50,
      height: 50,
      marginLeft: 15,
      marginTop: 15,
      marginRight:15,
      overflow: 'hidden',
      borderRadius: 25,
    },
    textView: {
      flexDirection: 'column',
      justifyContent: 'space-between',
      alignItems: 'flex-start',
      marginTop: 15,
      marginBottom: 20,
      width: width - 160,
    },
    toubleView: {
      flexDirection: 'row',
      overflow:'hidden',
      width: width - 160,
    },
    startTimeText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#B0B0B0',
      height: 17
    },
    nicknameText: {
      fontSize: 14,
      fontFamily: 'PingFang-SC-Medium',
      color: 'black',
      fontWeight: 'bold',
    },
    defaultReplyText :{
      fontSize: 14,
      fontFamily: 'PingFang-SC-Medium',
      color: '#b0b0b0',
    },
    fanContainer: {
      position: 'absolute',
      top: 27,
      right: 15,
      width: 60,
      height: 25,
    },
    fanImage: {
      width: 60,
      height: 25,
    },
    lineView: {
      marginLeft:15,
      marginRight: 0,
      width: width-15,
      height: 1,
      backgroundColor: '#e0e0e0'
    },
  });