import React, { Component } from "react";
import { View, Text } from "@tarojs/components";
import { AtFloatLayout, AtButton, AtIcon, AtListItem, AtSearchBar } from "taro-ui";
import Taro from "@tarojs/taro";
import { getUserByName } from "../../../utils/servers/servers";
import 'taro-ui/dist/style/components/float-layout.scss';
import 'taro-ui/dist/style/components/icon.scss';
import 'taro-ui/dist/style/components/button.scss';
import './index.less';


class CustomerProjectSelect extends Component {
	constructor(props) {
		super(props);
		this.state = {
			checkboxOption: props.options || [],
			checkedList: [],
			value: '',
			list: [],
			listState: '',
			listVisible: false
		}

		this.handleClose = this.handleClose.bind(this);
		this.handleChange = this.handleChange.bind(this);
		this.handleConfirm = this.handleConfirm.bind(this);
		this.onChange = this.onChange.bind(this);
	}

	componentDidUpdate(prevProps) {
		if (JSON.stringify(this.props.checkedList) != JSON.stringify(prevProps.checkedList)) {
			this.setState({ checkedList: this.props.checkedList });
		}
	}

	handleClose() {
		this.setState({ checkedList: [], value: '', list: [], listState: '', listVisible: false });
		this.props.onClose();
	}

	handleChange(e) {
		this.setState({ checkedList: e });
	}

	handleConfirm() {
		const { checkedList } = this.state;
		this.props.onConfirm(checkedList);
		this.handleClose();
	}

	onChange(value, lv = true) {
		this.setState({
			value,
		});
		if (value.length < 2 && !lv) {
			Taro.showToast({ title: "最少输入两个字符", icon: "none" });
			return;
		}
		if (value.length < 4 && lv) {
			return;
		}
		this.getList(value);
	}

	getList(value = this.state.value, pageNo = 1) {
		this.setState({
			listState: "LOADING",
		});
		getUserByName({
			name: value,
			type: 1,
			pageNo: pageNo,
			pageSize: 10,
		})
			.then((msg) => {
				if (msg.error.length === 0) {
					if (msg.data.totalCount === 0) {
						this.setState({
							listState: "NO_DATA",
						});
					} else if (
						msg.data.totalCount === this.state.list.length &&
						pageNo !== 1
					) {
						Taro.showToast({ title: "没有更多数据了", icon: "none" });
						this.setState({
							listState: "NO_MORE_DATA",
						});
					} else {
						if (
							msg.data.totalCount ===
							(pageNo === 1
								? msg.data.list
								: this.state.list.concat(msg.data.list)
							).length
						) {
							this.setState({
								listState: "NO_MORE_DATA",
							});
						}
					}
					this.setState({
						list:
							pageNo === 1
								? msg.data.list
								: this.state.list.concat(msg.data.list),
						pageNo: msg.data.pageNo,
					});
				} else {
					Taro.showToast({ title: msg.error[0].message, icon: "none" });
					this.setState({
						listState: msg.error[0].field === "403" ? "NO_DATA" : "RELOAD",
					});
				}
			})
			.catch(() => {
				this.setState({
					listState: "RELOAD",
				});
			});
	}

	handleAddClick(data) {
		const { checkedList } = this.state;
		if (checkedList.find(item => item.name == data.name)) {
			Taro.showToast({ title: `${data.name}已存在!`, icon: "none" });
			return;
		}
    checkedList.push({ id: data.id, name: data.name });
		this.setState({ checkedList });
	}

	handleCloseComp(idx) {
		const { checkedList } = this.state;
		checkedList.splice(idx, 1);
		this.setState({ checkedList });
	}

	render() {
		const { checkedList } = this.state;
		return (
			<AtFloatLayout isOpened={this.props.isOpened} title={this.props.title} scrollY onClose={this.handleClose}>
				<View style={{ paddingBottom: '90rpx' }}>
					<View className="tag-list">
						{checkedList.map((item, idx) => {
							return (
								<View className="tag-list-item">
									<Text>{item.name}</Text>
									<AtIcon value="close" size="16" color="#F00" onClick={() => this.handleCloseComp(idx)} />
								</View>
							)
						})}
					</View>

					<View className="cltips">搜索可增加已存在的企业，新增可直接增加企业，删除企业:点击“X”删除</View>

					<View style={{ display: 'flex', alignItems: 'center' }}>
						<View style={{ flex: 1 }}>
							<AtSearchBar
								placeholder="请输入企业/渠道"
								showActionButton
								value={this.state.value}
								onChange={this.onChange}
								onActionClick={() => {
									this.setState({
										listVisible: false,
									});
									this.onChange(this.state.value, false);
								}}
								onConfirm={() => {
									this.onChange(this.state.value, false);
								}}
								onClear={() => {
									this.setState({
										value: "",
										list: [],
										listState: "NO_DATA",
										pageNo: 1,
										listVisible: false,
									});
								}}
							/>
						</View>

						<AtButton
							type="primary"
							size="small"
							className="add-btn"
							onClick={() => {
								this.handleAddClick({id: '0', name: this.state.value})
							}}
						>新增</AtButton>
					</View>
					{
						this.state.list.map((v, k) => (
							<View key={k}>
								<AtListItem
									title={v.name}
									arrow="right"
									iconInfo={{ size: 25, color: "#000000", value: "bookmark" }}
									onClick={() => this.handleAddClick(v)}
								/>
							</View>
						))
					}

					< View className='operate-btn' >
						<AtButton type='primary' size='normal' onClick={this.handleConfirm}>确定</AtButton>
					</View>
				</View>
			</AtFloatLayout>
		)
	}
}

export default CustomerProjectSelect;
