xntalk / xntalk-rnapp

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

/**
 * Created by tdzl2003 on 12/18/16.
 */
import React, {Component} from "react";
import {Alert, Image, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View} from "react-native";
import {NavigationActions, StackActions} from 'react-navigation'
import AppService from "../service/AppService";
import dismissKeyboard from 'react-native/Libraries/Utilities/dismissKeyboard';
import {xnBorderWidth, xnToast} from "../utils/utils";
import moment from "moment";
import {onResponseError} from "../utils/Common";

let dayTime = moment(new Date()).utc().zone(-8).format('YYYY-MM-DD');

export default class Detail extends Component {
    ajaxLoading = false;
    params = this.props.navigation.state.params;

    constructor(props) {
        super(props);
        this.state = {
            content: "",
            placeholder: "备注",
            status: this.props.navigation.state.params.status || "",
            userList: [],
        };
    }

    static navigationOptions = ({navigation, screenProps}) => ({
        title: "加签",

    });

    componentDidMount() {
        let _this = this;
        //设置头部
        this.props.navigation.setParams({
            isBack: true
        });


    }

    doSave = () => {
        let _this = this;
        if (_this.state.userList.length == 0) {
            xnToast("请先选择人员");
            return;
        }

        let vm = {
            id: _this.params.id, //stepId
            flowId: _this.params.flowId,
            rowVersion: _this.params.rowVersion,
            tenantId: global.tenantId,
            assignUserIds: [],
            assignReason: _this.state.content || ""
        };

        for (let i = 0; i < _this.state.userList.length; i++) {
            vm.assignUserIds.push(_this.state.userList[i].id)

        }
        console.log(vm)
        if (_this.ajaxLoading) {
            return;
        }

        switch (_this.state.status) {
            //前
            case "beforeAdd":

                //前
                _this.ajaxLoading = true;
                AppService.beforeAddFlowStep(vm).then(data => {
                    _this.ajaxLoading = false;
                    if (!onResponseError(data, true)) {
                        xnToast("已提交！");
                        dismissKeyboard();
                        _this.toPage()
                    }

                });

                break;

            case "sideAdd":
                //并
                _this.ajaxLoading = true;
                AppService.addFlowStep(vm).then(data => {
                    _this.ajaxLoading = false;
                    if (!onResponseError(data, true)) {
                        xnToast("已提交！");
                        dismissKeyboard();
                        _this.toPage()
                    }

                });

                break;
            case "afterAdd":

                _this.ajaxLoading = true;
                AppService.afterAddFlowStep(vm).then(data => {
                    _this.ajaxLoading = false;
                    if (!onResponseError(data, true)) {
                        xnToast("已提交！");
                        dismissKeyboard();
                        _this.toPage();
                    }
                });
                break;

        }

    }

    toPage = () => {
        if (!!global.initParam && global.initParam.page) {
            global.initParam.page = undefined
        }
        const resetAction = StackActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({routeName: 'TabNav'})
            ]
        })
        this.props.navigation.dispatch(resetAction)

    }

    render() {
        return (
            <View style={styles.body}>
                <ScrollView style={styles.scrollView}>
                    <View style={styles.rowLayout}>
                        {this.state.status == "beforeAdd" && <View style={styles.row}>
                            <View style={styles.rowContent}>
                                <Text style={styles.rowTitleText}>前加签</Text>
                                <Text style={styles.rowInfoText}>在自己之前再添加一个或几个审批人</Text>
                            </View>
                        </View>
                        }

                        {this.state.status == "sideAdd" && <View style={styles.row}>
                            <View style={styles.rowContent}>
                                <Text style={styles.rowTitleText}>并加签</Text>
                                <Text style={styles.rowInfoText}>同时再添加一个或几个审批人</Text>
                            </View>

                        </View>}
                        {this.state.status == "afterAdd" && <View style={styles.row}>
                            <View style={styles.rowContent}>
                                <Text style={styles.rowTitleText}>后加签</Text>
                                <Text style={styles.rowInfoText}>在自己之后再添加一个或几个审批人</Text>
                            </View>
                            <View style={styles.rowLink}></View>
                        </View>}

                        <View style={styles.addList}>
                            {this.state.userList.map((v, i) => this._renderUser(v, i))}

                            <View style={styles.addItem}>
                                <TouchableOpacity style={styles.addItemLayout} onPress={() => {
                                    this.addUser()
                                }}>
                                    <View style={[styles.addItemImg, styles.addItemImgOp]}><Image
                                        style={{width: 12, height: 12}} source={require('../img/add-icon.png')}
                                        resizeMode="contain"/></View>
                                    <View style={styles.addItemName}><Text
                                        style={[styles.addItemNameText, styles.addItemNameTextOp]}>添加</Text></View>
                                </TouchableOpacity>
                            </View>

                        </View>
                    </View>
                    <View style={styles.input}>
                        <TextInput
                            placeholder={this.state.placeholder}
                            style={styles.inputArea}
                            multiline={true}
                            underlineColorAndroid="transparent"
                            onChangeText={(text) => this.state.content = text}
                        />
                    </View>
                </ScrollView>
                <TouchableOpacity style={[styles.btn, {backgroundColor: global.homeColor,}]} onPress={() => {
                    this.doSave()
                }}><Text style={styles.btnText}>确定</Text></TouchableOpacity>

            </View>
        );
    }

    _renderUser = (v, i) => {
        return (
            <View style={styles.addItem} key={i}>
                <View style={styles.addItemLayout}>
                    <View style={[styles.addItemImg, {backgroundColor: global.homeColor}]}>
                        {!v.avatar && <Text style={styles.addItemImageText}>{v.shortName}</Text>}
                        {v.avatar &&
                        <Image style={styles.addItemImage} source={{uri: v.avatar}} resizeMode="contain"></Image>}
                    </View>
                    <View style={styles.addItemName}><Text style={styles.addItemNameText}>{v.name}</Text></View>
                    <TouchableOpacity style={styles.addItemDelete} onPress={(v) => {
                        this._delete(v, i)
                    }}>
                        <Image style={styles.addItemDeleteIcon} source={require('../img/delete.png')}
                               resizeMode="contain"/>
                    </TouchableOpacity>
                </View>
            </View>
        )
    };

    addUser = () => {
        this.props.navigation.navigate("Employee", {status: "add", callback: this.callback})
    };
    _delete = (v, i) => {
        let _this = this;
        Alert.alert(
            '删除',
            '确定删除?',
            [
                {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                {
                    text: '确定', onPress: () => {
                        let userList = this.state.userList;
                        userList.splice(i, 1);
                        this.setState({
                            userList: userList
                        });
                    }
                },
            ]
        )

    }
    callback = (data) => {
        console.log(data);
        let _this = this;
        let userList = this.state.userList;

        if (data.name.length > 2) {
            data.shortName = data.name.substring(data.name.length - 2)
        } else {
            data.shortName = data.name;
        }
        userList.push(data);
        this.setState({
            userList: userList
        });
    }

}

