xntalk / xntalk-rnapp

/**
 * Created by DEV005 on 2017/11/21.
 */
/**
 * Created by DEV005 on 2017/11/13.
 */

/**
 * Created by tdzl2003 on 12/18/16.
 */
import React, {Component} from "react";
import {
    Image,
    ListView,
    NativeModules,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View,
    Platform,
    RefreshControl,
    ActivityIndicator,
    ScrollView,
    Dimensions,
    Modal
} from "react-native";

import { observable, useStrict, action } from 'mobx';
import { observer } from 'mobx-react';
import {xnToast,getHeaderHeight,getHeaderPadding,getFooterBottom,xnBorderWidth} from "../utils/utils";
import AppService from "../service/AppService";
import xnMainCss from "../css/css";


export default class BillingList extends Component {

    static navigationOptions = ({ navigation, screenProps })=>({
        title: '我的开票公司',
        headerLeft:(<View style={{flexDirection: 'row',flex:1}}>
            <TouchableOpacity style={{flexDirection: 'column',justifyContent: 'center',paddingRight:15,paddingLeft:10}} onPress={navigation.state.params?navigation.state.params._goBack:null}>
                <Image style={{  width:16,height:16}}  source={require('../img/backB.png')}  resizeMode="contain"/>
            </TouchableOpacity>
            <TouchableOpacity style={{flexDirection: 'column',justifyContent: 'center',paddingRight:15,paddingLeft:15}} onPress={navigation.state.params?navigation.state.params._close:null}>
                <Image style={{  width:16,height:16}}  source={require('../img/closeB.png')}  resizeMode="contain"/>
            </TouchableOpacity>
        </View>)
    });

    constructor(props) {
        super(props);
        this.state = {
            list:[],
            totalCount:0,
            selectTotal:0

        };
    }
    componentDidMount(){
        let  _this=this;
        //设置头部
        this.props.navigation.setParams({
            _goBack:()=>{
                this.props.navigation.goBack();
            },
            _close:()=>{
                NativeModules.system.navTo("BACK")
            }
        });

        this.getList()
    };
    getList=(parent)=>{

        let _this=this;

        let vm={
            unionId:global.unionId
        };

        AppService.getLegalentityAllList(vm).then(data=>{
            if (data.errors == null || data.errors.length > 0) {
                xnToast(data.errors[0].message);
                return
            }
            let list=data.result||[];
            let  newList=[];

            for(let i=0; i<list.length;i++){
                if(list[i].legalentityName){
                    list[i].selectActive=false;
                    if(list[i].legalentityName){
                        list[i].shortName=list[i].legalentityName.substring(0,1);
                    }
                    newList.push(list[i]);
                }
            };
            console.log(list);
            _this.setState({
                list:list,
                totalCount:newList.length,
            });
        })
    };

    render() {
        return (
            <View style={styles.body}>
                <ScrollView  style={styles.list}>
                    <View style={xnMainCss.xnRowLayout}>
                        {this.state.list.map((v, i) => this.rowContent(v, i))}
                    </View>
                </ScrollView>
                <View style={styles.footLayout}>
                    <Text style={styles.footInfo}>已选择{this.state.selectTotal}条</Text>
                    <TouchableOpacity style={styles.footBtn} onPress={()=>{this.save()}}><Text style={styles.footBtnText}>确定({this.state.selectTotal}/{this.state.totalCount})</Text></TouchableOpacity>
                </View>

            </View>
        );
    }
    rowContent = (v, i) =>{
        return (
            <View  key={i}>

                <TouchableOpacity style={xnMainCss.xnRow} onPress={()=>{this.select(v)}} activeOpacity={1}>
                    <View style={[xnMainCss.xnRowhd]}>
                        {v.selectActive&&<Image style={styles.xnRowIcon}  source={require('../img/selectActive.png')} resizeMode="contain"></Image>}
                        {!v.selectActive&&<Image style={styles.xnRowIcon}  source={require('../img/select.png')}  resizeMode="contain"></Image>}
                    </View>
                    <View style={[xnMainCss.xnRowhd,styles.imgIcon]}>
                        <Text style={[xnMainCss.xnRowhdText,styles.imgText]}>{v.shortName}</Text>
                    </View>
                    <View style={xnMainCss.xnRowbd }>
                        <Text style={xnMainCss.xnColumnTiTle}>{v.legalentityName}</Text>
                    </View>
                </TouchableOpacity>

            </View>

            )
      

    };

