xntalk / xntalk-rnapp

import React from 'react'
import {
	View,
	Text,
	Image,
	StyleSheet,
	TouchableOpacity,
	TouchableWithoutFeedback,
	TextInput,
	ScrollView, Alert,
} from 'react-native'
import {observer} from 'mobx-react/native'
import BackButton ,{AndroidView}from '../components/BackButton'
import {line} from "./Write";
// import {WorkerItem} from "./AddWorkers";
import {ownerUserId,ownerUserName} from "../service/rpc";
import addListLogic from '../logic/addListLogic'
import Toast from "react-native-simple-toast";
import {delList} from "../logic/delLogic";
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: "#f3f3f3",
	},
	content: {
		backgroundColor: 'white'
	},
	item: {
		borderBottomWidth: line,
		borderBottomColor: "#eeeeee",
		alignItems: 'center',
		flexDirection: 'row',
		height: 50,
		paddingLeft: 15,
		backgroundColor: "white",
	},
	input: {
		flex: 1,
		fontSize: 16,
	},
	icon: {
		height: 20,
		width: 20,
		marginRight: 15,
	},
	addView: {
		height: 58,
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 15,
		backgroundColor: "white",
	},
	icon1: {
		height: 12,
		width: 12,
	},
	nameBg: {
		height: 30,
		width: 30,
		borderRadius: 4,
		backgroundColor: "#2c8fff",
		alignItems: 'center',
		justifyContent: 'center',
		overflow: 'hidden',
		marginRight: 13.5
	},
	nameBgText: {
		fontSize: 20,
		color: 'white',
	},
	name: {
		fontSize: 16,
		flex: 1,
	},
	buttonText:{
		color:'white',
		paddingRight:15,
		fontSize:15,
		fontWeight:"600"
	},
	delView:{
		alignSelf:'stretch',
		width:60,
		justifyContent:'center',
		alignItems:"flex-end",
		paddingRight: 15
	},
	delButton:{
		height:44,
		alignItems:'center',
		justifyContent:'center',
		backgroundColor:"white",
		marginTop:27
	},
	delButtonText:{
		fontSize:16,
		color:"#ed5b51"
	}
})

@observer
export class WorkerItem extends React.Component {
	render() {
		const {data, remove,choose,onChange,close} = this.props
		const {name, userId,userName} = data
		const icon=choose?require("./imgs/selectActive.png"):require("./imgs/select.png")
		return (
			<TouchableOpacity style={[styles.item,]} onPress={()=>onChange&&onChange()}>
				{onChange&&<Image style={styles.icon} source={icon} resizeMode={"contain"}/>}
				<View style={styles.nameBg}>
					<Text style={styles.nameBgText}>{name?name[0]:userName[0]}</Text>
				</View>
				<Text style={styles.name}>{name||userName}</Text>
				{close||!onChange&&<TouchableOpacity onPress={() => remove()} style={styles.delView}>
					<Image style={styles.icon1} source={require("./imgs/del.png")} resizeMode={"contain"}/>
				</TouchableOpacity>}
			</TouchableOpacity>
		)
	}
}

@observer
export default class AddList extends React.Component {
	logic = new addListLogic()
	static navigationOptions = ({navigation}) => {
		return {
			headerLeft: <BackButton navigation={navigation}/>,
			headerTitle: navigation.state.params.title ,
			headerRight:<Text style={styles.buttonText} onPress={()=>navigation.state.params.onPress()}>确定</Text>
		}
	}

	onPress = () => {
		const {navigation} = this.props
		navigation.navigate("UserList", {callback: this.callback,userList:this.logic.userList})
	}
	callback = (v) => {
		console.log(v)
		this.logic.userList.replace(v.map(z=>{return {username:z.name||z.userName,userName:z.name||z.userName,...z}}))
		const {navigation} = this.props
		// navigation.goBack()
	}

	async componentWillMount() {
		const {state,setParams}=this.props.navigation
		console.log(state)
		const {params} = state

		if (params && params.taskListId) {
			await this.logic.getTaskList(params.taskListId)
			setParams({onPress:async ()=>{
				if(this.logic.text.length===0){
					Toast.show("请输入内容")
					return
				}
				if(this.notouch){
					return
				}
				this.notouch=true
				await this.logic.edit({id:params.taskListId,objectType:params.objectType});
				this.props.navigation.goBack()
			}})
			return
		}
		this.logic.userList.push({userId:ownerUserId,userName:ownerUserName})
		this.logic.ownerUserId=ownerUserId
		setParams({onPress:async ()=>{
				if(this.logic.text.length===0){
					Toast.show("请输入内容")
					return
				}
				if(this.notouch){

					return
				}
				this.notouch=true
			const id=await this.logic.create();
				if(id){
					const {navigate,state}=this.props.navigation
					navigate("TaskList",{listId:id,title:this.logic.text,objectType:"MANUAL",backKey:state.key})
				}

		}})
	}
	componentWillUnmount(){
		this.notouch=false
	}
	del(){
		const {state,setParams}=this.props.navigation
		const {params} = state
		Alert.alert("注意","确认要删除吗？",[
			{text:"取消",onPress:()=>{}},
			{text:"确认",onPress:async()=>{
					const data=await delList(params.taskListId)
					if(data){
						this.props.navigation.goBack(params.backKey)
					}
				}},
		])
	}
	render() {
		const {state,setParams}=this.props.navigation
		const {params} = state
		return (
			<View style={styles.container}>
				<ScrollView>
					<View style={styles.item}>
						<Image source={require("./imgs/menu.png")} style={styles.icon} resizeMode={"contain"}/>
						<TextInput
							value={this.logic.text}
							style={styles.input}
							onChangeText={v => this.logic.text = v}
							placeholder={"名称"}
							underlineColorAndroid={"transparent"}
							autoFocus={true}
							returnKeyType={"done"}

						/>
					</View>
					<View style={styles.content}>
						{this.logic.userList.map((v, i) => <WorkerItem key={i} data={v}
						                                               remove={() => this.logic.userList.remove(v)}
						                                               close={v.userId===this.logic.ownerUserId}
						/>)}
					</View>
					<TouchableOpacity style={styles.addView} onPress={this.onPress}>
						<Image source={require("./imgs/add5.png")} style={styles.icon} resizeMode={"contain"}/>
						<Text style={[styles.input, {color: "#999999"}]}>添加成员</Text>
					</TouchableOpacity>
					{params && params.taskListId&&<TouchableOpacity style={styles.delButton} onPress={()=>this.del()}>
						<Text style={styles.delButtonText}>删除清单</Text>
					</TouchableOpacity>}
				</ScrollView>
			</View>
		)
	}
}