import React from 'react';
import _ from 'lodash';
import { personInfoCard, DeviceInfoCard } from '../../utils';
import { Radio,Slider} from 'antd';
import './index.less';
const RadioGroup = Radio.Group
class DeviceCard extends React.Component {
  constructor(props) {
    super(props);
    this.timer = null;
    this.state = {
      defaultValue: [],
    };
  }

  componentDidMount() {
    let { nodeInfo, searchKeyChange, selectDataList, aids } = this.props;
    let id = nodeInfo.id;

    let selectKeys = selectDataList[id] || [];
    let defaultValue = _.cloneDeep(selectKeys);
    if (!selectKeys.length) {
      defaultValue = [aids[0]];
    }
    searchKeyChange(defaultValue);
  }

  render() {
    let { deviceTimeChange, nodeInfo, searchKeyChange, selectDataList, aids, objectDataList, deviceSearchTime, click } = this.props;

    let name = nodeInfo.name;
    let id = nodeInfo.id;
    let defaultValue = selectDataList[id] || [];
    if (defaultValue.length === 0) {
      defaultValue = aids;
    }
    aids = _.uniq(aids);
    let personDataList = [];
    aids.forEach((v) => {
      if (objectDataList[v].type === 'person') {
        personDataList.push(objectDataList[v]);
      }
    });
    return (
      <>
        <DeviceInfoCard id={id} name={name} click={click} />
        {
          <div className="relation-device-card-person-view">
            {personDataList.length ? (
              <RadioGroup
                onChange={(e) => {
                  searchKeyChange([e.target.value]);
                }}
                defaultValue={defaultValue[0]}
                className="person-view"
              >
                {personDataList.map((v) => {
                  return (
                    <div key={v.aid} style={{ marginTop: '10px' }}>
                      <Radio value={v.personId||v.aid}>{personInfoCard(v)}</Radio>
                    </div>
                  );
                })}
              </RadioGroup>
            ) : (
              '无关联人员'
            )}
          </div>
        }
        <div className="relation-search-box">
          <div className="relation-search-title">查询关系：</div>
          <div className="relation-search-content">
            在该设备下同出现的人
            {/* <CheckGroup onChange={searchKeyChange} defaultValue={selectKeys}>
              {CheckBoxItem(
                selectKeys,
                "getAidsByMaxCid",
                "在该设备下同出现的人"
              )}
            </CheckGroup> */}
          </div>
          <div className="relation-search-title">查询范围：</div>
          <div className="relation-search-content">
            <div className="time-rander" style={{ paddingTop: '5px' }}>
              <Slider marks={{ 0: 0, 7: 7, 14: 14, 21: 21, 30: 30 }} onChange={deviceTimeChange} value={deviceSearchTime} max={30} />
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default DeviceCard;
