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

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

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

    render() {
        let rowData = this.props.data;

        let resource = rowData.coverImg ? typeof rowData.coverImg === 'string' ? JSON.parse(rowData.coverImg) : rowData.coverImg : '';
        let picItem =  resource ? typeof resource.data === 'string' ? JSON.parse(resource.data) : resource.data : '';
        let imageUrl = YH_Image.getSlicedUrl(picItem.src, 50 * DEVICE_HEIGHT_RATIO, 50 * DEVICE_HEIGHT_RATIO, 2);

        let sliceCount = width <= 320 ? 10 : 15;
        let userName = rowData.userName.length > sliceCount ? rowData.userName.slice(0,sliceCount)+'...' : rowData.userName;

        let subName = rowData.businessType === 1000 ? '赞了你' : '收藏了你';

        let showIcon = (rowData.authGroupId === 3 || rowData.authGroupId === 5 || rowData.authGroupId === 7) ? true : false;
        let source;
        switch (rowData.authGroupId) {
          case 3:
            source = require('../../images/GF_big_ic.png');
            break;
          case 5:
            source = require('../../images/PP_big_ic.png');
            break;
          case 7:
            source = require('../../images/KING_big_ic.png');
            break;
          default:
        }


        return (
          <View>
              <View style={styles.headerBackground}>
                  <TouchableOpacity style={{marginLeft: 15, marginRight: 10, flexDirection:'row'}} activeOpacity={1} onPress={()=> this.props.jumpToPersonalGrassPage && this.props.jumpToPersonalGrassPage(rowData)}>
                      <YH_Image style={styles.headIcon} url={rowData.headIco} circle={true}/>
                      {showIcon ? <Image style={styles.iconImage} resizeMode="contain" source={source}/> : null}
                  </TouchableOpacity>

                  <View style={styles.textView}>
                    <TouchableOpacity activeOpacity={1} onPress={()=> this.props.jumpToPersonalGrassPage && this.props.jumpToPersonalGrassPage(rowData)}>
                      <Text style={styles.nicknameText} numberOfLines={1}>{userName}</Text>
                    </TouchableOpacity>
                      <Text style={styles.subnameText}>{subName}</Text>
                  </View>
              </View>

              <TouchableOpacity activeOpacity={1} onPress={() => this.props.jumpToGrassDetailPage && this.props.jumpToGrassDetailPage(rowData)}>

              { rowData.isDelete === 'N' ?

                  <View style={ styles.originView} >
                    <Text style={styles.copyText}>原文</Text>
                    { imageUrl ? <YH_Image url={imageUrl} style={styles.imageStyle} /> : null }

                    {rowData.content ?

                      <Text style={styles.originText} numberOfLines={1}>
                          <Text>{rowData.content}</Text>
                          <Text>{'...'}</Text>
                      </Text>
                      :
                      <View style={{height: 5}} />
                    }

                  </View>

                  :

                  <View style={ styles.originView} >
                    <Text style={styles.deleteText} numberOfLines={1}>{'原文已被作者删除'}</Text>
                  </View> }

              </TouchableOpacity>

              <View style={styles.timeView}>
                <Text style={styles.startTimeText}>{rowData.createTime}</Text>
              </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: 70,
        backgroundColor: 'white',
        flexDirection: 'row',
    },
    headIcon: {
        width: 40,
        height: 40,
        marginTop: 15,
        overflow: 'hidden',
        borderRadius: 20,
    },
    iconImage: {
        width: 16,
        height: 16,
        marginLeft: -12,
        marginTop: 42,
    },
    textView: {
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        marginTop: 18,
        marginBottom: 15,
    },
    nicknameText: {
        fontSize: 14,
        fontFamily: 'PingFang-SC-Medium',
        color: '#222222',
    },
    subnameText: {
        fontSize: 12,
        fontFamily: 'PingFang-SC-Regular',
        color: '#B0B0B0',
    },
    originView: {
      flex: 1,
      marginLeft: 15,
      marginRight: 15,
      marginBottom: 10,
      backgroundColor: '#f0f0f0'
    },
    copyText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#444444',
      marginTop: 10,
      marginLeft: 10,
    },
    imageStyle: {
      marginTop: 10,
      marginBottom: 4,
      marginLeft: 10,
      width: 50 * DEVICE_HEIGHT_RATIO,
      height: 50 * DEVICE_HEIGHT_RATIO,
    },
    originText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#b0b0b0',
      marginLeft: 10,
      marginRight: 15,
      marginBottom: 9,
    },
    timeView: {
      alignItems: 'flex-start',
      marginBottom: 10,
      marginLeft: 15,
    },
    startTimeText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#B0B0B0',
      height: 17
    },
    lineView: {
      marginLeft:15,
      marginRight: 0,
      width: width-15,
      height: 0.5,
      backgroundColor: '#e0e0e0'
    },
    deleteText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#b0b0b0',
      marginLeft: 9,
      marginRight: 16,
      marginTop: 10,
      marginBottom: 10
    },
  });