import React, { Component } from "react";
import { View, Button, Text } from "@tarojs/components";
import { AtModal, AtModalContent, AtSearchBar, AtList, AtListItem } from "taro-ui";
import { getadminByName } from "../../../utils/servers/servers";
import { isOneself } from "../../../utils/tools"
import './index.less';
import "taro-ui/dist/style/components/modal.scss";
import Taro from "@tarojs/taro";

class UserQuery extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      list: [],
      listState: "NO_DATA",
      pageNo: 1,
      listVisible: false,
      listValue: {},
    };
    this.onChange = this.onChange.bind(this);
  }

  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",
    });
    getadminByName({
      adminName: value,
      pageNo: pageNo,
      pageSize: 10,
    })
      .then((msg) => {
        if (msg.error.length === 0) {
          this.setState({
            list: msg.data
          })
        } 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",
        });
      });
  }


  render() {
    const { coorderList, cList } = this.props
    return (
      <AtModal
        isOpened={this.props.isOpened}
        onClose={this.props.onDesc}
      >
        <AtModalContent>
          <AtSearchBar
            placeholder="请输入协单人姓名"
            showActionButton
            value={this.state.value}
            onChange={this.onChange}
            onActionClick={() => {
              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,
              });
            }}
          />
          <AtList>
            {
              this.state.list.map(v =>
                <View key={v.id}>
                  <AtListItem
                    title={v.name}
                    onClick={() => {
                      if (coorderList.includes(v.id)) {
                        Taro.showToast({ title: "你已经邀请过Ta了~", icon: "none" });
                        return
                      } else if (isOneself(v.id)) {
                        Taro.showToast({ title: "你不能邀请自己哦~", icon: "none" });
                        return
                      } else {
                        coorderList.push(v.id);
                        cList.push(v);
                        this.props.setList(cList, coorderList);
                        this.props.onDesc();
                      }
                    }}
                  />
                </View>
              )
            }
          </AtList>
          <View
            style={{ color: "red", margin: "20px auto 0", textAlign: "center" }}
            onClick={this.props.onDesc}
          >点击关闭弹窗</View>
        </AtModalContent>
      </AtModal>
    );
  }
}

export default UserQuery;
