xntalk / xntalk-rnapp

import React, {Component} from 'react';
import {Image, Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View,} from 'react-native';
import {isJSONString, xnBorderWidth} from "../utils/utils";
import SelectItemView from "./SelectItemView";
import TextSingleEditView from "./TextSingleEditView";
import TextMultiEditView from "./TextMultiEditView";
import PhoneEditView from "./PhoneEditView";
import SliderView from "./SliderView";
import PickerView from "./PickerView";
import FiveStarView from "./FiveStarView";
import NumberEditView from "./NumberEditView";
import CalculatorView from "./CalculatorView";
import LabelLinkView from "./LabelLinkView";
import ContainerView from "./ContainerView";
import CheckboxView from "./CheckboxView";
import BooleanCheckView from "./BooleanCheckView";
import CascadeView from "./CascadeView";
import LocationTextView from "./LocationTextView";

// 标题默认高度
const titleViewHeight = (26);
// 默认横向内边距
const HPading = (16);
// 默认纵向内边距
const VPading = (6);
// 表格宽度
const TabItemWidth = 90;
// 表格高度
const TabItemHeight = 40;

/**
 * 表格/明细 组件 (type: 'TABLE')
 */
export default class TabDetailView extends Component {
    // 构造方法
    constructor(props) {
        super(props);
        this.state = {
            tableHead: [],// 表头
            tableData: [],// 表格内容数据
            rowList: [],// 行数
            editRowsData: [],// 编辑行数据
            showModal: false,// 是否以模态展示
            editLineNumber: 0,// 编辑行数
        };
        // 传入参数
        this.attrData = this.props.attrData;
        // json解析后的传入参数
        this.extendData = (this.attrData.data && this.attrData.data.length > 0) ? JSON.parse(this.attrData.data) : {};
        // 固定：list=列表|table=表格
        this.tabType = this.extendData.type;
        // 过滤掉对展示表格无用的数据
        this.pureTabData = [];
    }

    // 生命周期-组件将要展示
    componentWillMount() {
        // 过滤取得表头，表格内容数据
        let headTabData = this.extendData.tabDataList[0];
        let _tableHead = this.state.tableHead;
        headTabData.map(item => {
            _tableHead.push(item);
            let tabData = {
                name: item.name, code: item.code, type: item.type, description: item.description||'',
                isRequired: item.isRequired, isPreview: item.isPreview, data: item.data, value: ''
            };
            this.pureTabData.push(tabData);
        });
        this.setState({
            tableHead: _tableHead,
            rowList: this.extendData.tabDataList
        });
    }