    select=(item)=>{

        let  _this=this;
        let  selectTotal=_this.state.selectTotal;
        if(item.selectActive){
            selectTotal--;
        }else {
            selectTotal++;
        }

        var list=_this.state.list;
        for(let i=0; i<list.length;i++){
            if(list[i].legalentityName==item.legalentityName){
                list[i].selectActive=!list[i].selectActive;
                break;
            }
        };
        _this.setState({
            selectTotal:selectTotal,
            list:list,
        });

    };
    
    
    save=()=>{
        let _this=this;
        if(this.state.selectTotal==0){
            xnToast("请选择开票公司！");
            return
        }
        let list=_this.state.list;
        
        let  vm={
            list:[]
        };
        
        for(let i=0;i<list.length;i++){
            if(list[i].selectActive){
                
                var item={
                    unionId:global.unionId,
                    legalentityName:list[i].legalentityName,
                    creditCode:list[i].creditCode,
                    bankAccountName:list[i].bankAccountName,
                    bankAccountNumber:list[i].bankAccountNumber,
                    legalentityAddress:list[i].legalentityAddress,
                    phoneNumber:list[i].phoneNumber,
                }
                vm.list.push(item);
            }            
        }

        AppService.importLegalentityList(vm).then(data=>{
            if (data.errors == null || data.errors.length > 0) {
                xnToast(data.errors[0].message);
                return
            }
            _this.props.navigation.navigate("Billing");
        })
    }

}

const styles = StyleSheet.create({

    body:{
        flex:1,
        flexDirection:"column",
        backgroundColor:"#fff",
    },
    list:{
        flex:1
    },
    item:{
        flexDirection:"row",
        alignItems:"center",
        backgroundColor:"#fff",
        borderBottomWidth:xnBorderWidth(),
        borderBottomColor:"#ddd",
        padding:8,
    },
    imgIcon:{
        width:20,
        height:20,
        alignItems:"center",
        justifyContent:"center",
        backgroundColor:"#39f",
        borderRadius:4,
        marginRight:10
    },
    imgText:{
        textAlign:"center",
        fontSize:14,
        color:"#fff",
    },
    itemInfo:{
        flex:1,
        justifyContent:"center",
        height:30,
    },
    itemInfoText:{
        color:"#333",
        fontSize:14,
    },
    link:{
        width:10,
        height:10,
        borderTopWidth:xnBorderWidth(),
        borderTopColor:"#666",
        borderRightWidth:xnBorderWidth(),
        borderRightColor:"#666",
        transform:[
            {rotate:'45deg'},
        ],
    },
    bookItemSelect:{
        marginLeft:10,
        width:20,
        height:20,
        justifyContent:"center",
        alignItems:"center",
        marginRight:10,
    },
    bookItemSelectImg:{
        width:20,
        height:20,
    },

    footLayout:{
        paddingTop:10,
        paddingBottom:10,
        backgroundColor:"#eee",
        borderTopWidth:xnBorderWidth(),
        borderTopColor:"#ddd",
        paddingLeft:15,
        paddingRight:15,
        paddingTop:8,
        paddingBottom:8,
        flexDirection:"row",
        height:50,
        justifyContent:"center",
        alignItems:"center",
    },
    footInfo:{
        flex:1,
        color:"#39f"

    },
    footBtn:{
        backgroundColor:"#3399ff",
        height:35,
        justifyContent:"center",
        alignItems:"center",
        paddingLeft:8,
        paddingRight:8,
        borderRadius:6
    },
    footBtnText:{
        color:"#fff"
    },

});