import { _ as _extends } from './_rollupPluginBabelHelpers-736b301a.js';
import React__default, { useCallback, useState, useMemo, useEffect } from 'react';
import { intersectionBy, difference, uniq } from 'lodash';
import { L as ListView } from './index-f41abfce.js';
import { isEqual } from '@zenview/micro-utils';
import CBox from './CBox/index.js';
import TreeTitle from './TreeTitle/index.js';
import { Checkbox, Select } from 'antd';
import HightLevel from './HightLevel/index.js';
import IconFont from './IconFont/index.js';
import { Dict } from '@zenview/micro-basic-library';

function RenderItem({
  item,
  checkedKeys,
  activeKey,
  style,
  itemNameKey,
  renderItemExt,
  whatIcon,
  itemKey,
  checkable,
  keywords,
  onChecked,
  onClickItem,
  key,
  onMouseOverItem,
  onMouseOutItem
}) {
  const checked = checkedKeys ? checkedKeys.includes(item[itemKey]) : false;
  const active = !activeKey ? false : Array.isArray(activeKey) ? activeKey.includes(item[itemKey]) : activeKey === item[itemKey];
  const itemIcon = whatIcon ? whatIcon(item) : null;
  const itemClick = useCallback(e => e.stopPropagation(), []);
  return /*#__PURE__*/React__default.createElement("div", {
    style: style,
    className: `list-item ${checkable ? 'has-check-box' : ''} ${active ? 'list-item-active' : ''}`,
    key: key,
    onClick: () => onClickItem && onClickItem(item),
    onMouseOver: () => onMouseOverItem && onMouseOverItem(item),
    onMouseOut: () => onMouseOutItem && onMouseOutItem(item)
  }, /*#__PURE__*/React__default.createElement("label", null, checkable && /*#__PURE__*/React__default.createElement(Checkbox, {
    value: item[itemKey],
    disabled: item.disabled,
    onClick: itemClick,
    checked: checked,
    onChange: onChecked
  }), /*#__PURE__*/React__default.createElement("div", {
    className: `item-info`
  }, itemIcon, keywords ? /*#__PURE__*/React__default.createElement(HightLevel, {
    name: item[itemNameKey],
    keyword: keywords
  }) : /*#__PURE__*/React__default.createElement("span", {
    title: item[itemNameKey]
  }, item[itemNameKey])), renderItemExt && renderItemExt(item)));
}

function CheckAll({
  checkable,
  checkHalfStatus,
  checkExt,
  checkAllStatus,
  checkedKeys,
  onChange,
  disabled,
  checkableTitle,
  checkNum,
  list,
  destoryList
}) {
  return /*#__PURE__*/React__default.createElement("div", {
    className: "list-checkall"
  }, checkable && /*#__PURE__*/React__default.createElement(Checkbox, {
    indeterminate: checkHalfStatus,
    checked: checkAllStatus,
    onChange: onChange,
    disabled: disabled
  }, checkableTitle, checkNum && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "(\u5DF2\u9009 ", /*#__PURE__*/React__default.createElement("span", {
    style: {
      color: '#fd9838'
    }
  }, checkedKeys.length), " / \u603B\u6570 ", /*#__PURE__*/React__default.createElement("span", {
    style: {
      color: '#fd9838'
    }
  }, list.length), ")")), destoryList && /*#__PURE__*/React__default.createElement(IconFont, {
    type: "icon-S_AID_delete",
    onClick: destoryList
  }), checkExt);
}

// 计算全选半选状态
function computedCheckStatus(list = [], checkedKeys = [], key = 'id') {
  const listKey = list.map(v => v[key]);
  const temp = intersectionBy(listKey, checkedKeys);
  const checkHalfStatus = temp.length && temp.length < list.length;
  const checkAllStatus = list.length && temp.length === list.length;
  return {
    checkHalfStatus,
    checkAllStatus,
    listKey
  };
}
function getAllDeviceTypeDict() {
  const allCameraType = Dict.cacheMap.data['100600'] || [];
  for (const item of allCameraType) {
    item.value = item.code;
    item.label = item.name;
  }
  return allCameraType;
}

