customer / shanghai-railway-rnapp

/**
 * Created by Cassie on 18/06/15
 * 图文详情页面图片浏览查看,带操作栏
 */
import React, { Component } from "react";
import {
    ActivityIndicator,
    Animated,
    CameraRoll,
    DeviceEventEmitter,
    Image,
    InteractionManager,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from "react-native";
import Carousel from "react-native-looped-carousel";
import ImageViewer from 'react-native-image-zoom-viewer';
import RNFS from "react-native-fs";
import { height, width, zoomH, zoomW } from "../../utils/getSize";
import { getHeaderPadding, isIphoneX, xnToast } from "../../utils/utils";
import AppService from "../../service/AppService";
import _ from "lodash";

const forwarding = require("../../img/zf_w.png");
const comment = require("../../img/pl_w.png");
const prise = require("../../img/dz_w.png");
const prised = require("../../img/prised.png");

let lastIndex;

export default class DetailImageBrowser extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        header: null
    });

    constructor(props) {
        super(props);
        this.state = {
            imgList: this.props.navigation.state.params.imgList,
            detailInfo: this.props.navigation.state.params.detailInfo,
            from: this.props.navigation.state.params.from,
            currentIndex: this.props.navigation.state.params.index,
            bottom: new Animated.Value(-(320 / zoomH)),
            download: false,
            startDown: false,
            showSave: false,
            downloadProgress: 0,
            loading: false,
            threadStatistics:{}//帖子统计信息
        };
    }

    componentWillMount() {
        // 传参才查询，如果是回答详情这种列表过来的就不查询
        if(!!this.state.detailInfo && !!this.state.detailInfo.id){
            this.getThreadStatic();
            AppService.forumActionHistory({forumId:global.forumId,actionTargetId:this.state.detailInfo.id,actionType:30,actionTargetType:0,actionTargetThreadId:this.state.detailInfo.id}).then((data)=>{});
        }
    }

    componentWillUnmount() {
        if ( this.refreshThreadStatic !=null){
            this.refreshThreadStatic.remove();
        }
    }
    componentDidMount() {
        let _this = this;
        this.refreshThreadStatic = DeviceEventEmitter.addListener(
            "refreshThreadStatic",
            function() {
                _this.getThreadStatic();
            }
        );
    }

    //获取帖子统计信息
    getThreadStatic(){
        let params = {
            id: this.state.detailInfo.id,//帖子id
        };

        AppService.queryThreadStatistic(params).then((data) => {
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                this.setState({
                    threadStatistics:data.threadStatistics,
                })
            }

        }).catch((error) => {

            xnToast(error)
        })


    }


    /*保存图片*/
    savePic() {
        InteractionManager.runAfterInteractions(() => {
            this.setState({
                startDown: true,
                download: false,
                downloadProgress: 0,
                loading: true
            });
            let currentIndex = this.state.currentIndex;
            const filePath = this.state.imgList[currentIndex].filePath;
            const downloadPath = filePath + "?x-oss-process=image/resize,w_1000";
            const fileName = filePath.substring(filePath.lastIndexOf("/") + 1);
            const downloadDest = RNFS.CachesDirectoryPath + "/" + fileName;

            console.log(filePath);

            try {
                RNFS.downloadFile({
                    fromUrl: downloadPath,
                    toFile: downloadDest,
                    background: true,
                    progress: progress => {
                        this.setState({
                            downloadProgress: parseInt(
                                (progress.bytesWritten / progress.contentLength) * 100
                            )
                        });
                    }
                })
                    .promise.then(response => {
                    this.setState(
                        {
                            download: true
                        },
                        function() {
                            setTimeout(() => {
                                xnToast("已保存");
                                this.setState({
                                    startDown: false,
                                    download: false,
                                    loading: false
                                });
                            }, 1000);
                        }
                    );
                    return CameraRoll.saveToCameraRoll(downloadDest, "photo");
                })
                    .catch(error => {
                        this.setState({
                            startDown: false,
                            loading: false
                        });
                        console.log(error);
                        alert("保存图片出错，请稍后再试");
                    });
            } catch (error) {
                this.setState({
                    startDown: false,
                    loading: false
                });
                alert(JSON.stringify(error));
            }
        });
    }

    //获取帖子详细信息
    getThreadDetailInfo() {
        if (!global.isConnected) {
            return;
        }

        let params = {
            id: this.state.detailInfo.id, //帖子id
            sourceFrom:'APP'
        };

        AppService.getDetailById(params)
            .then(data => {
                if (data.message) {
                    return;
                }
                if (data.errors.length > 0) {
                    if (!!data.hasBeenDeleted){
                        xnToast("帖子信息不存在或已被删除");
                        this.props.navigation.goBack();
                        return
                    }
                } else {
                    this.setState({
                        detailInfo: data.threadExtend
                    });
                }
            })
            .catch(error => {});
    }

    //点赞
    _starClick(isLike) {
        if (!global.isConnected) {
            xnToast("暂无网络连接，请稍后重试！");
            return;
        }
        let data = this.state.detailInfo;
        this.setState({
            loading: true
        });
        //点赞
        if (isLike) {
            let params = {
                forumId: data.forumId, //社区id
                boardId: data.boardId, //版块ID
                targetType: 0, //点赞类型: 点赞对象的类型 0：帖子点赞 1：回复点赞 2：评论点 3:转发点赞
                targetId: data.id, //点赞对象ID
                likeUserId: global.userId, //点赞用户ID
                likeUserName: global.userName //点赞用户名字
            };
            AppService.like(params)
                .then(data => {
                    console.log(data);
                    this.setState({
                        loading: false
                    });
                    if (data.message) {
                        xnToast(data.message);
                        return;
                    }
                    if (data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    } else {
                        xnToast("点赞成功");
                        this.getThreadDetailInfo();
                        //通知列表刷新
                        DeviceEventEmitter.emit("refreshHomeList");
                        DeviceEventEmitter.emit("reGetThreadDetailInfo");
                    }
                })
                .catch(error => {
                    xnToast(error);
                });
        } else {
            //取消点赞
            let params = {
                id: data.threadLike.id //点赞id
            };
            console.log(params);

            AppService.cancelLike(params)
                .then(data => {
                    console.log(data);
                    this.setState({
                        loading: false
                    });
                    if (data.message) {
                        xnToast(data.message);
                        return;
                    }
                    if (data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    } else {
                        xnToast("已取消点赞");
                        this.getThreadDetailInfo();

                        //通知列表刷新
                        DeviceEventEmitter.emit("refreshHomeList");
                        DeviceEventEmitter.emit("reGetThreadDetailInfo");
                    }
                })
                .catch(error => {
                    xnToast(error);
                });
        }
    }

    //转发
    _forwardingClick = () => {
        let firstFileUrl = !!this.state.detailInfo.user.headFileUrl
            ? this.state.detailInfo.user.headFileUrl
            : ""; //用户头像
        let content = "";
        let placeHolderContent = "";
        let atList = [];
        if (
            !!this.state.detailInfo.originThread &&
            this.state.detailInfo.originThread.threadDetail
        ) {
            //多次转发，有原贴内容
            firstFileUrl =
                this.state.detailInfo.originThread.threadDetail.firstFileUrl ||
                firstFileUrl;
            content =
                this.state.detailInfo.originThread.threadUserName +
                " : " +
                this.state.detailInfo.originThread.threadDetail.content;
            placeHolderContent =
                "//@" +
                this.state.detailInfo.threadUserName +
                " : " +
                (this.state.detailInfo.threadDetail.content || "");
            let user = {
                id: this.state.detailInfo.threadUserId,
                name: this.state.detailInfo.threadUserName
            };
            atList.push(user);
            if (
                !!this.state.detailInfo.atHistoryList &&
                this.state.detailInfo.atHistoryList.length > 0
            ) {
                for (let i = 0; i < this.state.detailInfo.atHistoryList.length; i++) {
                    atList.push(this.state.detailInfo.atHistoryList[i]);
                }
            }
        } else {
            //原贴，没有转发过
            firstFileUrl =
                !!this.state.detailInfo.threadDetail &&
                !!this.state.detailInfo.threadDetail.firstFileUrl
                    ? this.state.detailInfo.threadDetail.firstFileUrl || firstFileUrl
                    : ""; //封面图，原贴的第一张图，如果没有，传用户头像
            content =
                this.state.detailInfo.threadUserName +
                " : " +
                this.state.detailInfo.threadDetail.content;
        }

        console.log("1111", this.state.detailInfo);

        let data = {
            forumId: this.state.detailInfo.forumId, //社区id
            boardId: this.state.detailInfo.boardId, //版块ID,
            threadId: this.state.detailInfo.id, //帖子id
            firstFileUrl: firstFileUrl,
            atList: atList, //帖子@的人列表
            placeHolderContent: placeHolderContent, //转发的转发，别人转发的内容
            content: content //帖子内容，需要自己拼接为 username：content 的格式
        };
        this.props.navigation.navigate("Forwarding", {
            from: "HomeList",
            data: data,
            title: "123",
            isVideo: this.props.isVideo
        });
    };
    //评论
    _commentClick = () => {
        if (!!this.state.from && this.state.from == "HomeList") {
            this.props.navigation.goBack();

            this.props.navigation.navigate("HomeListDetail", {
                from: "comment",
                id: this.state.detailInfo.id
            });
            return;
        }
        //回到之前详情页面并跳转到评论了表
        // DeviceEventEmitter.emit('toCommentPosition');

        this.props.navigation.goBack();
    };

    componentWillUnmount() {
        this.setState = (state, callback) => {
            return;
        };
    }

    setIndex(index) {
        console.log("-----------------");
        if (lastIndex == index) {
            return;
        }
        this.setState(
            {
                currentIndex: index
            },
            function() {
                lastIndex = index;
            }
        );
    }

    renderBottomView() {
        let detailInfo = this.state.detailInfo;
        let  forwardTxt = !!this.state.threadStatistics && this.state.threadStatistics.forwardNum >0?this.state.threadStatistics.forwardNum:'转发';
        let  commentTxt = !!this.state.threadStatistics && this.state.threadStatistics.commentNum >0?this.state.threadStatistics.commentNum:'评论';
        let  priseTxt = !!this.state.threadStatistics && this.state.threadStatistics.likeNum >0?this.state.threadStatistics.likeNum:'赞';

        return (
            <View
                style={{
                    height: 30 / zoomH,
                    flexDirection: "row",
                    justifyContent: "space-between",
                    alignItems: "center",
                    marginTop: 10 / zoomH,
                    marginBottom: isIphoneX() ? 34 : 0
                }}
            >
                <TouchableOpacity
                    activeOpacity={0.8}
                    style={styles.starItem}
                    onPress={this._forwardingClick}
                >
                    <Image
                        style={styles.itemImg}
                        source={forwarding}
                        resizeMode="contain"
                    />
                    <Text style={styles.itemText}>
                        {forwardTxt}
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity
                    activeOpacity={0.8}
                    style={styles.starItem}
                    onPress={this._commentClick}
                >
                    <Image style={styles.itemImg} source={comment} resizeMode="contain" />
                    <Text style={styles.itemText}>
                        {commentTxt}
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity
                    activeOpacity={0.8}
                    style={styles.starItem}
                    onPress={() => {
                        this._starClick(
                            !!detailInfo.threadLike && !!detailInfo.threadLike.isActive
                                ? false
                                : true
                        );
                    }}
                >
                    <Image
                        style={styles.itemImg}
                        source={
                            !!detailInfo.threadLike && !!detailInfo.threadLike.isActive
                                ? prised
                                : prise
                        }
                        resizeMode="contain"
                    />
                    <Text
                        style={
                            !!detailInfo.threadLike && !!detailInfo.threadLike.isActive
                                ? styles.itemTextRed
                                : styles.itemText
                        }
                    >
                        {priseTxt}
                    </Text>
                </TouchableOpacity>
            </View>
        );
    }
    render() {

        let fileList = [];

        for (let i = 0;i<this.state.imgList.length;i++){
            let vm = {
                url:this.state.imgList[i].filePath+ "?x-oss-process=image/resize,w_1000"
            };
            fileList.push(vm);
        }

        return (
            <View
                style={styles.background}
            >
                <StatusBar backgroundColor={"#000"} networkActivityIndicatorVisible />
                <View style={{ height: getHeaderPadding(), backgroundColor: "#000" }} />
                <View
                    style={{
                        width: "100%",
                        height: 50,
                        flexDirection: "row",
                        padding: 15 / zoomW,
                        alignItems: "center",
                        justifyContent: "space-between",

                    }}
                >
                    <Text style={{ color: "#fff", fontSize: 14 }}>
                        {/*{this.state.currentIndex + 1 + "/" + this.state.imgList.length}*/}
                    </Text>
                    <TouchableOpacity
                        onPress={() => {
                            this.savePic();
                        }}
                    >
                        <Text style={{ color: "#fff", fontSize: 14 }}>保存</Text>
                    </TouchableOpacity>
                </View>

                <View style={styles.viewBg}>
                    <ImageViewer
                        imageUrls={fileList} // 照片路径
                        enableImageZoom={true} // 是否开启手势缩放
                        index={this.state.currentIndex} // 初始显示第几张
                        onChange={(index) => this.setIndex(index)} // 图片切换时触发
                        onClick={() => { // 图片单击事件
                            this.props.navigation.goBack();
                        }}
                        saveToLocalByLongPress={false}
                    />

                    {/*<Carousel*/}
                        {/*style={{ flex: 1 }}*/}
                        {/*bullets={false}*/}
                        {/*isLooped={true}*/}
                        {/*autoplay={false}*/}
                        {/*currentPage={this.state.currentIndex}*/}
                        {/*onAnimateNextPage={index => {*/}
                            {/*this.setIndex(index);*/}
                        {/*}}*/}
                    {/*>*/}
                        {/*{this.state.imgList.map((item, index) => (*/}
                            {/*<TouchableOpacity*/}
                                {/*key={index}*/}
                                {/*style={{*/}
                                    {/*flex: 1,*/}
                                    {/*display: "flex",*/}
                                    {/*justifyContent: "center",*/}
                                    {/*alignItems: "center"*/}
                                {/*}}*/}
                                {/*activeOpacity={1}*/}
                                {/*onPress={() => {*/}
                                    {/*this.props.navigation.goBack();*/}
                                {/*}}*/}
                            {/*>*/}
                                {/*<Image*/}
                                    {/*style={{ width: "100%", height: "100%" }}*/}
                                    {/*source={{*/}
                                        {/*uri: item.filePath + "?x-oss-process=image/resize,w_1000"*/}
                                    {/*}}*/}
                                    {/*resizeMode="contain"*/}
                                {/*/>*/}
                            {/*</TouchableOpacity>*/}
                        {/*))}*/}
                    {/*</Carousel>*/}
                </View>
                {/*底部操作栏*/}
                {!_.isEmpty(this.state.detailInfo) ? this.renderBottomView() : null}
                {this.state.loading && (
                    <View style={styles.loadingBg}>
                        <View style={styles.loadingBox}>
                            <ActivityIndicator size="large" color="#fff" />
                        </View>
                    </View>
                )}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    background: {
        backgroundColor: "#000",
        flex: 1
    },
    viewBg: {
        flex: 1
    },
    picItem: {
        width: "100%",
        height: 50 / zoomH,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        borderStyle: "solid",
        borderBottomColor: "#eee",
        borderBottomWidth: StyleSheet.hairlineWidth
    },
    delBtn: {
        width: 50 / zoomW,
        height: 45 / zoomH,
        marginTop: 1 / zoomH,
        marginRight: 1 / zoomW,
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#ea281a",
        position: "absolute",
        right: 0,
        borderRadius: 7
    },
    loadingBox: {
        width: 100 / zoomW,
        height: 120 / zoomH,
        backgroundColor: "rgba(0,0,0,.5)",
        borderRadius: 8,
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
    },
    modalBg: {
        width: width,
        height: height,
        backgroundColor: "rgba(0,0,0,.5)",
        display: "flex",
        alignItems: "center"
    },

    settingItem: {
        width: "100%",
        backgroundColor: "#eeeeee",
        height: 50 / zoomH,
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
    },
    starItem: {
        flex: 1,
        padding: 15,
        justifyContent: "center",
        flexDirection: "row",
        alignItems: "center"
    },
    forwardingBg: {
        borderWidth: 1,
        borderColor: "#eeeeee"
    },

    itemText: {
        fontSize: 12,
        color: "#fff",
        marginLeft: 10 / zoomW
    },

    itemTextRed: {
        fontSize: 16,
        color: "#E54843",
        marginLeft: 10 / zoomW
    },
    itemImg: {
        width: 18 / zoomW,
        height: 18 / zoomW
    },
    loadingBg: {
        position: "absolute",
        top: 0,
        width: "100%",
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
    }
});