const styles = StyleSheet.create({
    body: {
        flex: 1,
        flexDirection: "column",
        backgroundColor: "#ecf0f3",
    },
    scrollView: {
        flex: 1,
    },
    input: {
        paddingLeft: 0,
        paddingTop: 15,
        paddingRight: 0,
        marginBottom: 15
    },
    inputArea: {
        fontSize: 14,
        height: 200,
        lineHeight: 24,
        textAlignVertical: "top",
        backgroundColor: "#fff",
        padding: 15
    },

    rowLayout: {
        marginTop: 15,
        backgroundColor: "#fff",
    },
    row: {
        marginLeft: 15,
        paddingTop: 10,
        paddingRight: 10,
        paddingBottom: 10,
        borderBottomWidth: xnBorderWidth(),
        borderBottomColor: "#ddd",
        borderStyle: "solid",
        flexDirection: "row",
        alignItems: "center",
    },
    rowContent: {
        flex: 1,
        justifyContent: "center",
    },
    rowTitleText: {
        fontSize: 16,
        color: "#000"
    },
    rowInfoText: {
        fontSize: 12,
        color: "#666"
    },
    rowLink: {
        width: 10,
        height: 10,
        borderTopWidth: 1,
        borderTopColor: "#c7c7cc",
        borderRightWidth: 1,
        borderRightColor: "#c7c7cc",
        transform: [
            {rotate: '45deg'},
        ],
    },
    addList: {
        flexDirection: "row",
        paddingTop: 10,
        flexWrap: "wrap",
    },
    addItem: {
        width: "20%",
        height: 70,
        marginBottom: 10,
        justifyContent: "center",
        flexDirection: "row",
    },
    addItemLayout: {
        height: 70,
        width: 50,
    },
    addItemImg: {
        height: 50,
        width: 50,
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 3,
        backgroundColor: global.homeColor,
    },
    addItemImageText: {
        color: "#fff",
        fontSize: 10,
    },
    addItemImage: {
        height: 50,
        width: 50,
    },
    addItemName: {
        height: 20,
        width: 50,
        justifyContent: "center",
        flexDirection: "row",
    },
    addItemNameText: {
        fontSize: 12,
        color: "#333333",
        textAlign: "center",
        padding: 3,
    },
    addItemDelete: {
        position: "absolute",
        width: 10,
        height: 10,
        right: -5,
        top: -5,
    },
    addItemDeleteIcon: {
        width: 10,
        height: 10
    },
    addItemImgOp: {
        borderWidth: xnBorderWidth(),
        borderColor: "#999",
        backgroundColor: "transparent",
    },
    addItemNameTextOp: {
        color: "#999",

    },
    btn: {
        height: 50,
        backgroundColor: global.homeColor,
        justifyContent: "center",
        alignItems: "center",
    },
    btnText: {
        color: "#fff",
        fontSize: 18
    }

});