//渲染每一个人员item
/**
 * 通过搜索获得地图列表(保安人员)
 */
import React, { Component } from "react";
import { connect } from "dva";
import { Pagination, message, Icon, Modal, Button, Tooltip, Spin } from "antd";
import eventCenter from "@common/events"; // 引入 EventEmitter
// import "../person.less";
const { confirm } = Modal;
@connect((state) => ({
  selectedId: state.command.personList.selectedId,
  layoutAuthority: state.command.layoutAuthority
  //   tabIndex2: state.command.tabIndex.person.tabIndex2,
}))
export default class PersonItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data || [],
      loadingText: props.data,
    };
  }

  componentDidMount() { }
  componentWillReceiveProps(nextProps) {
    // console.log('componentWillReceiveProps', nextProps.loadingText , this.state.loadingText);
    // if (nextProps.loadingText != this.state.loadingText) {
    //   this.setState({
    //     loadingText: nextProps.loadingText,
    //     data: []
    //   });
    // }
    if (nextProps.data != this.state.data) {
      this.setState({
        data: nextProps.data,
      });
    }
  }
  onPersonClick=(item)=>{
    if (item.lnglat) {
      // if (this.props.selectedId != item.perId) {
      this.props.dispatch({
        type: "command/setPersonSelectIndex",
        payload: item.perId,
      });
    } else {
      message.warning("该人员暂未定位");
    }
    this.props.onClick && this.props.onClick(item);
  }
  render() {
    let count = 0; // 计数器
    return (
      <div>
        {this.state.data.length > 0 ? (
          this.state.data.map((item, index) => {
            const xing = "********";
            let idCardNo = "";
            if (item.idCardNo) {
              let front6 = item.idCardNo.substring(0, 6);
              idCardNo =
                front6 +
                xing +
                item.idCardNo.substring(14, item.idCardNo.length);
            }
            count = item.lnglat ? count + 1 : count;
            return (
              <div
                key={index}
                className="item"
                onClick={this.onPersonClick.bind(this, item)}
              // onMouseOver={() => {
              //   this.props.dispatch({
              //     type: "command/setPersonHoverIndex",
              //     payload: item.perId,
              //   });
              // }}
              // onMouseLeave={() => {
              //   this.props.dispatch({
              //     type: "command/setPersonHoverIndex",
              //     payload: null,
              //   });
              // }}
              >
                <div
                  className={
                    this.props.selectedId === item.perId
                      ? "selected poibox"
                      : "poibox"
                  }
                >
                  {item.photoUrl ? (
                    <img
                      className="img"
                      src={item.photoUrl ? item.photoUrl : ""}
                    ></img>
                  ) : (
                    <div className="img-span">
                      {/* 取后面两位显示 */}
                      <span>
                        {item.name
                          ? item.name.substring(
                            item.name.length - 2,
                            item.name.length
                          )
                          : ""}
                      </span>
                    </div>
                  )}

                  <div style={{ marginLeft: 45 }}>
                    <div className="name">
                      {item.name || "---"}
                      {
                        this.props.layoutAuthority.basisLayer ?
                          <span className="send-header-bar">
                            <Tooltip placement="bottom" title="文字调度">
                              <Icon
                                type="form"
                                style={{ fontSize: "17px" }}
                                onClick={(e) => {
                                  e.stopPropagation(), //合成事件停止冒泡
                                    // this.props.clickTextScheduling(item, "text");
                                    eventCenter.emit('clickTextScheduling', {
                                      item,
                                      type: "text",
                                    });
                                }}
                              />
                            </Tooltip>
                            <Tooltip
                              placement="bottom"
                              title="语音调度"
                              onClick={(e) => {
                                e.stopPropagation(), //合成事件停止冒泡
                                  // this.props.clickTextScheduling(item, "voice");
                                  eventCenter.emit('clickTextScheduling', {
                                    item,
                                    type: "voice",
                                  });
                              }}
                            >
                              <Icon type="audio" style={{ fontSize: "17px" }} />
                            </Tooltip>
                            {/* <Tooltip
                          placement="bottom"
                          title="视频调度"
                          onClick={(e) => {
                            const _this = this
                            e.stopPropagation(), //合成事件停止冒泡
                              confirm({
                                title: <><span>是否开启屏幕录制?</span><span onClick={()=>Modal.destroyAll()} style={{position:'absolute',top:'4px',right:'6px',cursor:'pointer',color:'#000000a6'}}>取消</span></>,
                                content:
                                  "开启后，被调度保安员的视频页面将会被录制，调度结束后，可查看录制文件。",
                                okText: "开启录制,继续调度",
                                cancelText: "不开启录制,继续调度",
                                onOk() {
                                  _this.props.clickTextScheduling(item, "video", [item.phone]);
                                },
                                onCancel() {
                                  _this.props.clickTextScheduling(item, "video");
                                },
                              });
                          }}
                        >
                          <Icon
                            type="video-camera"
                            style={{ fontSize: "17px" }}
                          />
                        </Tooltip> */}
                          </span>: ""
                      }
                    </div>
                    <div className="text">
                      手机号码:{item.mobilePhone || "---"}
                    </div>
                    <div className="text idcard">
                      证件号码:{idCardNo || "---"}
                      {item.lnglat && (
                        <div
                          className="amap_lib_placeSearch_poi poibox-icon"
                          style={{ marginTop: "-15px" }}
                        >
                          {count}
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            );
          })
        ) : (
          <div
            style={{ textAlign: "center", fontSize: "14px", color: "#afb0b1" }}
          >
            {<Spin tip={this.state.loadingText}></Spin> || "暂无数据"}
          </div>
        )}
      </div>
    );
  }
}
