/**
 * 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>

          <View style={styles.editContainer}>

              {
                pass ?

                <TouchableOpacity activeOpacity={1} onPress={() =>{
                        this.props.jumpToNotifGrassPage && this.props.jumpToNotifGrassPage(data);
                }} >
                  <View style={styles.contentContainer}>
                        {data.isDelete === 'Y'?
                          <Image style={styles.iconStyle} resizeMode="contain" source={require('../../images/notify_no.png')}/>
                          :
                          <View>
                            {imageUrl?<YH_Image style={styles.iconStyle} url={imageUrl} resizeMode="contain"/>:
                              <Image style={styles.iconStyle} resizeMode="contain" source={require('../../images/notify_pass.png')}/>
                          }
                          </View>
                        }
                        <View style={styles.textContainer}>
                            <Text style={styles.detail}>{data.content}</Text>
                        </View>
                  </View>
                </TouchableOpacity>

                :
                  <TouchableOpacity activeOpacity={1} onPress={() =>{
                    this.props.jumpToNormalPage && this.props.jumpToNormalPage(data);
                    }} >
                    <View style={styles.contentContainer}>

                          {data.isDelete === 'Y'?
                            <Image style={styles.iconStyle} resizeMode="contain" source={require('../../images/notify_no.png')}/>
                            :
                            <View>
                              {imageUrl?<YH_Image style={styles.iconStyle} url={imageUrl} resizeMode="contain"/>:
                                <Image style={styles.iconStyle} resizeMode="contain" source={require('../../images/notify_no.png')}/>
                            }
                            </View>
                          }
                          <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.jumpToNotifGrassPage && this.props.jumpToNotifGrassPage(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
  },

  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'
  },
  });