/* 
TODO 修改完成
*/
import React from 'react'
import { map } from '../mapContext'
import { xorBy } from 'lodash'
import { Popover } from 'antd'
import '../style/resource-select.less'

import { Dict } from '@zenview/micro-basic-library';
import IconFont from '../../../themeComponents/IconFont';
import DeviceIcon from '../../DeviceIcon';

const deviceType = Dict.device.deviceType.filter(v => v.value !== '-1')
const cameraType = Dict.device.cameraType.filter(v => v.value !== '-1')
const deviceStatus = Dict.device.deviceStatus.filter(v => v.value !== '-1')

@map
class ResourceLayer extends React.Component {
  constructor(props) {
    super(props)
    this.suffix = Math.random()
    this.deviceType = deviceType
    let excludeTypes = props.excludeTypes;
    if (excludeTypes && excludeTypes.length > 0) {
      this.deviceType = xorBy(
        this.deviceType,
        excludeTypes.filter(v => !!v),
        'value'
      )
    }
    this.cameraType = cameraType;
    this.state = {
      type: this.deviceType.map(v => v.value),
      status: deviceStatus.map(v => v.value),
      cameraType: this.cameraType.map(v => v.value),
    }
  }
  changeMapMarker(changeType, code) {
    const state = this.state
    const index = state[changeType].indexOf(code)
    if (index > -1) {
      state[changeType].splice(index, 1)
    } else {
      state[changeType].push(code)
    }

    this.setState({ [changeType]: state[changeType] }, () => {


      const types = this.state.type.join(',').split(',')
      const status = this.state.status.join(',').split(',')
      let cameraType = this.state.cameraType.join(',').split(',')
      let { hasCameraType = false } = this.props;
      cameraType = hasCameraType ? cameraType.filter(v => v !== '') : null;
      this.props.showCustomMarker(
        types.filter(v => v !== ''),
        status.filter(v => v !== ''),
        cameraType,
      )
    })
  }
  getPopupContent = () => {
    const { type, status, cameraType } = this.state
    let { hasCameraType = false } = this.props;
    return (
      <div className="map-type-popup-layout">
        <div className="type-part">
          <div className="type-name">设备类型</div>
          <div className="type-content">
            {this.deviceType.map(item => (
              <div title={item.label} className={`type-item ${type.indexOf(item.value) > -1 ? 'active' : ''} `} key={item.value} onClick={() => this.changeMapMarker('type', item.value)}>
                <span className="icon" >
                  <DeviceIcon type={item.value} theme="outlined" />
                </span>
                <span className="lable-text">
                  {item.label}
                </span>
              </div>
            ))}
          </div>
        </div>
        {hasCameraType &&
          <div className="type-part">
            <div className="type-name">摄像机功能类型</div>
            <div className="type-content">
              {this.cameraType.map(item => (
                <div title={item.label} className={`type-item ${cameraType.indexOf(item.value) > -1 ? 'active' : ''} `} key={item.value} onClick={() => this.changeMapMarker('cameraType', item.value)}>
                  <span className="icon">
                    <DeviceIcon type={item.value} theme="outlined" />
                  </span>
                  <span className="lable-text">
                    {item.label}
                  </span>
                </div>
              ))}
            </div>
          </div>
        }
        <div className="type-part">
          <div className="type-name">在离线状态：</div>
          <div className="type-content">
            {deviceStatus.map(item => (
              <div title={item.label} className={`type-item ${status.indexOf(item.value) > -1 ? 'active' : ''} `} key={item.value} onClick={() => this.changeMapMarker('status', item.value)}>
                <span className="icon">
                  <IconFont type={item.value === '1' ? 'icon-S_Photo_LinkOn' : 'icon-S_Photo_LinkOff'} theme="outlined" />
                </span>
                <span className="lable-text">{item.label}</span>
              </div>
            ))}
          </div>
        </div>
        {this.props.children}
      </div>
    )
  }
  render() {
    const { getPopupContainer } = this.props
    return (
      <Popover
        trigger={'click'}
        overlayClassName="resource-popup-layout"
        content={this.getPopupContent()}
        getPopupContainer={() => (getPopupContainer ? getPopupContainer() : document.getElementsByClassName(`tools-resource-layer-${this.suffix}`)[0])}
        placement="bottomLeft"
      >
        <div className={`tools-resource-layer tools-resource-layer-${this.suffix}`}>
          <IconFont type="icon-M_Bar_Resource1" theme="outlined" />
          资源
          <IconFont type="icon-S_Arrow_SmallDown" theme="outlined" />
        </div>
      </Popover>
    )
  }
}
export default ResourceLayer
