customer / shanghai-railway-rnapp

//
//  ClassName.js
//
//  Created by Cheney Mars on 2018/9/26.
//  Copyright © 2018年 saygoodlolita. All rights reserved.
//

import React, {Component} from "react";
import {
    DeviceEventEmitter,
    FlatList,
    Image,
    InteractionManager,
    NativeModules, Platform,
    Text,
    TouchableOpacity,
    View
} from "react-native";
import CommentMore from "../detail/CommentMore";
import {zoomW} from "../../utils/getSize";
import {NoDoublePress, xnToast} from "../../utils/utils";
import AppService from "../../service/AppService";
import CommentInput from "../detail/CommentInput"
import ActionSheet from 'react-native-actionsheet-api';
import Picker from 'react-native-picker';
import moment from "moment";


const defaultIcon = require("../../img/defaultIcon.png");
const goImg = require("../../img/goDetail.png");

export default class EditProfile extends Component {
    constructor(props) {
        super(props);
        this.state = {// userInfo
            data:[{title: '头像', detail: ' '}, {title: '用户名', detail: ' '},{title: '介绍', detail: ' '},{title: '性别', detail: ' '},{title: '生日', detail: ' '},{title: '地址', detail: ' '}],
            curPage:0,
            yearList: [],
            monthList: [],
            dayList: [],
            startYear: new Date().getFullYear(),
            startMonth: new Date().getMonth() + 1,
            startDay: new Date().getDate(),
            isShowCommentInput:false, // 是否显示CommentInput输入框组件
            minLength:0,//输入框最少输入多少字
        }
    }

