xntalk / xntalk-rnapp

import React, {Component} from "react";
import {ActivityIndicator, Image, StyleSheet, Text, TouchableOpacity, View, WebView, Platform} from "react-native";
import {convertCurrency, xnBorderWidth} from "../utils/utils";
import AppService from "../service/AppService";
import {NoDoublePress, onResponseError} from "../utils/Common";

const BaseScript =
    `
(function () {
    var height = null;
    function changeHeight() {
      if (document.body.scrollHeight != height) {
        height = document.body.scrollHeight;
        if (window.postMessage) {
          window.postMessage(JSON.stringify({
            type: 'setHeight',
            height: height,
          }))
        }
      }
    }
    setInterval(changeHeight, 100);
} ())
`

export default class SectionsContentView extends Component {
    constructor(props) {
        super(props);
        this.flowId = this.props.flowId;
        this.state = {
            data: {},// 查询结果
            loading: true,// 是否正在查询
            isForm: false, // 是否是FORM格式的返回结果(返回结果可能是FORM或者HTML)
            hasSections: false,// 返回结果是否具有sections数组
            webHeight: 80
        };
    }

    componentDidMount() {
        this._query();
    }

    _query = () => {
        let _this = this;
        let vm = {flowId: this.flowId};
        _this.setState({
            loading: true,
        });
        AppService.getFlowDescribe(vm).then(data => {
            _this.setState({
                loading: false,
            });
            console.log(data);
            if (!onResponseError(data, false)) {
                if (!!!data.flowId) {
                    data.flowId = this.flowId
                }
                let isForm = false;
                let hasSections = false;
                if (!!data.resultFormat && data.resultFormat == 'FORM') {
                    isForm = true;
                    if (!!data.result) {
                        try {
                            let dic = JSON.parse(data.result);
                            // 加判sections是否存在，发现有result是一个"{}"的情况
                            if(!!dic.sections){
                                data.sections = dic.sections;
                                hasSections = true;
                            }
                        } catch (e) {
                            console.log('0000000');
                        }
                    }
                }
                _this.setState({
                    data: data,
                    isForm: isForm,
                    hasSections: hasSections
                });
            }
        }).catch((error) => {
            _this.setState({
                loading: false,
            });
            // xnToast(error)
        });
    }

    _renderSections = (v, i) => {
        if (v.type === "FILES") {// 附件
            return (
                <View style={styles.detailRowBox} key={i}>
                    {v.items && v.items.length > 0 &&
                    <View style={styles.detailLableBox}>
                        <Text style={styles.detailLable}>{v.items[0].label}</Text>
                    </View>
                    }
                    <View style={styles.detailList}>
                        {v.items && v.items.map((m, n) => this._renderFiles(m, n))}
                    </View>
                </View>
            )
        } else if (v.type === "PICTURES") {// 图片
            return (
                <View style={styles.detailRowBox} key={i}>
                    {v.items && v.items.length > 0 &&
                    <View style={styles.detailLableBox}>
                        <Text style={styles.detailLable}>{v.items[0].label}</Text>
                    </View>
                    }
                    <View style={styles.detailList}>
                        {v.items && v.items.map((m, n) => this._renderImg(m, n, v.items))}
                    </View>
                </View>
            )
        } else if (v.type === "LINES") {// 容器布局
            return (
                <View>
                    <View style={styles.detailRow} key={i}>
                        <Text style={styles.detailLable}>{v.title || ''}</Text>
                    </View>
                    {
                        v.fields && v.fields.map((m, n) => this._renderSections(m, n))
                    }
                </View>
            )
        } else if (v.type === "USERS") {// 用户
            return (
                <View style={styles.detailRowBox} key={i}>
                    <View style={[styles.detailLableBox, {height: 20}]}>
                        <Text style={styles.detailLable}>{v.items[0].label}</Text>
                    </View>
                    <View style={styles.detailList}>
                        {v.userList && v.userList.map((m, n) => this._renderUser(m, n))}
                    </View>
                </View>
            )
        } else if (v.type === "SCORE") {// 评分
            return (
                <View style={[styles.detailRowBox, {flexDirection: "column",}]} key={i}>
                    {v.items && v.items.map((m, n) => this._renderScore(m, n))}
                </View>
            )
        } else if (v.type === "MONEY") {// 金额
            return (
                <View style={[styles.detailRowBox, {flexDirection: "column",}]} key={i}>
                    {v.items && v.items.map((m, n) => this._renderMoney(m, n))}
                </View>
            )
        } else {
            // 文本
            return (
                <View style={[styles.detailRowBox, {flexDirection: "column",}]} key={i}>
                    {v.items && v.items.map((m, n) => this._renderText(m, n))}
                </View>
            )
        }
    };

