/**
 * 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 ico = 'http://head.static.yhbimg.com/yhb-head/2018/07/02/16/01fc258bbe83d5b332f3b2631897b80ec9.591188.jpg?imageView2/{mode}/w/{width}/h/{height}';
        let picUrl = 'http://img10.static.yhbimg.com/unionimg/2018/09/11/16/012d77a863813f5789f7b9cb92a561ec87.jpg';
        let imageUrl = YH_Image.getSlicedUrl(ico, 50, 50, 2);

        function onHeadIconPress() {

        }

        function onOriginPress() {

        }

        return (
          <View>
              <View style={styles.headerBackground}>
                  <TouchableOpacity activeOpacity={1} onPress={()=> {onHeadIconPress()}}>
                      <YH_Image style={styles.headIcon} url={imageUrl} circle={true}/>
                  </TouchableOpacity>

                  <View style={styles.textView}>
                      <Text style={styles.nicknameText}>社区用户昵称</Text>
                      <Text style={styles.subnameText}>赞了你</Text>
                  </View>
              </View>

              <TouchableOpacity activeOpacity={1} onPress={() => {onOriginPress()}}>
                  <View style={ styles.originView} >
                    <Text style={styles.copyText}>原文</Text>
                    <YH_Image url={picUrl} style={styles.imageStyle} />
                    <Text style={styles.originText} numberOfLines={1}>这款Acne Studios 推出全新「The Johnny Winter Project」系列的东西很好很不错呢，我也很喜欢，太棒了</Text>
                  </View>
              </TouchableOpacity>

              <View style={styles.timeView}>
                <Text style={styles.startTimeText}>{'2018.03.05'}</Text>
              </View>
              <View style={styles.lineView}/>
          </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,
        marginLeft: 15,
        marginTop: 15,
        marginRight:10,
        overflow: 'hidden',
        borderRadius: 20,
    },
    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: 1,
      backgroundColor: '#e0e0e0'
    },
  });