    // 更新数据
    updateUserData(dic,curpage) {

        AppService.updateUserInfo(dic)
            .then(data => {

                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                    return;
                }
                xnToast("修改成功");
                if(this.refs.CommentInput != undefined){
                    InteractionManager.runAfterInteractions(() => {
                        this.refs.CommentInput.reset();
                    });
                }
                this.getUserInfo();
                DeviceEventEmitter.emit('refreshPageInfo');
                DeviceEventEmitter.emit('refreshHeader');
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                xnToast(error);
            });
    }

    //写评论
    inputClick (minLength,value){
        if (Platform.OS == 'ios'){
            this.setState({
                isShowCommentInput:true
            });
        }
        InteractionManager.runAfterInteractions(() => {
            this.refs.CommentInput.setMinLength(minLength);
            this.refs.CommentInput.setDefaultValue(value);
            this.refs.CommentInput.setCustomPublish();
            this.refs.CommentInput.showInputLayout();
        });
    };

    showMoreModal(index) {
        // 点击头像
        Picker.hide();
        if (index == 0) {
            ActionSheet.showActionSheetWithOptions({
                    options: [ '从相册中选择', '拍照', '取消'],
                    cancelButtonIndex: 2,
                    //destructiveButtonIndex: 0,
                    tintColor: global.homeColor,
                },
                (buttonIndex) => {
                    if (buttonIndex == 0) {
                        this.toAlbum();
                    }
                    if (buttonIndex == 1) {
                        this.openCamera();
                    }
                }
            );
        }
        // 点击用户名
        if (index == 1) {
            this.setState({
                curPage: index,
                minLength:1,
            },function () {
                this.inputClick(1,this.state.data[1].detail);
                // if(this.refs.CommentInput != undefined){
                //     InteractionManager.runAfterInteractions(() => {
                //         this.refs.CommentInput.setMinLength(1);
                //     });
                // }
            });

        }
        // 点击介绍
        if (index == 2) {
            this.setState({
                curPage: index,
                minLength:0,
            },function () {
                this.inputClick(0,this.state.data[2].detail);
                // if(this.refs.CommentInput != undefined){
                //     InteractionManager.runAfterInteractions(() => {
                //         this.refs.CommentInput.setMinLength(0);
                //     });
                // }
            });


        }
        // 点击性别
        if (index == 3) {
            ActionSheet.showActionSheetWithOptions({
                    options: [ '男', '女', '取消'],
                    cancelButtonIndex: 2,
                    //destructiveButtonIndex: 0,
                    tintColor: global.homeColor,
                },
                (buttonIndex) => {
                    if (buttonIndex == 0) {
                        let dic = {gender:"男", id:this.props.navigation.state.params.userInfo.id};
                        this.updateUserData(dic);

                    }
                    if (buttonIndex == 1) {
                        let dic = {gender:"女", id:this.props.navigation.state.params.userInfo.id};
                        this.updateUserData(dic);
                    }
                }
            );
        }
        // 点击生日
        if (index == 4) {
            this.switchStartDate();
        }
        // 点击地址
        if (index == 5) {
            NativeModules.system.openMapView("","").then((data)=>{
                let location = JSON.parse(data);

                const addressNameD = `${"中国"}${location.province}${location.urban}${location.name}`;

                let dic = {addressName:addressNameD, id:this.props.navigation.state.params.userInfo.id};
                this.updateUserData(dic);

            })
        }
    }

    //    选择开始日期
    switchStartDate() {
        Picker.init({pickerBg: [255, 255, 255, 1],
            pickerData: [this.state.yearList, this.state.monthList, this.state.dayList],
            selectedValue: [this.state.startYear, this.state.startMonth, this.state.startDay],
            pickerConfirmBtnText: '确认',
            pickerCancelBtnText: '取消',
            pickerTitleText: '选择日期',
            onPickerConfirm: (data) => {
                let year = data[0];
                let month = data[1];
                let day = data[2];
                let intMonth = parseInt(month);
                let intDay = parseInt(day);
                if (month < 10) {
                    month = '0' + month;
                }
                if (day < 10) {
                    day = '0' + day;
                }
                const startTime = `${year}${month}${day}`;

                if (Number(startTime)>moment(Number(new Date())).format('YYYYMMDD')) {
                    xnToast('生日不能选今天以后的日期');
                    return;
                }
                let dic = {birthday:startTime, id:this.props.navigation.state.params.userInfo.id};
                this.updateUserData(dic);

            },
            onPickerSelect: (data) => {

            },
        });
        Picker.show();
    }

    componentWillMount() {
        this.getUserInfo();

        const currentYear = new Date().getFullYear();
        const year = [];
        const month = [];
        const day = [];
        // 按照客户的要求，不再限制1970年之前，改为和微信小程序的日期原则一样从公元1年开始
        for (let y = 1; y <= currentYear; y++) {
            year.push(y);
            if (y === currentYear) {
                this.setState({
                    yearList: year,
                });
            }
        }
        for (let m = 0; m < 12; m++) {
            month.push(m + 1);
            if (m === 11) {
                this.setState({
                    monthList: month,
                });
            }
        }
        for (let d = 0; d < 31; d++) {
            day.push(d + 1);
            if (d === 30) {
                this.setState({
                    dayList: day,
                });
            }
        }

    }

    // 获取个人信息
    getUserInfo = () => {
        if (global.isConnected) {
            // alert("查询")
            AppService.getEditInfo({
                id: this.props.navigation.state.params.userInfo.id
            }).then((data) => {
                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (data.errors == null || data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                } else {

                    let userInfo = data.userExtend;;
                    let dataList = [];
                    let iconData = {
                        title:"头像",
                        detail:userInfo.headFileUrl,
                    };
                    dataList.push(iconData);
                    let nameData = {
                        title:"用户名",
                        detail:userInfo.name
                    };
                    dataList.push(nameData);
                    let descriptionData = {
                        title:"介绍",
                        detail:userInfo.description
                    };
                    dataList.push(descriptionData);
                    let genderData = {
                        title:"性别",
                        detail:userInfo.gender
                    };
                    dataList.push(genderData);
                    let birthdayData = {
                        title:"生日",
                        detail: String(userInfo.birthday).length == 8 ? String(userInfo.birthday).substring(0,4)+'-'+String(userInfo.birthday).substring(4,6)+'-'+String(userInfo.birthday).substring(6,8) : ''
                    };
                    dataList.push(birthdayData);
                    let addressData = {
                        title:"地址",
                        detail:userInfo.addressName
                    };
                    dataList.push(addressData);
                    this.setState({
                        data: dataList
                    });
                }
            })
        } else {
            xnToast('请检查网络');
        }

    };

    // 点击发布
    toComment=(data)=> {
        let curpage = this.state.curPage;
        // 更新用户名stri
        if (curpage == 1) {
            let dic = {name:data.content, id:this.props.navigation.state.params.userInfo.id};
            if(dic.name &&dic.name.length>10){
                xnToast("用户名不能超过10个字符");
                InteractionManager.runAfterInteractions(() => {
                    if(this.refs.CommentInput != undefined){
                        this.refs.CommentInput.focus();
                    }

                });
                return;
            }
            this.updateUserData(dic,curpage);
        }
        // 更新介绍
        if (curpage == 2) {
            let dic = {description:data.content, id:this.props.navigation.state.params.userInfo.id};

            if(dic.description && curpage == 2 &&dic.description.length>30){
                xnToast("介绍不能超过30个字符");
                InteractionManager.runAfterInteractions(() => {
                    if (this.refs.CommentInput !=undefined){
                        this.refs.CommentInput.focus();
                    }

                });
                return;
            }
            this.updateUserData(dic,curpage);
        }

    }

    componentDidMount() {
        let _this = this;
        // 关闭CommentInput输入框组件的通知
        this.closeCommentInputIos = DeviceEventEmitter.addListener('closeCommentInputIos',function(){
            console.log("closeCommentInputIos");
            _this.setState({
                isShowCommentInput:false,
            })
        });
    }

    componentWillUnmount() {
        Picker.hide();
        if (this.closeCommentInputIos != null) {
            this.closeCommentInputIos.remove();
        }
    }

    static navigationOptions = ({ navigation, screenProps }) => ({
        headerTitle: "编辑资料",
        headerLeft: (
            <TouchableOpacity activeOpacity={1} style={{flexDirection:'row',height:'100%',width:'100%'}}
                              onPress={() => NoDoublePress.onPress(() => {
                                  DeviceEventEmitter.emit("closeCommentInputIos");})}>
                <View style={{ width: 375 / 2 / zoomW, height: '100%', flexDirection: 'row' }}>
                    <TouchableOpacity activeOpacity={1} style={{ height: '100%', justifyContent: 'center', paddingLeft: 15 / zoomW, paddingRight: 15 / zoomW }}
                                      onPress={() => NoDoublePress.onPress(() => {
                                          DeviceEventEmitter.emit("closeCommentInputIos");
                                          navigation.goBack();})}>
                        <Image style={{ width: 18 / zoomW, height: 18 }} source={require('../../img/loadBack.png')} resizeMode="contain"/>
                    </TouchableOpacity>
                </View>
            </TouchableOpacity>
        ),
        headerRight: (
            <TouchableOpacity activeOpacity={1} style={{flexDirection:'row',height:'100%',width:'100%'}}
                              onPress={() => NoDoublePress.onPress(() => {
                                  DeviceEventEmitter.emit("closeCommentInputIos");})}>
                <View style={{ flexDirection: "row", flex: 1, justifyContent: "center" }}>
                    <View
                        style={{
                            flexDirection: "column",
                            justifyContent: "center",
                            paddingRight: 15,
                            paddingLeft: 10
                        }}
                    >
                        <Image
                            style={{ width: 20 / zoomW, height: 20 / zoomW }}
                            resizeMode="contain"
                        />
                    </View>
                </View>
            </TouchableOpacity>
        )
    });
    //从相册选择
    toAlbum(){
        let that = this;
        setTimeout(() =>{
            try {
                //带裁剪的
                NativeModules.system.choosePicWithCrop(true).then((data)=>{
                    that.handleCameraData(data);
                });
            }catch (ex){
                //不带裁剪功能的
                NativeModules.system.choosePic(1).then((data)=> {
                    that.handleCameraData(data);
                });
            }



        },500);

    }


    //照片选择结果处理
    handleCameraData(data){
        if(data ==''){
            //没有选择图片
            return ;
        }
        let path = data;
        let nameList =[];
        for (let i=0;i<data.length;i++) {
            let path = data[i].filePath;
            nameList.push(global.userId+path.substring(path.lastIndexOf('/') + 1))
            // let fileName = path.substring(path.lastIndexOf('/') + 1);
        }
        this.setState({
            loading:true
        });

        AppService.getAccess({nameList: nameList}).then((res)=>{
            if (res.message) {
                xnToast(res.message);
                this.setState({
                    loading: false
                });
                return;
            }
            if (res.errors.length > 0) {
                xnToast(res.errors[0].message);
            } else {
                NativeModules.system.batchUpload(res.accessKeyId,res.accessKeySecret,res.securityToken,res.infoList,path).then((data)=>{
                    // 拿到相册图片

                    let dic = {headFileUrl:data[0], id:this.props.navigation.state.params.userInfo.id};
                    this.updateUserData(dic);                                                                                   })
            }
        }).catch((error) => {
            this.setState({
                loading: false
            }, () => {
                xnToast(error.message);
            });
        })
    }

    openCamera(){
        try{
            //带裁剪功能
            NativeModules.system.takePhotoWithCropAndPassportId(global.passport.id).then((data) => {
                let res = JSON.parse(data);
                let dic = {headFileUrl:res.url, id:this.props.navigation.state.params.userInfo.id};
                this.updateUserData(dic);
            });
        }catch (ex){
            //不带裁剪功能
            NativeModules.system.takePhotoWithpassportId(global.passport.id).then((data) => {
                let res = JSON.parse(data);
                let dic = {headFileUrl:res.url, id:this.props.navigation.state.params.userInfo.id};
                this.updateUserData(dic);
            });
        }


    }

    render() {
        return (

            <View style={{flex:1,backgroundColor:"#F6F6F6",display: "flex",alignItems: "center",justifyContent:"flex-end"}}>
                <CommentMore
                    ref='CommentMore'
                    detailInfo = 'ss'
                    collectClick = {()=>{}}
                    deleteClick = {()=>{this.props.navigation.goBack();}}
                    forum={global.forum}
                />

                <FlatList style={{backgroundColor:"#F6F6F6", marginTop:10,width:"100%"}}

                          data={this.state.data}
                          renderItem={({item,index}) =>
                              <TouchableOpacity
                                  onPress = {()=>{this.showMoreModal(index)}}
                              >

                                  <View>

                                      <View style= {{backgroundColor:"white", flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
                                          <Text style={{fontSize:16, marginLeft:15}}>{item.title}</Text>
                                          <View  style= {{flexDirection:"row", marginRight:15,alignItems:"center"}}>
                                              {
                                                  index == 0 ?  <Image  style= {{borderRadius:17,height:34,width:34,marginTop:12,marginBottom:12,marginRight:10}} source={{ uri: item.detail+'?x-oss-process=image/resize,w_300'}}/>
                                                      : <Text   style= {{marginTop:12,marginBottom:12,marginRight:10, fontSize:14, color:"#999999",width:214,textAlign:'right'}}>{item.detail}</Text>
                                              }
                                              <Image source={goImg}/>
                                          </View>
                                      </View>
                                      <View style={{height:0.5,backgroundColor:"#EEEEEE",marginLeft:16, marginRight:14}}>
                                      </View>
                                      {index==2 ? <View><Text></Text></View> : null}
                                  </View>
                              </TouchableOpacity>

                          }
                />

                {Platform.OS == 'ios' && this.state.isShowCommentInput && <CommentInput  ref = "CommentInput"
                                                                                         callback = { (data)=>{this.toComment(data)}}
                                                                                         nav = {this.props.navigation}
                                                                                         isEdit={true}
                                                                                         hasNavHeight = {true}
                />}
                {Platform.OS == 'android' &&<CommentInput  ref = "CommentInput"
                                                           callback = { (data)=>{this.toComment(data)}}
                                                           nav = {this.props.navigation}
                                                           isEdit={true}
                                                           hasNavHeight = {true}
                />}
            </View>
        );
    }
}