/**
 * Created by zzz on 2019/5/21.
 */
'use strict';

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

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

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

        let resource = data.coverImg ? typeof data.coverImg === 'string' ? JSON.parse(data.coverImg) : data.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 pass = data.businessType === 1005 ? true : false;

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

            <View style={styles.headContainer}>
                <Text style={styles.headTextStyle}>
                    {data.createTime}
                </Text>
                <View style={[styles.headSeparator]}/>
            </View>

          <View style={styles.editContainer}>

              {
                pass ?

                <TouchableOpacity activeOpacity={1} onPress={() =>{
                        this.props.jumpToGrassDetailPage && this.props.jumpToGrassDetailPage(data);
                }} >
                  <View style={styles.contentContainer}>
                        <YH_Image style={styles.iconStyle} url={imageUrl} resizeMode="contain"/>
                        <View style={styles.textContainer}>
                            <Text style={styles.detail}>{data.content}</Text>
                        </View>
                  </View>
                </TouchableOpacity>

                :
                  <TouchableOpacity activeOpacity={1} onPress={() =>{
                      let params = {
                           action: 'go.h5',
                           params: {
                             title:'有货社区发帖规范',
                             url:data.link,
                           }
                         }
                      let path = 'http://m.yohobuy.com?openby:yohobuy=' + JSON.stringify(params);
                      ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(path);
                    }} >
                    <View style={styles.contentContainer}>
                          <YH_Image style={styles.iconStyle} url={imageUrl} resizeMode="contain"/>
                          <View style={styles.textContainer}>
                            <Text numberOfLines={3} style={styles.textStyle}>
                              <Text style={{color: '#444444'}}>{data.content}</Text>
                              <Text style={styles.underTextStyle} >《有货社区发帖规范》</Text>
                            </Text>
                          </View>
                    </View>
                  </TouchableOpacity>
              }

                  <TouchableOpacity activeOpacity={1} onPress={() => {
                          this.props.jumpToGrassDetailPage && this.props.jumpToGrassDetailPage(data)
                      }
                    }>
                      <View style={styles.footContainer}>
                          <View style={styles.footSeparator} />
                          <View style={styles.footextContainer}>
                              <Text style={styles.footextStyle}>
                                  查看原文
                              </Text>
                          </View>
                      </View>
                  </TouchableOpacity>

          </View>

        </View>
        );
    }
}

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

let styles = StyleSheet.create({
  cellContainer: {
      backgroundColor: 'transparent',
      flexDirection: 'column',
      justifyContent: 'flex-start',
  },
  headContainer: {
      flexDirection: 'column',
      width,
      height: 40,
      backgroundColor: '#f2f2f2',
  },
  headTextStyle: {
      fontSize: 13,
      backgroundColor: 'transparent',
      color: '#b0b0b0',
      textAlign: 'center',
      marginTop: 13
  },
  headSeparator: {
      marginTop: 10.5,
      backgroundColor: '#e0e0e0',
      width,
      height: 0.5,
  },

  editContainer: {
      backgroundColor: 'white',
      width
  },
  contentContainer: {
      flex: 1,
      minHeight: 80,
      backgroundColor: 'white',
      flexDirection: 'row',
  },
  iconStyle: {
      marginLeft: 15,
      marginTop: 15,
      width: 50*DEVICE_HEIGHT_RATIO,
      height: 50*DEVICE_HEIGHT_RATIO
  },
  textContainer: {
      marginLeft: 10,
      marginTop: 15,
      backgroundColor: 'white',
      flexDirection: 'column',
      justifyContent: 'space-between',
      alignItems: 'flex-start',
  },
  textStyle: {
    fontSize: 12,
    fontFamily: 'PingFang-SC-Regular',
    width: width-15-50-10-18,
  },
  detail: {
      fontSize: 12,
      fontFamily: 'PingFang-SC-Regular',
      color: '#444444',
      backgroundColor: 'transparent',
      width: width-15-50-10-18,
  },
  underTextStyle: {
    color: '#2a5083',
    textDecorationLine: 'underline',
    textDecorationStyle: 'solid',
    textDecorationColor: '#2a5083',
  },
  footContainer: {
      flexDirection: 'column',
      height: 44,
      backgroundColor: 'white',
      width
  },
  footSeparator: {
      marginLeft: 15,
      height: 0.5,
      width: width-15,
      backgroundColor: '#e0e0e0'
  },
  footextContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      height: 43,
      width,
      backgroundColor: 'white',
      alignItems: 'center'
  },
  footextStyle: {
      marginLeft: 15,
      color: '#444444',
      backgroundColor: 'transparent',
      textAlign: 'left',
      fontSize: 14,
      fontFamily: 'PingFang-SC-Medium'
  },
  });