xntalk / xntalk-rnapp

/**
 * 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 Swipeout from 'react-native-swipeout';
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:15}} onPress={navigation.state.params?navigation.state.params._close:null}>
                <Image style={{  width:16,height:16}}  source={require('../img/backB.png')}  resizeMode="contain"/>
            </TouchableOpacity>
        </View>),
        headerRight:(<View style={{flexDirection: 'row',flex: 1}}>
            <TouchableOpacity style={{flexDirection: 'column',justifyContent: 'center',paddingRight:10,paddingLeft:10}} onPress={navigation.state.params?navigation.state.params._edit:null}>
                <Text style={{fontSize:14,color:"#000"}}>添加</Text>
            </TouchableOpacity>
        </View>)
    });

    constructor(props) {
        super(props);
        this.state = {
            billingList:[],
            isEdit:false,
            isLoading:false,
            swipeoutBtns : [
                {
                    text: '删除',
                    backgroundColor: 'red',
                    onPress: ()=>{
                        this.deleteItem(this.state.sectionID);
                    },
                }
            ],
            sectionID:"",
        };
    }
    componentDidMount(){
        let  _this=this;
        //设置头部
        this.props.navigation.setParams({
         
            _close:()=>{
                NativeModules.system.navTo("BACK")
            },
            _edit:()=>{
                _this.setState({
                    isEdit:true,
                });
            }
        });     

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

        let _this=this;
        
        let vm={ 
            tenantId:_this.props.tenantId,
            pageSize:0
        };
        _this.setState({
            isLoading:true
        })


        AppService.findLegalentity(vm).then(data=>{
            _this.setState({
                isLoading:false
            });
            if (data.errors == null || data.errors.length > 0) {
                xnToast(data.errors[0].message);
                return
            }
            let list=data.result||[];

            for(let i=0; i<list.length;i++){
                if(list[i].legalentityName){
                    list[i].shortName=list[i].legalentityName.substring(0,1);
                }
            };
            _this.setState({
                billingList:list,
            });
        })
    };

    deleteItem=(id)=>{
        console.warn(id);
        let _this=this;
        let vm={
            id:id
        };

        var list=_this.state.billingList;

        AppService.deleteLegalentity(vm).then(data=>{
            if (data.errors == null || data.errors.length > 0) {
                xnToast(data.errors[0].message);
                return
            }
            let list=_this.state.billingList;

            for(let i=0; i<list.length;i++){
                if(list[i].id==id){
                    list.splice(i,1)
                }
            };
            _this.setState({
                billingList:list,
            });
        })

    };


    render() {
        return (
            <View style={styles.body}>
                {!this.state.isLoading&&this.state.billingList.length>0&&
                <ScrollView  style={styles.list}>
                    <View style={xnMainCss.xnRowLayout}>
                     {this.state.billingList.map((v, i) => this.rowContent(v, i))}
                  </View>
                </ScrollView>
                }

                {!this.state.isLoading&&this.state.billingList.length==0&&<View style={styles.empty}>
                    <Text>还没有开票公司呢</Text>
                    <Text>快去添加吧</Text>
                </View>}
                <Modal visible={this.state.isEdit} transparent onRequestClose={()=>{this._onRequestClose()}}>
                    <View style={styles.container}>
                        <View style={styles.containerLayout}>
                            <TouchableOpacity style={[styles.item,]} onPress={()=>{this._add()}}>
                                <View style={styles.itemInfo}><Text style={[styles.itemInfoText,{textAlign:"center",color:"#39f"}]}>新增</Text></View>
                            </TouchableOpacity>
                            <TouchableOpacity style={[styles.item,{marginBottom:10}]} onPress={()=>{this.batch()}}>
                                <View style={styles.itemInfo}><Text style={[styles.itemInfoText,{textAlign:"center",color:"#39f"}]}>批量导入</Text></View>
                            </TouchableOpacity>
                            <TouchableOpacity style={[styles.item]} onPress={()=>{this.cancel()}}>
                                <View style={styles.itemInfo}><Text style={[styles.itemInfoText,{textAlign:"center",color:"#39f"}]}>取消</Text></View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </Modal>
            </View>
        );
    }

    rowContent = (v, i) =>{
        // 声明右侧按钮，更多属性访问 https://github.com/dancormier/react-native-swipeout



        return (

            <Swipeout
                close={this.state.sectionID !=v.id}
                right={this.state.swipeoutBtns}
                onOpen={() => {
                    this.setState({
                        sectionID:v.id
                    });
                }}
                onClose={() => console.log('===close') }
                scroll={event => console.log('scroll event') }
                key={i}
                style={{backgroundColor:"#fff",}}
            >
                <TouchableOpacity style={xnMainCss.xnRow} onPress={()=>{this._view(v)}}>
                    <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>
                    <View style={xnMainCss.xnRowLink}></View>
                </TouchableOpacity>
            </Swipeout>
        )

    };
    _toview=()=>{
        this.props.navigation.navigate("BillingView");
    }
    _view=(item)=>{
        this.props.navigation.navigate("BillingView",{ item: item});
    }

    _onRequestClose=()=>{

    }
    _add=()=>{
        this.setState({
            isEdit:false,
        });
        this.props.navigation.navigate("BillingAdd");
    }
    batch=()=>{
        this.setState({
            isEdit:false,
        });
        this.props.navigation.navigate("BillingBatch");
    }
    cancel=()=>{
        this.setState({
            isEdit:false,
        });
    }

}

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'},
        ],
    },
    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,.3)',
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    },
    containerLayout:{
        flex: 1,
        justifyContent:"flex-end",
        padding:10
    },
    empty:{
        flex: 1,
        justifyContent:"center",
        alignItems:"center",
    }
});