customer / shanghai-railway-rnapp

/**
 * Created by Cassie on 2018/03/06
 */
import React, { Component } from 'react';
import {
    NativeModules,
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    FlatList,
    Animated,
    Modal,
    StatusBar,
    ActivityIndicator,
} from 'react-native';
import VideoPlayer from 'react-native-video-controls';

import {height,zoomW,zoomH} from '../../utils/getSize';
import {getHeaderPadding,xnBorderWidth,xnToast,numChange} from "../../utils/utils";
import AppService from "../../service/AppService";

const isTop = require('../../img/isTop.png');
const cover = require('../../img/cover.png');
const video = require('../../img/video.png');
const top1 = require('../../img/top1.png');
const top2 = require('../../img/top2.png');
const top3 = require('../../img/top3.png');
const back = require('../../img/back_gray.png');
const close = require('../../img/close.png');
const search = require('../../img/search.png');
const more = require('../../img/more.png');
const post = require('../../img/post.png');
const plate = require('../../img/plate.png');
const selected = require('../../img/selected.png');
const defaultIcon = require('../../img/defaultIcon.png');
const Platform = require('Platform');

export default class PlateList extends Component {
    static navigationOptions = ({ navigation, screenProps })=>({
        title:navigation.state.params.name,
        headerLeft:(
            <TouchableOpacity style={styles.backWrap} onPress={navigation.state.params?navigation.state.params.back:null}>
                <Image source={back} resizeMode="contain" />
            </TouchableOpacity>
        ),
        headerRight:(<View style={styles.rightTop}>
            <TouchableOpacity style={[styles.rightIcon,{marginRight:(6/zoomW)}]} onPress={() => navigation.state.params?navigation.state.params.toSearch():null}>
                <Image source={search} style={styles.searchIcon} resizeMode="contain" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.rightIcon} onPress={() =>{
                navigation.state.params? navigation.state.params.showRight():null
            }}>
                <Image source={more} style={styles.moreIcon} resizeMode="contain" />
            </TouchableOpacity>
        </View>)
    });

    constructor(props) {
        super(props);
        this.state = {
            list:[],
            right:new Animated.Value(-(228/zoomW)),
            showModal:false,
            loading:true,
            all:true
        };
    }

    componentWillMount(){
        if(this.props.navigation.state.params.fromHome) {
            global.go_back_key = this.props.navigation.state.key;
        }
        this.setState({
            title:this.props.navigation.state.params.name,
            id:this.props.navigation.state.params.id
        });
        this.getList('IS_BOARD_TOP',null);
    }

    componentDidMount(){
        let  _this=this;
        //设置头部
        this.props.navigation.setParams({
            name:this.props.navigation.state.params.name,
            back:()=>{
                this.props.navigation.goBack();
            },
            showRight:()=>{
                _this.getPlate();
                _this.setState({
                    showModal:true
                },function(){
                    Animated.timing(
                        this.state.right,
                        {toValue:0,duration:200}
                    ).start();
                });
            },
            toSearch:()=>{
                this.props.navigation.navigate('Search',{});
            }
        });
    };

    /*获取列表*/
    getList(type,good){
        this.setState({
            loading:true
        });
        AppService.findPostList({boardId:this.props.navigation.state.params.id,sortColumn:type,isGood:good}).then(data=>{
            this.setState({
                loading:false
            });
            if(data.message){
                xnToast(data.message);
                return;
            }
            if(data.errors.length > 0) {
                xnToast(data.errors[0].message);
            }else{
                this.setState({
                    list:data.result,
                });
            }
        });
    };
    /* 渲染列表*/
    keyExtractor = (item,index) => index;
    /*首页列表*/
    renderItem = ({item,index}) => (
        <TouchableOpacity activeOpacity={0.8} style={styles.listItem} onPress={() => this.toDetail(item.id)}>
            <View style={styles.itemTop}>
                {item.isForumTop && <Image source={isTop} style={styles.isTopIcon} resizeMode="contain" />}
                <Text numberOfLines={1} style={[styles.itemTitle,{width:item.isForumTop ? (305/zoomW):(345/zoomW)}]}>{item.title}</Text>
            </View>
            <View style={styles.itemContent}>
                {item.imgeAttachmentCount == 1 && item.vedioAttachmentCount == 0 &&  <Image source={{uri:item.attachmentList[0].filePath+'?x-oss-process=image/resize,w_1000'}} style={styles.coverImg} resizeMode="cover" />}
                {item.imgeAttachmentCount > 1 && item.vedioAttachmentCount == 0 && item.attachmentList.map((item,index) => this.renderImg(item,index))}
                {item.vedioAttachmentCount == 1 && item.attachmentList.map((item,index) => this.renderVideo(item,index))}
                {item.contentText != null && item.contentText.length != 0 && !item.attachmentList && <Text numberOfLines={2} style={styles.contentText}>{item.contentText}</Text>}
            </View>
            <View style={styles.itemBottom}>
                <Text style={{fontSize:14,color:'#999'}}>{numChange(item.postCount)}回复</Text>
                <View style={{display:'flex',flexDirection:'row',alignItems:'center'}}>
                    {item.threadUserAvatarUrl && <Image source={{uri:item.threadUserAvatarUrl+'?x-oss-process=image/resize,w_1000'}} style={styles.avatar} resizeMode="cover" />}
                    {!item.threadUserAvatarUrl && <Image source={defaultIcon} style={styles.avatar} resizeMode="cover" />}
                    <Text style={{fontSize:14,color:'#999'}}>{item.threadUserName}·{item.boardName}</Text>
                </View>
            </View>
        </TouchableOpacity>
    );
    /*渲染图片*/
    renderImg(item,index){
        return (
            <View key={index}>
                {index == 0 && <Image source={{uri:item.filePath+'?x-oss-process=image/resize,w_1000'}} style={styles.moreImg} resizeMode="cover" />}
                {index == 1 && <Image source={{uri:item.filePath+'?x-oss-process=image/resize,w_1000'}} style={[styles.moreImg,{marginLeft:(6/zoomW),marginRight:(6/zoomW)}]} resizeMode="cover" />}
                {index == 2 && <Image source={{uri:item.filePath+'?x-oss-process=image/resize,w_1000'}} style={styles.moreImg} resizeMode="cover" />}
            </View>
        )
    };
    /*渲染视频*/
    renderVideo(item,index){
        return (
            item.businessCategory == 'VEDIO' ? <View key={index} style={{width:(345/zoomW),height:(193/zoomW)}}>
                    <VideoPlayer paused={true} showOnStart={true} disableFullscreen={true} disablePlayPause={true} disableSeekbar={true} disableVolume={true} disableTimer={true} disableBack={true} style={{width:(345/zoomW),height:(193/zoomW)}} videoStyle={{width:(345/zoomW),height:(193/zoomW)}} source={{uri:item.filePath}}/>
                    <View style={{width:'100%',height:'100%',position:'absolute',top:0}} />
                </View>:null
        )
    };
    /*获取论坛列表*/
    getPlate(){
        AppService.findBoardList({forumId:global.forumId}).then(data=>{
            if(data.message){
                xnToast(data.message);
                return;
            }
            if(data.errors.length > 0) {
                xnToast(data.errors[0].message);
            }else{
                this.setState({
                    plateList:data.result
                });
            }
        })
    };
    renderPlate(item,index){
        return(
            <TouchableOpacity key={index} activeOpacity={0.5} style={styles.plateItem} onPress={() => this.toPlate(item.name,item.id)}>
                <Text style={{fontSize:16,color:this.state.title == item.name?'#39f':'#000'}}>{item.name}</Text>
                {this.state.title == item.name && <Image source={selected} resizeMode="contain" />}
            </TouchableOpacity>
        )
    };
    /*右侧菜单栏关闭*/
    closeRight(){
        this.setState({
            right:new Animated.Value(-(228/zoomW)),
        },function(){
            this.setState({
                showModal:false,
            })
        });
    };
    /*跳转到发帖*/
    toPost(){
        this.props.navigation.navigate('Post',{name:this.state.title,id:this.state.id});
        this.closeRight();
    };
    /*跳转到板块*/
    toPlate(name,id){
        this.props.navigation.navigate('PlateList',{name:name,id:id});
        this.closeRight();
    };
    /*全部与精华切换*/
    select(type){
        if(type == 'All'){
            this.setState({
                all:true
            });
            this.getList('IS_BOARD_TOP',null)
        }else if(type == 'Good'){
            this.setState({
                all:false
            });
            this.getList('IS_BOARD_TOP',true)
        }
    };
    /*跳转到详情*/
    toDetail(id){
        // AppService.updateView({id:id}).then((data) => {
        //     if(!data.message && data.errors.length == 0){
                this.props.navigation.navigate('Detail',{id:id})
        //     }
        // })
    };
    /*跳转到首页*/
    toHome(){
        this.props.navigation.goBack(global.go_back_key);
        this.closeRight();
    }

    render() {
        return (
            <View style={styles.background}>
                <StatusBar barStyle="default" />
                <View style={styles.topTab}>
                    <TouchableOpacity style={[styles.barItem,{borderBottomWidth:this.state.all ? 2:0}]} onPress={() => this.select('All')}>
                        <Text style={{fontSize:16,color:this.state.all ? '#000':'#666'}}>全部</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.barItem,{borderBottomWidth:this.state.all ? 0:2}]} onPress={() => this.select('Good')}>
                        <Text style={{fontSize:16,color:this.state.all ? '#666':'#000'}}>精华</Text>
                    </TouchableOpacity>
                </View>
                <FlatList keyExtractor={this.keyExtractor} data={this.state.list} renderItem={this.renderItem} />
                {/*右侧更多*/}
                <Modal animationType={'none'} transparent={true} visible={this.state.showModal} onRequestClose={() => {}}>
                    <View style={styles.modalBg}>
                        <TouchableOpacity style={{flex:1}} onPress={() => this.closeRight()}>
                            <Animated.View style={[styles.rightMenu,{right:this.state.right}]}>
                                {/*onPress={() => {this.toPost()}}*/}
                                {/*<TouchableOpacity activeOpacity={1} style={styles.post} onPress={() => {this.toPost()}}>*/}
                                    {/*<View style={{flex:1}}>*/}
                                        {/*<Image source={post} style={styles.menuTip} resizeMode="contain" />*/}
                                    {/*</View>*/}
                                    {/*<View style={{flex:5}}>*/}
                                        {/*<Text style={{color:'#000',fontSize:16}}>发帖</Text>*/}
                                    {/*</View>*/}
                                {/*</TouchableOpacity>*/}
                                <View style={[styles.platBox,{ paddingTop: getHeaderPadding() + 15 / zoomH }]}>
                                    <View style={{ flexDirection: 'row', alignItems: 'center', paddingBottom: 14 / zoomH }}>
                                        <View style={{flex:1}}>
                                            <Image source={plate} style={styles.menuTip} resizeMode="contain" />
                                        </View>
                                        <View style={{flex:5}}>
                                            <Text style={{color:'#000',fontSize:16}}>板块</Text>
                                        </View>
                                    </View>
                                    <View style={{ flexDirection: 'row' }}>
                                        <View style={{flex:1}}></View>
                                        <View style={{flex:5}}>
                                            <TouchableOpacity activeOpacity={0.5} style={styles.plateItem} onPress={() => this.toHome()}>
                                                <Text style={{fontSize:16,color:'#000'}}>首页</Text>
                                            </TouchableOpacity>
                                            {this.state.plateList && this.state.plateList.map((item,index) => this.renderPlate(item,index))}
                                        </View>
                                    </View>
                                </View>
                            </Animated.View>
                        </TouchableOpacity>
                    </View>
                </Modal>
                {this.state.loading && <View style={styles.loadingBg}>
                    <ActivityIndicator size="large" />
                </View>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    backWrap: {
        justifyContent: 'center',
        paddingLeft: 15 / zoomW,
        paddingRight: 15 / zoomW,
        height: 44 / zoomH,
    },
    leftIcon:{
        width:(50/zoomW),
        height:'100%',
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    backIcon:{
        width:(16/zoomW),
        height:(16/zoomH),
        marginLeft:(10/zoomW)
    },
    closeIcon:{
        width:(16/zoomW),
        height:(16/zoomH)
    },
    rightTop:{
        flex:1,
        display:'flex',
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        paddingRight:(12/zoomW)
    },
    rightIcon:{
        height:'100%',
        width:(40/zoomW),
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    },
    searchIcon:{
        width:(20/zoomW),
        height:(20/zoomW)
    },
    moreIcon:{
        width:(20/zoomW),
        height:(20/zoomW)
    },
    background:{
        width:'100%',
        height:'100%',
        backgroundColor:'#f2f2f2'
    },
    topTab:{
        width:'100%',
        height:(44/zoomH),
        borderBottomWidth:xnBorderWidth(),
        borderBottomColor:'#eee',
        borderStyle:'solid',
        backgroundColor:'#fff',
        paddingLeft:(22/zoomW),
        display:'flex',
        flexDirection:'row'
    },
    barItem:{
        width:(68/zoomW),
        height:(44/zoomH),
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        borderBottomColor:'#333',
        borderStyle:'solid',
    },
    listItem:{
        minHeight:(110/zoomH),
        maxHeight:(318/zoomH),
        backgroundColor:'#fff',
        marginBottom:(8/zoomH),
        padding:(15/zoomH),
    },
    itemTop:{
        width:(345/zoomW),
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    itemTitle:{
        color:'#000',
        fontSize:16,
        fontWeight:'600'
    },
    isTopIcon:{
        width:(40/zoomW),
    },
    topNumIcon:{
        width:(40/zoomW),
        marginRight:10,
        marginTop:(2/zoomH)
    },
    coverImg:{
        width:(345/zoomW),
        height:(193/zoomH)
    },
    moreImg:{
        width:(112/zoomW),
        height:(112/zoomW)
    },
    itemContent:{
        display:'flex',
        flexDirection:'row',
        marginTop:(15/zoomH),
        marginBottom:(15/zoomH)
    },
    contentText:{
        fontSize:14,
        color:'#666'
    },
    itemBottom:{
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-between'
    },
    avatar:{
        width:(20/zoomW),
        height:(20/zoomW),
        borderRadius:(10/zoomW),
        marginRight:(6/zoomW)
    },
    modalBg:{
        width:'100%',
        height:'100%',
        backgroundColor:'rgba(0,0,0,.5)'
    },
    rightMenu:{
        width:(228/zoomW),
        height:height,
        backgroundColor:'#fff',
        position:'absolute',
        right:0,
        paddingLeft:(20/zoomW)
    },
    post:{
        width:'100%',
        height:(90/zoomH),
        borderBottomWidth:xnBorderWidth(),
        borderBottomColor:'#eee',
        borderStyle:'solid',
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    menuTip:{
        width:(20/zoomW),
        height:(20/zoomW),
        marginRight:(10/zoomW),
    },
    platBox:{
        width:'100%',
        display:'flex',
    },
    plateItem:{
        width:'100%',
        paddingTop:(14/zoomH),
        paddingBottom:(14/zoomH),
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        paddingRight:(22/zoomW)
    },
    loadingBg:{
        width:'100%',
        height:'100%',
        position:'absolute',
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    }
});