    render() {
        /*
        name:标题
        code:代码编号
        type:控件类型('TABLE')
        description:描述
        isRequired:是否必须
        isPreview:是否预览
        */
        let {name, code, type, description, isRequired, isPreview} = this.attrData;
        // 按钮文本 //  // 显示合计
        let {buttonText, showCount} = this.extendData;

        return (
            // 最外层的样式区域
            <View style={{
                width: '100%',
                backgroundColor: 'white',
                paddingLeft: 10,
                paddingRight: 15,
                paddingVertical: VPading
            }}>
                {/*标题显示区域*/}
                <View style={{
                    flexDirection: 'row',
                    height: titleViewHeight,
                    justifyContent: 'flex-start',
                    alignItems: 'center',
                    backgroundColor: '#fff'
                }}>
                    {/*是否必须UI设定*/}
                    {isRequired && <Text style={{color: "#FF3030"}}>* </Text>}
                    {!isRequired && <Text style={{color: "#fff"}}>* </Text>}
                    {/*标题设定*/}
                    <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)', marginBottom: 5}}>{name || ''}</Text>
                </View>
                {/** 列表 */}
                {this.tabType === 'list' && this.state.rowList && this.state.rowList.length > 0 &&
                this.state.rowList.map((item) => item.map((data, index) => this.renderComponentsItem(data, index)))}
                {/** 表格 */}
                {this.tabType === 'table' &&
                <ScrollView
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                >
                    <View>
                        {this.renderTableHead()}
                        {this.renderTableRow()}
                    </View>
                </ScrollView>
                }

                {/** TODO 显示合计 */}
                {showCount && <View style={{
                    width: '100%', height: 44, alignItems: 'center', borderBottomWidth: xnBorderWidth(),
                    borderBottomColor: '#ddd', flexDirection: 'row'
                }}
                >
                    <Text style={{marginLeft: 10, fontSize: 16, color: 'black'}}>合计</Text>
                </View>}
                <TouchableOpacity
                    style={{width: '100%', height: 44, alignItems: 'center', justifyContent: 'center'}}
                    activeOpacity={0.8}
                    onPress={() => {
                        let tempList = this.state.rowList;
                        let rowList = [];
                        this.pureTabData.map(item => {
                            let itemData = {
                                name: item.name, code: item.code, type: item.type, description: item.description,
                                isRequired: item.isRequired, isPreview: item.isPreview, data: item.data, value: ''
                            };
                            rowList.push(itemData);
                        });
                        tempList.push(rowList);
                        this.setState({
                            rowList: tempList
                        })
                    }}
                >
                    <Text style={{fontSize: 16, color: global.homeColor}}>{buttonText?`+ ${buttonText}`:'+ 添加'}</Text>
                </TouchableOpacity>
                {/** 创建编辑表格弹窗 */}
                {this.createTableEditModal()}
            </View>
        );
    }

    // 表格头部UI绘制
    renderTableHead() {
        return (
            <View style={{
                height: TabItemHeight,
                backgroundColor: 'rgb(220,220,220)',
                flexDirection: 'row',
                alignItems: 'center'
            }}>
                <Text style={{width: TabItemHeight, height: TabItemHeight}}>{''}</Text>
                {this.state.tableHead && this.state.tableHead.map(((data, index) => this.renderTableHeadItem(data, index)))}
            </View>
        )
    }

    /**
     * 表格头部
     * @param data
     * @param index
     */
    renderTableHeadItem(data, index) {
        return (
            <View key={index}
                  style={{width: TabItemWidth, height: TabItemHeight, flexDirection: 'row', alignItems: 'center'}}>
                <View style={{width: 1, height: 20, backgroundColor: 'rgba(0,0,0,0.4)'}}/>
                <Text style={{marginLeft: 5, marginRight: 10, fontSize: 14, fontWeight: 'bold', color: 'black'}}
                      numberOfLines={1} ellipsizeMode={'tail'}>{data.name}</Text>
            </View>
        )
    }

    /**
     * 表格行
     */
    renderTableRow() {
        return (
            <View style={{backgroundColor: 'white', flexDirection: 'column'}}>
                {this.state.rowList.map((rowData, index) => {
                    return this.renderTableRowItem(rowData, index)
                })}
            </View>
        );
    }

    // 表格行UI绘制
    renderTableRowItem(rowData, index) {
        return (
            <TouchableOpacity
                key={index}
                style={{
                    height: TabItemHeight,
                    flex: 1,
                    flexDirection: 'row',
                    borderBottomWidth: xnBorderWidth(),
                    borderBottomColor: 'rgb(215,215,215)'
                }}
                activeOpacity={0.8}
                onPress={() => {
                    // 编辑行
                    this.setState({
                        editRowsData: rowData,
                        showModal: true,
                        editLineNumber: index
                    })
                }}
            >
                {/** 行号 */}
                <View style={{
                    width: TabItemHeight,
                    height: TabItemHeight,
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: "rgb(245,245,245)"
                }}>
                    <Text style={{fontSize: 14, color: 'black'}}>{(index + 1) + ""}</Text>
                </View>
                {/*表格行内容*/}
                {rowData && rowData.length > 0 && rowData.map((item, index) => this.renderRowItem(item, index))}
            </TouchableOpacity>
        );
    }

    // 表格行UI绘制
    renderRowItem(item, index) {
        return (
            <View key={index}
                  style={{width: TabItemWidth, height: TabItemHeight, flexDirection: 'row', alignItems: 'center'}}>
                <View style={{width: 1, height: 20, backgroundColor: 'rgb(215,215,215)'}}/>
                <Text style={{marginLeft: 5, marginRight: 10, fontSize: 14, fontWeight: 'bold', color: 'black'}}
                      numberOfLines={1}
                      ellipsizeMode={'tail'}>{this.parseRowItemValue(item)}</Text>
            </View>
        )
    }

    /**
     * 解析行每项value显示
     * @param item
     * @returns {string|*}
     */
    parseRowItemValue(item) {
        if (isJSONString(item.value)) {
            let data = JSON.parse(item.value);
            switch (item.type) {
                case "CITY":
                    return data.province + data.city + data.area;
                case "POSITION":
                    return data.organizationName + "-" + data.jobName + "-" + data.employeeName;
                case "LOCATION":
                case "OPERATING_UNIT":
                case "ORGANIZATION":
                    return data.name;
                case "CASCADE":// 级联选择
                    let showText = "";
                    let selected = data.selected;
                    showText = selected.title;
                    let _children = selected.children;
                    while (!!_children) {
                        showText = showText + "," + _children.title;
                        _children = _children.children;
                    }
                    return showText;
                case "CHECKBOX":// 多选框
                    // 多选框
                    let count = 0;
                    let checkText = '';
                    data.map(name => {
                        if (count === 0) {
                            checkText = name;
                        } else {
                            checkText = checkText + "," + name
                        }
                    });
                    return checkText;
                case "CALCULATOR":// 计算公式
                    return data.result;
                case "PERIOD":// 日期区间
                    return data.beginDate + "至" + data.endDate + "  共" + data.duration + "天";
            }
        }
        if (item.type === "BOOLEAN") {
            if (item.value || item.value === 'true') {
                return '是';
            } else {
                return '否';
            }
        }
        return item.value || "";
    }

    /**
     * 显示编辑弹窗
     */
    showModal() {
        this.setState({
            showModal: false,
        });
    }

    /**
     * 模态框取消操作
     */
    closeModal() {
        this.setState({
            showModal: false,
        });
    }

    // 模态窗口模式
    createTableEditModal(name) {
        return (
            <Modal animationType={"fade"} transparent={true} visible={this.state.showModal}
                   onRequestClose={() => this.closeModal()}>
                {/** 目录弹窗 */}
                <View style={{flex: 1}}>
                    <TouchableOpacity style={styles.modalBg} activeOpacity={1} onPress={() => this.closeModal()}/>
                    {/** 实体内容 */}
                    <View style={styles.contentBg}>
                        {/** 标题栏 */}
                        <View style={styles.titleBar}>
                            <TouchableOpacity
                                style={{paddingLeft: 15, paddingRight: 5}}
                                activeOpacity={0.8}
                                onPress={() => this.closeModal()}
                            >
                                <Image style={{width: 14, height: 14}}
                                       source={require('../img/loadBack.png')}/>
                            </TouchableOpacity>
                            <Text style={styles.modelTitle}>{name}</Text>
                        </View>
                        <View style={{
                            width: '100%',
                            height: 36,
                            justifyContent: 'center',
                            backgroundColor: 'rgba(245,245,245,1)'
                        }}>
                            <Text style={{
                                fontSize: 14,
                                color: 'black',
                                marginLeft: 16
                            }}>当前编辑的是第{(this.state.editLineNumber + 1) + '行'}</Text>
                        </View>
                        {/** 内容 */}
                        <ScrollView style={{flex: 1}} horizontal={false} showsVerticalScrollIndicator={false}>
                            {this.state.editRowsData && this.state.editRowsData.map((value, index) => this.renderComponentsItem(value, index))}
                        </ScrollView>
                    </View>
                </View>
            </Modal>
        )
    }

    /**
     * 组件
     * @param item
     * @param index
     */
    renderComponentsItem(item, index) {
        switch (item.type) {
            case 'OPERATING_UNIT':// 经营单元
                return (
                    <SelectItemView
                        key={index}
                        attrData={item}
                        navigation={this.props.navigation}
                    />
                )
                break;
            case 'TEXT': // 单行输入框
                return (
                    <TextSingleEditView
                        key={index}
                        attrData={item}
                    />
                )
                break;
            case 'LONG_TEXT':// 多行输入框
                return (
                    <TextMultiEditView
                        key={index}
                        attrData={item}
                    />
                )
                break;
            case 'PHONE':// 电话输入
                return (
                    <PhoneEditView
                        key={index}
                        attrData={item}
                    />
                )
                break;
            case 'SLIDE':// 滑块
                return (
                    <SliderView
                        key={index}
                        attrData={item}
                    />
                )
                break;
            case 'DATE':// 日期
                return (
                    <PickerView
                        key={index}
                        attrData={item}
                    />
                )
                break;
            case 'PERIOD':// 日期区间
                return (
                    <PickerView
                        key={index}
                        attrData={item}
                    />
                )
                break;
            case 'CITY':// 省市区
                return (
                    <PickerView
                        key={index}
                        attrData={item}
                    />
                )
                break
            case 'SCORE':// 评分
                return (
                    <FiveStarView
                        key={index}
                        attrData={item}
                    />
                )
                break;
            case 'MONEY':// 金额
                return (
                    <NumberEditView
                        key={index}
                        attrData={item}
                        onChangeText={this.onChangeCalcs}
                    />
                )
                break;
            case 'NUMBER':// 数字输入框
                return (
                    <NumberEditView
                        key={index}
                        attrData={item}
                        onChangeText={this.onChangeCalcs}
                    />
                )
                break;
            case 'IDCARD':// 身份证
                return (
                    <NumberEditView
                        key={index}
                        attrData={item}
                        inputType={'default'}
                    />
                )
                break;
            case 'CALCULATOR':// 计算公式
                return (
                    <CalculatorView
                        key={index}
                        ref={'calculate'}
                        attrData={item}
                    />
                )
                break;
            case 'TABLE':// 表格
                return (
                    <TabDetailView
                        key={index}
                        attrData={item}
                    />
                )
                break;
            case 'LABEL':// 提示标签
                return (
                    <LabelLinkView
                        key={index}
                        attrData={item}
                        navigation={this.props.navigation}
                    />
                )
                break;
            case 'CONTAINER':// 布局容器
                return (
                    <ContainerView
                        key={index}
                        attrData={item}
                    />
                )
                break;
            case 'SELECT':// 单选框
                return (
                    <CheckboxView
                        key={index}
                        attrData={item}
                        onChangeText={(text) => {
                            item.value = text;
                        }}
                    />
                )
                break;
            case "CHECKBOX":// 多选框
                return (
                    <CheckboxView
                        key={index}
                        attrData={item}
                    />
                )
                break;
            case 'BOOLEAN':// 是否
                return (
                    <BooleanCheckView
                        key={index}
                        attrData={item}
                    />
                )
                break;
            case 'ORGANIZATION':// 部门
                return (
                    <SelectItemView
                        key={index}
                        attrData={item}
                        navigation={this.props.navigation}
                    />
                )
                break;
            case 'CASCADE':// 级联
                return (
                    <CascadeView
                        key={index}
                        attrData={item}
                    />
                )
                break;
            case 'POSITION':// 岗位
                return (
                    <SelectItemView
                        key={index}
                        attrData={item}
                        navigation={this.props.navigation}
                    />
                )
                break;
            case 'LOCATION':// 获取定位
                return (
                    <LocationTextView
                        key={index}
                        attrData={item}
                        onStartLocation={() => {
                            this.setState({
                                startLoading: true
                            })
                        }}
                        onCompleteLocation={() => {
                            this.setState({
                                startLoading: false
                            })
                        }}
                    />
                )
                break
        }
    }

    onChangeCalcs = (amount, type) => {
        if (this.refs.calculate) {
            this.refs.calculate.calculateValue(amount, type)
        }
    }
}

const styles = StyleSheet.create({
    head: {
        height: 40,
        backgroundColor: '#f1f8ff'
    },
    text: {
        margin: 6,
        fontSize: 14,
        color: 'black'
    },
    modalBg: {
        backgroundColor: 'rgba(0,0,0,.5)',
        width: '100%',
        height: '100%',
        display: 'flex',
        position: 'absolute'
    },
    contentBg: {
        width: '100%',
        flex: 1,
        marginTop: 122,
        backgroundColor: "rgba(255, 255, 255, 1)",
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8
    },
    titleBar: {
        flexDirection: "row",
        justifyContent: "flex-start",
        alignItems: "center",
        marginTop: 15,
        marginBottom: 10,
        marginRight: 15
    },
    modelTitle: {
        flex: 1,
        color: "rgba(0, 0, 0, 1)",
        fontSize: 16,
        textAlign: "center",
        justifyContent: "center"
    },
});