    // 图片
    _renderImg = (v, i, items) => {
        return (
            <TouchableOpacity style={styles.detailItem} key={i} onPress={() => {
                // FIXME:浏览图片回调
                // this.toImageBrowser(items, i)
            }}>
                <View style={styles.attachmentsItemBoxImg}>
                    <Image style={styles.attachmentsItemImage}
                           source={{uri: v.url + "?x-oss-process=image/resize,m_lfit,w_100,h_100"}}
                           resizeMode="contain"/>
                </View>
                <View style={styles.attachmentsItemName}><Text style={styles.attachmentsItemNameInfo} numberOfLines={1}
                                                               ellipsizeMode='tail'>{v.title}</Text></View>
            </TouchableOpacity>
        )
    };

    // 附件
    _renderFiles = (v, i) => {
        let type = ""
        if (v.type === "IMAGE") {
            type = "img"
        }

        return (
            <TouchableOpacity style={styles.detailItem} key={i} onPress={() => {
                // FIXME:浏览附件回调
                // this.viewImg(type, v.url, v.name, v.size)
            }}>
                <View style={[styles.attachmentsItemBoxImg]}>
                    {v.type === "FOLDER" &&
                    <Image style={styles.attachmentsItemImage} source={require('../img/other.png')}
                           resizeMode="contain"/>}
                    {v.type === "EXCEL" &&
                    <Image style={styles.attachmentsItemImage} source={require('../img/excle.png')}
                           resizeMode="contain"/>}
                    {v.type === "WORD" &&
                    <Image style={styles.attachmentsItemImage} source={require('../img/word.png')}
                           resizeMode="contain"/>}
                    {v.type === "PPT" &&
                    <Image style={styles.attachmentsItemImage} source={require('../img/ppt.png')}
                           resizeMode="contain"/>}
                    {v.type === "TXT" &&
                    <Image style={styles.attachmentsItemImage} source={require('../img/txt.png')}
                           resizeMode="contain"/>}
                    {v.type === "PDF" &&
                    <Image style={styles.attachmentsItemImage} source={require('../img/pdf.png')}
                           resizeMode="contain"/>}
                    {v.type === "ZIP" &&
                    <Image style={styles.attachmentsItemImage} source={require('../img/rar.png')}
                           resizeMode="contain"/>}
                    {v.type === "OTHER" &&
                    <Image style={styles.attachmentsItemImage} source={require('../img/other.png')}
                           resizeMode="contain"/>}
                    {v.type === "IMAGE" && <Image style={styles.attachmentsItemImage}
                                                  source={{uri: v.url + "?x-oss-process=image/resize,m_lfit,w_100,h_100"}}
                                                  resizeMode="contain"/>}
                </View>
                <View style={styles.attachmentsItemName}><Text style={styles.attachmentsItemNameInfo} numberOfLines={1}
                                                               ellipsizeMode='tail'>{v.name}</Text></View>
            </TouchableOpacity>
        )
    };

    // 用户
    _renderUser = (v, i) => {
        return (
            <View style={styles.detailItem} key={i} onPress={() => {
                <TouchableOpacity activeOpacity={0.8} style={[styles.modelImg, {backgroundColor: global.homeColor}]}
                                  onPress={() => {
                                      // FIXME:查看用户信息回调
                                      // toPersonalPageWithUserId(v.id);
                                  }}>
                    {!v.avatar &&
                    <Text style={styles.modelImgText}>{v.name || ''}</Text>}
                    {v.avatar &&
                    <Image style={styles.modelImgAvatar} source={{uri: v.avatar}}
                           resizeMode="contain"/>}
                </TouchableOpacity>
            }}>
            </View>
        )
    };

    // 评分
    _renderScore = (v, i) => {
        return (
            <View style={styles.detailRow} key={i}>
                <Text style={styles.detailLable}>{v.label || ''}</Text>
                {!!v.score && v.maxValue && <Text style={styles.detailContent}>{v.score}-{v.maxValue}</Text>}
            </View>
        )
    };

    // 金额
    _renderMoney = (v, i) => {
        let showValue = v.value || '';
        if (v.showChinese) {
            showValue = convertCurrency(showValue);
        }
        return (
            <View style={styles.detailRow} key={i}>
                <Text style={styles.detailLable}>{v.label || ''}</Text>
                {!!v.score && v.maxValue && <Text style={styles.detailContent}>{showValue}</Text>}
            </View>
        )
    };

    // 文本
    _renderText = (v, i) => {
        return (
            <View style={styles.detailRow} key={i}>
                <Text style={styles.detailLable}>{v.label || ''}</Text>
                <Text style={styles.detailContent}>{v.text || ''}</Text>
            </View>
        )
    };

