xntalk / xntalk-rnapp

import React, {Component} from 'react';
import {
    View,
    Text,
    TextInput,
    Image,
    ScrollView,
    Modal,
    StyleSheet,
    TouchableOpacity,
} 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;// 表格高度

/**
 * 表格/明细 组件
 */
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;
        this.extendData = JSON.parse(this.attrData.data);
        this.tabType = this.extendData.type;// 固定：list=列表|table=表格
        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() {
        let {name, code, type, description, isRequired, isPreview} = this.attrData;
        // 按钮文本 //  // 显示合计
        let {buttonText, showCount} = this.extendData;

        return(
            <View style={{width: '100%', backgroundColor: 'white', paddingHorizontal: HPading, paddingVertical: VPading}}>
                <View style={{flexDirection: 'row',height:titleViewHeight,backgroundColor:'#fff'}}>
                    {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)))}
                {/** 表格 */}
                <ScrollView
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                >
                    <View>
                        {this.tabType === 'table' && this.renderTableHead()}
                        {this.tabType === 'table' && 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}</Text>
                </TouchableOpacity>
                {/** 创建编辑表格弹窗 */}
                {this.createTableEditModal()}
            </View>
        );
    }

    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>
        );
    }

    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>
        );
    }

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