xntalk / xntalk-rnapp

import React, {Component} from 'react';
import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
    Image,
    ScrollView,
    Modal,
    StyleSheet,
    DeviceEventEmitter
} from 'react-native';
import {SwipeRow} from "react-native-swipe-list-view";
import {getFooterBottom} from "../utils/utils";
import AppService from "../service/AppService";
import {width} from "../utils/getSize";
import ModalShowToastView from "../widget/ModalShowToastView";
import Toast from "../widget/toast/Toast";
import {NoDoublePress} from "../utils/Common";
import SelectColorView from "./SelectColorView";

const checkedImg = require("../img/selectActive.png");
const unCheckedImg = require("../img/select.png");

const defaultColor = '#FF8D1A';// 新增默认颜色

/**
 * 标签
 */
export default class TagItemView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isAddTag:false,// 新增
            isEditTag:false,// 编辑标签
            isSelectColor:false,// 选择颜色
            showModal:false,// 显示标签选择和编辑弹窗
            tagDataList:[],// 标签列表
        };
        this.attrData = this.props.attrData;
        this.swipeRowIndex = '';// 侧滑下标
        this.editTagData = null;// 编辑标签数据
        this.editName = '';
        this.editColor = '';
        this.rowVersion = "-1";
        this.originalColor = '';
        this.flowTagList = this.props.flowTagList||[];// 流程标签列表
        this.isUpdateTag = false;// 更新标签，在刷新流程标签时，不关闭标签选择弹窗
    }

    showModal() {
        this.setState({
            showModal: true,
        });
        this.findTag();
    }

    refreshTag(tagList) {
        this.flowTagList = tagList;
        this.setState({})
    }

    /**
     * 新建标签
     * @param tagData
     */
    createTag(tagData) {
        const params = {
            name: tagData.name,
            color: tagData.color,
        };
        AppService.createTag(params).then(data => {
            if (data.message) {
                return;
            }
            if (data.errors && data.errors.length > 0) {
                return;
            }
            //tagData.id = data.id;
            this.findTag();
            // 新增的标签添加到列表
            //let tempDataList = this.state.tagDataList||[];
            //tempDataList.push(tagData);
            this.setState({
                //tagDataList: tempDataList,
                isAddTag: false
            });
            this.editName = '';
            this.editColor = '';
            this.showToast('创建成功')
        }).catch(error => {
            this.showToast('创建失败')
        })
    }

    /**
     * 更新标签
     * @param tagData
     */
    updateTag(tagData) {
        const params = {
            id: tagData.id,
            name: tagData.name,
            color: tagData.color,
            rowVersion: tagData.rowVersion,
        };
        AppService.updateTag(params).then(data => {
            if (data.message) {
                return;
            }
            if (data.errors && data.errors.length > 0) {
                return;
            }
            //this.editTagData.name = tagData.name;
            //this.editTagData.color = tagData.color;
            this.findTag();
            // 刷新状态
            this.setState({
                isEditTag: false
            });
            this.editName = '';
            this.editColor = '';
            this.editTagData = null;
            this.showToast('更新成功')
            // 更新流程标签
            if (this.flowTagList && this.flowTagList.length > 0) {
                let length = this.flowTagList.length;
                for (let i=0;i<length;i++) {
                    let flowTagData = this.flowTagList[i];
                    if (flowTagData.tagId === tagData.id || flowTagData.id === tagData.id) {
                        // 流程标签有变化
                        this.isUpdateTag = true;
                        this.doSaveFlowTag();
                        break;
                    }
                }
            }
        }).catch(error => {
            this.showToast('更新失败')
        })
    }

    findTag() {
        const params = {
            pageSize:10,
            pageNum:0,
        };
        AppService.findTag(params).then(data => {
            if (data.message) {
                return;
            }
            if (data.errors && data.errors.length > 0) {
                return;
            }
            let _tempDataList = data.result||[];
            if (!!this.flowTagList && this.flowTagList.length > 0) {
                _tempDataList.map(value => {
                    this.flowTagList.map(data=>{
                        if (data.tagId === value.id) {
                            value.checked = true;
                        }
                    })
                })
            }
            this.setState({
                tagDataList:_tempDataList,
            });
        }).catch(error => {
        })
    }

    deleteTag(tagData, index) {
        const params = {
            id: tagData.id,
        };
        AppService.deleteTag(params).then(data => {
            if (data.message) {
                return;
            }
            if (data.errors && data.errors.length > 0) {
                return;
            }
            this.findTag();
            // let tempList = this.state.tagDataList;
            // tempList.splice(index, 1);
            // this.setState({
            //     tagDataList: tempList
            // });
            this.showToast('删除成功')
        }).catch(error => {
            this.showToast('删除失败')
        })
    }

    /**
     * 保存流程标签
     * @param flowId
     * @param tagIds
     */
    saveFlowTag(flowId,tagIds){
        const params = {
            flowId: flowId,
            tagIds: tagIds
        };
        AppService.saveFlowTag(params).then(data => {
            // TODO:成功后关闭，同时要刷新后面的界面
            if (data.message) {
                return;
            }
            if (data.errors && data.errors.length > 0) {
                return;
            }
            // 刷新流程标签
            //this.flowTagList = selectTagList;
            this.setState({
            });
            // TODO 编辑更新标签，保存流程标签操作，不关闭
            // 刷新流程详情
            DeviceEventEmitter.emit('refreshFlowDetails');
            if (!this.isUpdateTag) {
                this.closeModal();
            }
            this.isUpdateTag = false;
        }).catch(error => {
            this.showToast(error)
        })
    }

    doSaveFlowTag() {
        let tagIds = [];
        //let selectTagList = [];
        this.state.tagDataList.map(value => {
            if (value.checked) {
                tagIds.push(value.id);
                //selectTagList.push(value);
            }
        });
        // 空的话可以看做是去掉了这个流程的标签设定
        this.saveFlowTag(this.props.flowId, tagIds);
    }

    /**
     * 模态框取消操作
     */
    closeModal() {
        this.setState({
            showModal: false,
            isAddTag: false,
            isEditTag: false,
            isSelectColor:false
        });
        this.editTagData = null;
        this.editColor = '';
    }

    /**
     * 打开颜色选择器
     */
    openSelectColor(editColor) {
        this.setState({
            isSelectColor: true
        });
        if (this.refs.openSelectColor) {
            //this.refs['selectColor'].showSelectColorModal(selectColor);
            this.refs.openSelectColor.resetInitColor(editColor);
        }
    }

    /**
     * 标签item渲染
     */
    renderTagItem(value, index) {
        return (
            <SwipeRow
                key={"SwipeRow"+index}
                ref={'SwipeRow'+index}
                leftOpenValue={138}
                rightOpenValue={-138}
                stopRightSwipe={-138}
                disableRightSwipe={true}   //禁止向右滑动
                onRowOpen={(rowData, rowMap) =>{
                    // 打开侧滑
                    if (this.swipeRowIndex !== 'SwipeRow'+index && this.swipeRowIndex !== '') {
                        this.refs[this.swipeRowIndex].closeRow();
                    }
                    this.swipeRowIndex = 'SwipeRow'+index;
                }}
            >
                <View style={{width: 138, height: 48, alignItems: 'center', flexDirection: 'row', position: 'absolute', right: 0}}>
                    <TouchableOpacity
                        style={{width: 69, height: 48, backgroundColor: 'rgba(255, 141, 26, 1)', justifyContent: 'center', alignItems: 'center'}}
                        activeOpacity={0.8}
                        onPress={() => {
                            this.setState({
                                isEditTag: true
                            });
                            this.editTagData = value;
                            this.editColor = value.color;
                            this.editName = value.name;
                            this.originalColor = value.color;
                            this.rowVersion = value.rowVersion;
                        }}
                    >
                        <Text style={{fontSize: 14, color: 'rgba(255, 255, 255, 1)'}} allowFontScaling={false}>编辑</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={{width: 69, height: 48, backgroundColor: 'rgba(212, 48, 48, 1)', justifyContent: 'center', alignItems: 'center'}}
                        activeOpacity={0.8}
                        onPress={() => {
                            // 删除一项
                            this.deleteTag(value, index);
                            if (!!this.swipeRowIndex && this.swipeRowIndex !== '') {
                                this.refs[this.swipeRowIndex].closeRow();
                            }
                            this.swipeRowIndex = '';
                        }}
                    >
                        <Text style={{fontSize: 14, color: 'rgba(255, 255, 255, 1)'}} allowFontScaling={false}>删除</Text>
                    </TouchableOpacity>
                </View>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=>{
                        value.checked = !value.checked;
                        this.setState({
                            updateCheck: false
                        });
                        if (!!this.swipeRowIndex && this.swipeRowIndex !== '') {
                            this.refs[this.swipeRowIndex].closeRow();
                        }
                    }}
                >
                    <View style={{height: 48, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, backgroundColor: 'white'}}>
                        <View style={{backgroundColor: value.color, width: 24, height: 24, borderRadius: 4}}/>
                        <Text style={{flex: 1, fontSize: 14, color: 'rgba(0, 0, 0 , 1)', marginLeft: 10}}>{value.name}</Text>
                        <Image style={{width: 20,height: 20}} source={value.checked ? checkedImg : unCheckedImg} resizeMode={'contain'}/>
                    </View>
                </TouchableOpacity>
            </SwipeRow>
        );
    }

    render() {
        let {name, labelName, labelColor} = this.attrData;

        return (
            <View>
                <TouchableOpacity
                    style={{width: '100%', height: 46, backgroundColor: 'white', flexDirection: 'row', paddingHorizontal: 15, alignItems: 'center'}}
                    activeOpacity={0.8}
                    onPress={()=> {
                        this.showModal();
                    }}
                >
                    <Text style={{fontSize: 14, color: 'rgba(80, 80, 80, 1)'}}>{name|| '标签'}</Text>
                    <View style={{flex: 1, justifyContent: 'flex-end', alignItems: 'center', flexDirection: 'row', marginLeft: 20}}>
                        {!!this.flowTagList && this.flowTagList.length > 0 &&
                        <View style={{flexDirection: 'row', justifyContent: 'flex-end', flexWrap: 'wrap', alignItems: 'flex-start', flex: 1}}>
                            {this.flowTagList.map(((value, index) => {
                                return(
                                    <View key={index} style={{marginRight:4,height:20,backgroundColor: value.tagColor||defaultColor,
                                        justifyContent:'center',alignItems:'center',borderRadius: 4}}>
                                        <Text style={{fontSize: 14, color: 'white', marginVertical: 4,
                                            marginHorizontal: 4}}>{value.tagName||value.name||""}</Text>
                                    </View>
                                )
                            }))}
                        </View>
                        }
                        {(!!!this.flowTagList || this.flowTagList.length === 0) &&
                            <Text style={{fontSize: 14, color: 'rgba(166, 166, 166, 1)'}}>添加标签</Text>
                        }
                        <Image style={{width: 16, height: 16, marginRight: 10}} source={require('../img/bread.png')} resizeMode={'contain'}/>
                    </View>
                </TouchableOpacity>

                <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()}/>
                        {/** 实体内容 */}
                        {!this.state.isSelectColor &&
                        <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}>添加标签</Text>
                                {!this.state.isAddTag && !this.state.isEditTag &&
                                    <TouchableOpacity
                                        style={{
                                            justifyContent: "center",
                                            alignItems: "center",
                                            paddingVertical: 3,
                                            paddingHorizontal: 8,
                                        }}
                                        activeOpacity={0.8}
                                        onPress={() => {
                                            //this.props.navigation.navigate("CreateTagView");
                                            //this.closeModal();
                                            // 新增标签
                                            this.setState({
                                                isAddTag: true
                                            });
                                            this.editName = '';
                                            this.editColor = defaultColor;
                                        }}
                                    >
                                        <Text style={{fontSize: 16, color: global.homeColor}}>+新增</Text>
                                    </TouchableOpacity>
                                }
                            </View>
                            <View style={{width: '100%', height: 1, backgroundColor: 'rgba(245,245,245,1)'}}/>
                            {/** 内容 */}
                            {(!this.state.isAddTag && !this.state.isEditTag) && !!this.state.tagDataList && this.state.tagDataList.length > 0 &&
                                <View style={{flex: 1}}>
                                    <ScrollView style={{flex: 1}} horizontal={false} showsVerticalScrollIndicator={false}>
                                        {this.state.tagDataList && this.state.tagDataList.map((value, index) => this.renderTagItem(value, index))}
                                    </ScrollView>
                                    <TouchableOpacity
                                        style={{
                                            width: '100%',
                                            backgroundColor: global.homeColor,
                                            justifyContent: 'center',
                                            alignItems: 'center',
                                            position: 'absolute',
                                            bottom: 0,
                                            height: 46+getFooterBottom(),
                                            paddingBottom: getFooterBottom()
                                        }}
                                        activeOpacity={0.8}
                                        onPress={()=>{
                                            // 保存流程标签
                                            NoDoublePress.onPress(()=>{
                                                this.doSaveFlowTag();
                                            })
                                        }}
                                    >
                                        <Text style={{fontSize: 16, color: 'rgba(242, 244, 245, 1)'}}>确定</Text>
                                    </TouchableOpacity>
                                </View>
                            }
                            {(!this.state.isAddTag && !this.state.isEditTag) && (!!!this.state.tagDataList || this.state.tagDataList.length === 0) &&
                                <View style={{flex: 1, alignItems: 'center'}}>
                                    <Image style={{marginTop: 106, width: 124, height: 116}} source={require('../img/img_empty_tag.png')} resizeMode={'contain'}/>
                                    <Text style={{fontSize: 14, color: 'rgba(128, 128, 128, 1)', marginTop: 10}}>暂无标签</Text>
                                </View>
                            }
                            {/** 新增 */}
                            {(this.state.isAddTag || this.state.isEditTag) &&
                                <View style={{width: '100%'}}>
                                    <View style={{borderRadius: 4, borderWidth: 1, borderColor: 'rgba(229, 229, 229, 1)', alignItems: 'center', flexDirection: 'row', margin: 15}}>
                                        <TouchableOpacity
                                            style={{marginLeft: 5, }}
                                            activeOpacity={1}
                                            // 选择标签颜色
                                            onPress={()=> {
                                                this.openSelectColor(this.editColor)
                                            }}
                                        >
                                            <View style={{backgroundColor: this.editColor, width: 24, height: 24, borderRadius: 4}}/>
                                        </TouchableOpacity>
                                        <TextInput
                                            style={{
                                                flex: 1,
                                                fontSize: 16,
                                                color: 'rgba(0, 0, 0, 1)',
                                                backgroundColor: 'white',
                                                textAlign: 'left',
                                                marginLeft: 15,
                                                paddingVertical: 6,
                                                paddingHorizontal: 0
                                            }}
                                            maxLength={10}
                                            onChangeText={text => {
                                                if (this.onChangeText) {
                                                    this.onChangeText(text)
                                                }
                                                this.editName = text;
                                            }}
                                            //value={this.editName}
                                            defaultValue={this.editName}
                                            placeholderTextColor={'#999'}
                                            placeholder={'请输入'}
                                            underlineColorAndroid="transparent"
                                        />
                                    </View>
                                </View>
                            }
                            {(this.state.isAddTag || this.state.isEditTag) &&
                                <View style={{width: '100%', backgroundColor:'rgba(240, 242, 245, 1)', position: 'absolute', bottom: 0, flexDirection: 'row',
                                    height: 46+getFooterBottom(), paddingBottom: getFooterBottom(), alignItems: 'center'}}>
                                    <TouchableOpacity
                                        style={{paddingVertical: 8, paddingHorizontal: 15}}
                                        activeOpacity={0.8}
                                        onPress={()=>{
                                            if (this.state.isEditTag) {
                                                this.editTagData.color = this.originalColor;
                                            }
                                            this.editColor = '';
                                            this.editName = '';
                                            this.setState({
                                                isAddTag: false,
                                                isEditTag: false
                                            })
                                        }}
                                    >
                                        <Text style={{fontSize: 16, color: 'rgba(80, 80, 80, 1)'}}>取消</Text>
                                    </TouchableOpacity>
                                    <View style={{flex: 1}}/>
                                    <TouchableOpacity
                                        style={{paddingVertical: 8, paddingHorizontal: 12}}
                                        activeOpacity={0.8}
                                        onPress={()=>{
                                            if ((this.state.isAddTag && this.editName.length === 0) ||
                                                (!!this.editTagData && this.editTagData.name.length === 0 && this.editName.length === 0)) {
                                                //xnToast('标签名称不能为空')
                                                this.showToast('标签名称不能为空')
                                            } else {
                                                if (this.state.isAddTag) {
                                                    // 新增标签
                                                    let tagData = {name: this.editName, color: this.editColor, checked: false};
                                                    this.createTag(tagData);
                                                } else if (this.state.isEditTag) {
                                                    // 编辑
                                                    let tagData = {id: this.editTagData.id, name: this.editName, color: this.editColor, rowVersion:this.rowVersion};
                                                    this.updateTag(tagData)
                                                }
                                            }
                                        }}
                                    >
                                        <Text style={{fontSize: 16, color: 'rgba(80, 80, 80, 1)'}}>确认</Text>
                                    </TouchableOpacity>
                                </View>
                            }
                        </View>}
                        <SelectColorView
                            ref={'openSelectColor'}
                            onEnter={color => {
                                this.editColor = color;
                                this.setState({
                                    isSelectColor:false
                                })
                            }}
                            onCancel={()=>{
                                this.setState({
                                    isSelectColor:false
                                })
                            }}
                        />
                        <ModalShowToastView toastInstance={this.getToastInstance}/>
                    </View>
                </Modal>
            </View>
        );
    }

    getToastInstance = (toastInstance) => {
        this.toastInstance = toastInstance;
    }

    showToast(msg) {
        const toastOpt2 = {
            data: msg,
            textColor: '#ffffff',
            backgroundColor: '#000',
            position: Toast.position.CENTER,
            //icon: <Image source={require('../data/img/success.png')} style={{width: 32,height: 32,resizeMode: 'contain'}}/>
        }
        this.toastInstance(toastOpt2)
    }
}

const styles = StyleSheet.create({
    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: 16,
        borderTopRightRadius: 16,
    },
    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"
    },
    checkedBox: {
        width: 20,
        height: 20,
        marginLeft: 8,
        marginRight: 8
    },
});