const {
  Option
} = Select;
const {
  deviceStatus
} = Dict.device;
function CheckList(props) {
  const {
    className,
    style,
    CustomRender,
    hasHeader,
    checkable,
    itemNameKey,
    destoryList,
    activeKey,
    checkExt,
    title,
    onChange,
    placeholder,
    list,
    checkedKeys,
    itemKey,
    defaultCheckedIds,
    titleExt,
    deviceGroup = [],
    hasFilter
  } = props;
  const [state, setState] = useState({
    checkedKeys: defaultCheckedIds || checkedKeys || []
  });
  const [filterData, setFilterData] = useState({});
  const showList = useMemo(() => {
    const {
      deviceStatus,
      deviceType,
      lygroupId
    } = filterData;
    let arr = list;
    if (deviceStatus && deviceStatus !== '-1') {
      arr = arr.filter(v => String(v.deviceStatus) === deviceStatus);
    }
    if (deviceType) {
      arr = arr.filter(v => v.deviceType === deviceType);
    }
    if (lygroupId) {
      arr = arr.filter(v => v.lygroupId === lygroupId);
    }
    return arr;
  }, [list, filterData]);
  const {
    checkHalfStatus,
    checkAllStatus,
    listKey
  } = useMemo(() => computedCheckStatus(showList, state.checkedKeys, itemKey), [itemKey, showList, state.checkedKeys]);
  const deviceAndMjType = getAllDeviceTypeDict().filter(v => !(v.value === '-1' || Dict.device.db.value === v.value));
  /**
   * 列表选中处理
  */
  const onChecked = useCallback(e => {
    let ids = state.checkedKeys || [];
    const id = e.target.value;
    const flag = e.target.checked;
    if (flag) {
      ids.push(id);
    } else {
      ids = ids.filter(v => v !== id);
    }
    setState(old => ({
      ...old,
      checkedKeys: [...ids]
    }));
    props.onChecked && props.onChecked(ids, difference(listKey, ids));
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [listKey, state.checkedKeys]);

  /**
   * 列表渲染
   */
  const renderRow = useCallback(({
    key,
    index,
    style
  }) => {
    const options = {
      ...state,
      item: showList[index],
      onChecked,
      checkable,
      key,
      index,
      style,
      keywords: props.keywords,
      whatIcon: props.whatIcon,
      renderItemExt: props.renderItemExt,
      onClickItem: props.onClickItem,
      onMouseOutItem: props.onMouseOutItem,
      onMouseOverItem: props.onMouseOverItem,
      itemKey,
      itemNameKey,
      activeKey
    };
    return CustomRender ? /*#__PURE__*/React__default.cloneElement(CustomRender, options) : /*#__PURE__*/React__default.createElement(RenderItem, _extends({}, options, {
      key: key || index
    }));
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [showList, state, onChecked, CustomRender, activeKey]);

  /**
   * 列表全选处理
   */
  const onChangeCheckAll = useCallback(() => {
    const ids = checkAllStatus ? difference(checkedKeys, listKey) : uniq([].concat(checkedKeys, listKey));
    setState(old => ({
      ...old,
      checkedKeys: [...ids]
    }));
    props.onChecked && props.onChecked(ids, difference(listKey, ids));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [checkAllStatus, checkedKeys, listKey]);

  /**
   * 同步选中更新
   */
  useEffect(() => {
    if (props.checkedKeys && !isEqual(props.checkedKeys, state.checkedKeys)) {
      setState(old => ({
        ...old,
        checkedKeys: props.checkedKeys
      }));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.checkedKeys]);
  const onFilterChange = option => {
    setFilterData(old => {
      return {
        ...old,
        ...option
      };
    });
  };
  return /*#__PURE__*/React__default.createElement(CBox, {
    className: `lm-c-check-list-wrapper ${className}`,
    style: style
  }, hasHeader && /*#__PURE__*/React__default.createElement(TreeTitle, {
    title: title,
    hasInput: !!onChange,
    onChange: onChange,
    titleExt: titleExt,
    inputPlaceholder: placeholder
  }), hasFilter && /*#__PURE__*/React__default.createElement("div", {
    className: "lm-c-check-list-filter-view"
  }, /*#__PURE__*/React__default.createElement(Select, {
    allowClear: true,
    placeholder: '设备状态',
    onChange: value => onFilterChange({
      deviceStatus: value
    }),
    value: filterData.deviceStatus
  }, deviceStatus.map(item => /*#__PURE__*/React__default.createElement(Option, {
    value: item.value,
    key: item.value
  }, item.label))), /*#__PURE__*/React__default.createElement(Select, {
    allowClear: true,
    placeholder: '设备类型',
    onChange: value => onFilterChange({
      deviceType: value
    }),
    value: filterData.deviceType
  }, deviceAndMjType.map(item => /*#__PURE__*/React__default.createElement(Option, {
    value: item.value,
    key: item.value
  }, item.label))), !!deviceGroup.length && /*#__PURE__*/React__default.createElement(Select, {
    style: {
      width: '100%'
    },
    filterOption: (input, option) => {
      var _option$children;
      return ((_option$children = option === null || option === void 0 ? void 0 : option.children) !== null && _option$children !== void 0 ? _option$children : '').includes(input);
    },
    showSearch: true,
    placeholder: "\u9879\u76EE\u5206\u7EC4",
    value: filterData.lygroupId,
    onChange: value => onFilterChange({
      lygroupId: value
    })
  }, deviceGroup.map(item => /*#__PURE__*/React__default.createElement(Option, {
    key: item.id,
    value: item.id,
    title: `${item.name}`
  }, item.name)))), (checkable || destoryList || checkExt) && /*#__PURE__*/React__default.createElement(CheckAll, {
    onChange: onChangeCheckAll,
    list: showList,
    checkable: checkable,
    destoryList: destoryList,
    checkExt: checkExt,
    checkableTitle: props.checkableTitle,
    checkHalfStatus: checkHalfStatus,
    checkAllStatus: checkAllStatus,
    checkedKeys: checkedKeys
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "lm-c-base-list-layout"
  }, /*#__PURE__*/React__default.createElement(ListView, {
    className: "lm-c-virtual-layout",
    data: showList,
    rowHeight: 30,
    rowRenderer: renderRow
  })));
}
CheckList.defaultProps = {
  className: '',
  title: '摄像机列表',
  checkableTitle: '全选',
  checkNum: false,
  list: [],
  // 列表数据
  checkable: true,
  // 是否显示checkbox
  placeholder: '请输入设备名称搜索',
  itemKey: 'id',
  hasHeader: true,
  itemNameKey: 'name'
};

export { CheckList as C };
//# sourceMappingURL=index-6ef7005c.js.map