    //设置高度
    onMessage(event) {
        console.log(event.nativeEvent.data);
        try {
            const action = JSON.parse(event.nativeEvent.data)
            if (action.type === 'setHeight' && action.height > 0) {
                this.setState({webHeight: action.height})
                // alert(action.height);
            }
        } catch (error) {
            // pass
            // alert('action.height');
        }
    }

    render() {
        // ios因为WebView的实现改造为了WKWebview，存在字体太小的问题，这里判断是ios在最外层指定了字体大小来调整
        let _htmlStr = this.state.data.result;
        if(!!this.state.data.result && !this.state.isForm && Platform.OS === 'ios'){
            _htmlStr = '<div style="font-size:40px"}>'+this.state.data.result+'</div>';
        }

        return (
            <View style={styles.detailLayout}>
                {/*查询中*/}
                {this.state.loading && <View style={{
                    width: '100%',
                    height: 80,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#fff'
                }}>
                    <View style={styles.xnLoadingBd}>
                        <ActivityIndicator style={styles.xnLoadingActivity} size='small' color='#d9d9d9'
                                           animating={true}/>
                        <Text style={styles.xnLoadingBdText}>加载中...</Text>
                    </View>
                </View>}
                {/*查询结果是FORM,且有sections*/}
                {!this.state.loading && !!this.state.data.result && this.state.isForm && this.state.hasSections &&
                this.state.data.sections.map((v, i) => this._renderSections(v, i))}
                {/*查询结果是FORM,且没有sections*/}
                {!this.state.loading && !!this.state.data.result && this.state.isForm && !this.state.hasSections &&
                <View style={{
                    width: '100%', justifyContent: 'center', alignItems: 'center', height: 80,
                    backgroundColor: '#fff'
                }} />
                }
                {/*查询结果是HTML*/}
                {!this.state.loading && !!this.state.data.result && !this.state.isForm &&
                <WebView
                    style={{
                        width: '100%',
                        height: this.state.webHeight
                    }}
                    injectedJavaScript={BaseScript}
                    scalesPageToFit={true}
                    javaScriptEnabled={true}
                    decelerationRate='normal'
                    startInLoadingState={true}
                    source={{html: _htmlStr, baseUrl: ''}}
                    bounces={false}
                    scrollEnabled={false}
                    automaticallyAdjustContentInsets={true}
                    contentInset={{top: 0, left: 0,right:0,bottom:0}}
                    onMessage={this.onMessage.bind(this)}
                />
                }
                {/*查询结果没有data.result*/}
                {!this.state.loading && !!!this.state.data.result &&
                <View style={{
                    width: '100%', justifyContent: 'center', alignItems: 'center', height: 80,
                    backgroundColor: '#fff'
                }}/>
                }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    modelImg: {
        width: 40,
        height: 40,
        marginRight: 10,
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: '#39f',
        borderRadius: 4,
    },
    modelImgText: {
        color: "#fff",
        fontSize: 10
    },
    modelImgAvatar: {
        width: 40,
        height: 40,
        borderRadius: 4,
    },
    detailLayout: {
        marginTop: 10,
        marginLeft: 15,
        marginRight: 15,
    },
    detailRowBox: {
        flexDirection: "row",
    },
    detailRow: {
        flexDirection: "row",
        paddingTop: 5,
        paddingBottom: 5,
    },
    detailLable: {
        flex: 1,
        color: "#666",
        fontSize:14
    },
    detailContent: {
        flex: 2,
        textAlign: "right",
        color: "#333",
        fontSize:14
    },
    detailLableBox: {
        width: 80
    },
    detailList: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "flex-end",
        flexWrap: "wrap"
    },
    detailItem: {
        width: 50,
        height: 70,
        marginBottom: 10,
        marginLeft: 10,
        justifyContent: "center",
    },
    approvedLayout: {
        marginTop: 0,
        marginBottom: 15,
    },
    attachmentsItemBoxImg: {
        height: 50,
        width: 50,
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 3,
        borderColor: "#ddd",
        borderStyle: "solid",
        borderWidth: xnBorderWidth(),
    },
    attachmentsItemImage: {
        height: 49,
        width: 49,
    },
    attachmentsItemName: {
        height: 20,
        width: 50,
        justifyContent: "center",
        flexDirection: "row",
        alignItems: "center",
    },
    attachmentsItemNameInfo: {
        fontSize: 10,
        color: "#333333",
        textAlign: "center",
        paddingLeft: 3,
        paddingRight: 3,
        lineHeight: 15,
        height: 15,
    },
    xnLoadingBd: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    xnLoadingActivity: {
        marginRight: 15,
    },
    xnLoadingBdText: {
        fontSize: 14,
        color: "#000"
    },
});