customer / shanghai-railway-rnapp

import {Image, StyleSheet, Text, TouchableOpacity, View,DeviceEventEmitter} from "react-native";

import _ from "lodash";
import React, {Component} from "react";
import {width, zoomH, zoomW} from "../../utils/getSize";
import {dateToMsgTime, xnToast,NoDoublePress} from "../../utils/utils";
import StashHead from "../../widget/StashHead";
import ItemHeaderInfo from "../component/ItemHeaderInfo";



const tpPic = require("../../img/tp.png");

export default class AtlasItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.item,
            threadData: this.props.item
        };
    }

    componentWillMount() {
        this.dataHandle(this.state.data);
    }
    
    componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('readNoti',(itemId)=>{
            if (itemId.toString()==this.props.item.id) {
                this.props.item.hasBeenRead = true;
            }
        });
    }

    compnentWillUnmount() {
        this.subscription.remove();
    }

    /**
     * 接口返回数据处理
     * @param {*} data
     */
    dataHandle(data) {
        if (!data) {
            //xnToast("暂无数据!!!");
            return;
        }
        let attachmentList = [];
        let singleItem = {
            name: "",
            date: "",
            creatName: "",
            picCount: "",
            attachment: [],
            commentNum: 0,
            postID: 0,
            isBoardTop: false
        };
        singleItem.isBoardTop = data.isBoardTop ? data.isBoardTop : false;
        if (data.attachmentList) {
            for (let j = 0; j < data.attachmentList.length; j++) {
                if (j > 2) {
                    break;
                }
                let urls = {
                    url: ""
                };
                urls.url = data.attachmentList[j].filePath;
                attachmentList.push(urls);
            }
        }

        singleItem.name = data.title;
        singleItem.creatName = data.threadUserName;
        let time = dateToMsgTime(data.creationTime);
        singleItem.date = time;
        singleItem.attachment = attachmentList;
        singleItem.picCount = data.attachmentCount;
        singleItem.picCount = singleItem.picCount ? singleItem.picCount : "0";
        singleItem.postID = data.id;
        singleItem.commentNum = data.threadStatistics.commentNum;
        this.setState({
            data: singleItem
        });
    }

    _detailClick = () => {
        //详情
        NoDoublePress.onPress(()=>{
                              this.props.nav.navigate("AtlasDetails", { postID: this.state.data.postID });
                              })
        
    };

    renderView() {
        return (
            <TouchableOpacity
                style={styles.itemBackground}
                activeOpacity={0.8}
                onPress={() => {
                    this._detailClick();
                }}
            >
                {/*个人信息*/}
                <ItemHeaderInfo
                    itemList = {this.state.threadData}
                    nav = {this.props.nav}
                    showType = {this.props.showType}
                    hideTop = {this.props.hideTop|| false}
                    hideTime = {this.props.hideTime}
                    showReport = {this.props.showReport|| false}
                    reportCallback = {()=>{
                        if (this.props.reportCallback !=undefined){
                            this.props.reportCallback();
                        }
                    }}
                />
              <View>
                  {/*文字*/}
                <Text
                    style={{
                        width: "100%",
                        fontSize: 18,
                        color: this.props.item.hasBeenRead?"#999":"#000",
                        fontWeight: "bold",
                        padding:15/zoomW,
                    }}
                    numberOfLines={2}
                >
                    {this.state.data.name}
                </Text>

                  {/*图片*/}
                <View>
                  <View style={{flexDirection: "row",alignItems: "center", flexWrap: "wrap", paddingLeft:15/zoomW,paddingRight:15/zoomW }}>
                      {this.state.data.attachment
                          ? this.state.data.attachment.map((v, i) =>
                              this.renderImageItem(v, i)
                          )
                          : null}

                  </View>
                  <View
                      style={{

                          backgroundColor:'rgba(0,0,0,0.65)',
                          borderRadius: 10 / zoomW,
                          opacity: 0.65 / zoomW,
                          height: 20 / zoomW,
                          width: 55 / zoomW,
                          position:'absolute',
                          marginRight:14,
                          right:10/zoomW,
                          bottom:6/zoomH,
                          alignItems: "center",
                          flexDirection: "row"
                      }}
                  >
                    <Image style={{ marginLeft: 8 }} source={tpPic} />
                    <Text style={{ color: "white", fontSize: 12 }}>
                        {" "}
                        {this.state.data.picCount}图{" "}
                    </Text>
                  </View>
                </View>

                <View
                    style={{ flexDirection: "row",marginTop:12/zoomH,marginLeft:15/zoomW,marginRight:15/zoomW ,alignItems:'center',marginBottom:12/zoomH }}
                >
                    {/*{ ! this.props.hideTop && this.state.data.isBoardTop ? <StashHead /> : null}*/}
                  <Text
                      style={{
                          fontSize: 12,
                          color: "#000000",
                          opacity: 0.45
                      }}
                  >
                      {this.state.data.creatName} 评论{this.state.data.commentNum}
                  </Text>
                </View>
              </View>
                <View style={{ height: 6/zoomH, backgroundColor: "#F3F5F6" }} />

            </TouchableOpacity>
        );
    }

    //渲染图片列表item
    renderImageItem(item, i) {
        let itemWidth = (width - 48) * 0.33;
        return (
            <View
                key={i}
                style={[
                    i < 2 ? { marginRight: 10 } : null,
                    {
                        width: itemWidth,
                        height: 74,
                        backgroundColor: "#FFFFFF"
                    }
                ]}
            >
              <Image
                  style={{ width: "100%", height: "100%" }}
                  source={{
                      uri: item.url+'?x-oss-process=image/resize,w_300',
                      cache: "force-cache"
                  }}
                  resizeMode="cover"
              />
            </View>
        );
    }

    render() {
        return (
            <View>
                {_.isEmpty(this.state.data) ? null : <View>{this.renderView()}</View>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    background: {
        flex: 1,
        backgroundColor: "#ececf1",
        display: "flex"
    },

    itemBackground: {
        backgroundColor: "#FFFFFF",
    },

    topSearchView: {
        flex: 1,
        width: "100%",
        height: 40 / zoomH,
        backgroundColor: "#FFFFFF",
        borderRadius: 2,
        display: "flex",
        marginLeft: 15 / zoomW,
        marginRight: 15 / zoomW
    },
    tabStyle: {
        height: 34 / zoomH,
        backgroundColor: "#fff",
        elevation: 0,
        borderWidth: StyleSheet.hairlineWidth
    },

    starItem: {
        flex: 1,
        position:'absolute',
        bottom:10/zoomH,
        backgroundColor:'green',
        alignItems:'center',
        flexDirection: "row",
    },
    forwardingBg: {
        borderWidth: 1,
        borderColor: "#eeeeee"
    }
});