import React, { useState, useMemo } from "react";
import { inject, observer } from "mobx-react";
import { Button, Row, Col } from 'antd'
// import { IconFont, Title, DeviceIcon, VList } from 'micro-components'

import { treeHelper } from '@zenview/micro-utils';
import { Dict } from '@zenview/micro-basic-library'
import DrawerMapSelect from '../DrawerMapSelect'
import DrawerListSelect from '../DrawerListSelect'

import IconFont from '../../themeComponents/IconFont';
import Title from '../../components/Title'
import DeviceIcon from '../DeviceIcon';
import VList from '../../components/VList';

import "./index.less";

const PointsSelect = props => {
  const { device, place, org, value, dataType, onChange } = props;
  const [isShowDrawer, setIsShowDrawer] = useState({
    isShowListDrawer: false,
    isShowMapDrawer: false
  })
  const filterCamera = (v) => {
    const qj = { value: '100602', label: '球机' };
    const znxj = { value: '100604', label: '智能枪机' };
    const db = { value: '100605', label: '单兵' };
    const qt = { value: '100601', label: '其他摄像机' };
    const dz = { value: '100607', label: '道闸' };
    return v.deviceType === qj.value || v.deviceType === znxj.value || v.deviceType === db.value || v.deviceType === qt.value || v.deviceType === dz.value;;
  };
  const faceFilterCamera = (v) => {
    const qj = { value: '100602', label: '球机' };
    const znxj = { value: '100604', label: '智能枪机' };
    const db = { value: '100605', label: '单兵' };
    const qt = { value: '100601', label: '其他摄像机' };
    const mj = { value: '103501,103502', label: '门禁' };
    return v.deviceType === qj.value || v.deviceType === znxj.value || v.deviceType === db.value || v.deviceType === qt.value || mj.value.indexOf(v.deviceType) > -1;
  };


  // 设备数据源
  const deviceListResource = useMemo(() => {
    window.abc = device.deviceList
    if(dataType === "accessControl"){
      return device.deviceList.filter(v => Dict.device.mj.value.indexOf(v.deviceType) > -1)
    }
    if(dataType === "doorMagnetism"){
      return device.deviceList.filter(v => Dict.device.menci.value.indexOf(v.deviceType) > -1)
    }
    if(dataType === "cameraControl"){
      return device.deviceList.filter(filterCamera)
    }
    if(dataType === "faceCameraControl"){
      return device.deviceList.filter(faceFilterCamera)
    }
    // return device.cameraList;
    return device.deviceList;
  }, [dataType, device.deviceList]);

  // 组织数据源
  const orgTreeData = useMemo(() => {
    if(dataType !== 'accessControl' || dataType !== "doorMagnetism"){
      return;
    }

    let orgData = org.getOrgListCount(org.orgList, deviceListResource);

    return treeHelper.computTreeList(orgData);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [deviceListResource, org.orgList, dataType]);

  // 场所数据源
  const placeTreeData = useMemo(() => {
    if(dataType !== 'accessControl' || dataType !== "doorMagnetism"){
      return;
    }

    let placeData = []
    if(dataType === 'accessControl'){
      placeData = place.getPlaceListDeviceCount(place.placeList, deviceListResource, 'mj')
    }else if(dataType === 'doorMagnetism'){
      placeData = place.getPlaceListDeviceCount(place.placeList, deviceListResource, 'menci')
    }

    let placeListHandle = placeData.map(v => {
      return {
        ...v,
        placeId: v.id,
        id: v.areaCode,
        name: v.areaName,
        parentId: v.parentCode,
        deviceCount: {
          onlineCount: v.deviceCount ? v.deviceCount.onlineCount : 0,
          count: v.deviceCount ? v.deviceCount.count : 0
        },
        cameraCount: {
          onlineCount: v.cameraCount ? v.cameraCount.onlineCount : 0,
          count: v.cameraCount ? v.cameraCount.count : 0
        }
      };
    });
    return treeHelper.computTreeList(placeListHandle)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [deviceListResource, place.placeList, dataType]);

  // 选中的数据列表
  const selectDevicesList = useMemo(() => device.getDeviceByIds(value || []), [device, value]);

  // 显示弹框
  const showDrawer = type => {
    let drawerType = type === "list" ? "isShowListDrawer" : "isShowMapDrawer";
    setIsShowDrawer({
      ...isShowDrawer,
      [drawerType]: true
    })
  };

  // 关闭弹框
  const onClose = () => {
    setIsShowDrawer({
      isShowListDrawer: false,
      isShowMapDrawer: false
    });
  };

  // 修改选中的设备
  const setSelectedDevices = selectDevices => {
    onChange && onChange(selectDevices);
  };

  // 选中的设备
  const rowRender = ({ key, index, style }) => {
    let v = selectDevicesList[index];
    return (
      <div style={style} key={v.id} title={v.deviceName} className="li">
        <DeviceIcon type={v.deviceType} status={v.deviceStatus} />
        {v.deviceName}
      </div>
    );
  };
  const { isShowMapDrawer, isShowListDrawer } = isShowDrawer;

  return (
    <div className="resource-library-chose-device">
        <Title title="点位" icon="icon-S_Bar_Add" />
        <Row>
          <Col className="chose-device-btn" span={11}>
            <Button size="small" onClick={() => showDrawer("list")}>
              <IconFont type="icon-S_Photo_ListTree" />
              列表模式
            </Button>
          </Col>
          <Col className="chose-device-btn" span={11} offset={2}>
            <Button size="small" onClick={() => showDrawer("map")}>
              <IconFont type="icon-S_Photo_Map" />
              地图模式
            </Button>
          </Col>
        </Row>
        {!!selectDevicesList.length && (
          <div className="grap-point-content">
            <div className="camera-selected">
              <VList data={selectDevicesList} rowHeight={24} rowRenderer={rowRender} />
            </div>
            <div className="clear" onClick={() => setSelectedDevices([])}>
              <IconFont type="icon-S_Edit_Deleted" className="data-repository-icon" />
              清空摄像机
            </div>
          </div>
        )}
        <DrawerListSelect
          destroyOnClose={true}
          width={1000}
          title="列表模式"
          visible={isShowListDrawer}
          onClose={onClose}
          selectDevices={value}
          onChange={setSelectedDevices}
          orgTreeData={orgTreeData}
          placeTreeData={placeTreeData}
          deviceList={deviceListResource}
        />
        <DrawerMapSelect
          destroyOnClose={true}
          width={1000}
          title="地图模式"
          visible={isShowMapDrawer}
          onClose={onClose}
          value={value}
          points={deviceListResource}
          onChange={setSelectedDevices}
        />
      </div>
  )
}

export default inject("device", "place", "org")(observer(PointsSelect))
