import React__default from 'react';
import { L as ListView$1 } from './index-f41abfce.js';
import { List, Checkbox } from 'antd';
import ___default, { intersectionBy, difference, cloneDeep, isEmpty, uniq } from 'lodash';
import IconFont from './IconFont/index.js';
import CBox from './CBox/index.js';
import { isEqual } from '@zenview/micro-utils';
import HightLevel from './HightLevel/index.js';
import TreeTitle from './TreeTitle/index.js';

class ListView extends React__default.Component {
  constructor(props) {
    super(props);
    this.forceUpdateGrid = () => {
      this.debounced && this.debounced.cancel();
      this.debounced = ___default.debounce(() => this.forceUpdate(), 200);
      this.debounced();
    };
    // 渲染列表项
    this.rowRender = ({
      key,
      index,
      style
    }) => {
      const {
        data,
        renderItem
      } = this.props;
      const item = data[index];
      return /*#__PURE__*/React__default.createElement("div", {
        key: key,
        style: style
      }, renderItem(item, index));
    };
    this.listRef = /*#__PURE__*/React__default.createRef();
    this.debounced = null;
  }
  componentWillUnmount() {
    this.debounced && this.debounced.cancel();
    this.listRef = null;
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.data !== this.props.data && nextProps.data.length === this.props.data.length) {
      this.forceUpdateGrid();
    }
  }
  render() {
    const {
      data = [],
      rowRenderer
    } = this.props;
    return /*#__PURE__*/React__default.createElement("div", {
      className: "List-Non-Vir"
    }, data.length > 0 && /*#__PURE__*/React__default.createElement(List, {
      dataSource: data,
      renderItem: item => rowRenderer({
        item
      })
    }));
  }
}

const lineItemNormal = function (props, state, onChecked, {
  key,
  index,
  style
}) {
  const {
    list = [],
    checkable = true,
    keywords,
    onClickItem,
    whatIcon,
    itemKey,
    itemNameKey,
    renderItemExt,
    onMouseOverItem,
    onMouseOutItem
  } = props;
  const {
    checkedKeys,
    activeKey
  } = state;
  const item = list[index];
  const checked = checkedKeys ? checkedKeys.includes(item[itemKey]) : false;
  const active = Array.isArray(activeKey) ? activeKey.includes(item[itemKey]) : activeKey === item[itemKey];
  const itemIcon = whatIcon ? whatIcon(item) : null;
  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],
    onClick: e => {
      e.stopPropagation();
      e.preventDefault();
    },
    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)));
};
const lineItemHasDnd = function (props, state, onChecked, {
  item
}, dragEnd, dragStart) {
  const {
    list = [],
    checkable = true,
    keywords,
    onClickItem,
    whatIcon,
    itemKey,
    itemNameKey,
    renderItemExt,
    onMouseOverItem,
    onMouseOutItem
  } = props;
  const {
    checkedKeys,
    activeKey
  } = state;
  // const item = list[index];
  const checked = checkedKeys ? checkedKeys.includes(item[itemKey]) : false;
  const active = Array.isArray(activeKey) ? activeKey.includes(item[itemKey]) : activeKey === item[itemKey];
  const itemIcon = whatIcon ? whatIcon(item) : null;
  return /*#__PURE__*/React__default.createElement("div", {
    draggable: "true",
    "data-item": JSON.stringify(item),
    "data-id": list.indexOf(item),
    "data-key": list.indexOf(item),
    onDragEnd: dragEnd.bind(this),
    onDragStart: dragStart.bind(this),
    key: list.indexOf(item),
    onClick: () => onClickItem && onClickItem(item),
    onMouseOver: () => onMouseOverItem && onMouseOverItem(item),
    onMouseOut: () => onMouseOutItem && onMouseOutItem(item),
    className: `list-item ${checkable ? 'has-check-box' : ''} ${active ? 'list-item-active' : ''}`
  }, /*#__PURE__*/React__default.createElement("label", null, checkable && /*#__PURE__*/React__default.createElement(Checkbox, {
    value: item[itemKey],
    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)));
};

class BaseList extends React__default.Component {
  constructor(props) {
    super(props);
    // 计算全选半选状态
    this.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
      };
    };
    /**
     * @计算选中id集合
     */
    this.onChecked = async e => {
      let ids = this.state.checkedKeys || [];
      const id = e.target.value;
      const flag = e.target.checked;
      if (flag) {
        ids.push(id);
      } else {
        ids = ids.filter(v => v !== id);
      }
      return await this.checkChange(ids);
    };
    /**
     * @修改选中状态
     */
    this.checkChange = async ids => {
      const {
        list,
        itemKey
      } = this.props;
      const {
        checkHalfStatus,
        checkAllStatus,
        listKey
      } = this.computedCheckStatus(list, ids, itemKey);
      await this.setState({
        checkedKeys: ids,
        checkHalfStatus,
        checkAllStatus
      });
      this.props.onChecked && this.props.onChecked(ids, difference(listKey, ids));
      this.listRef && this.listRef.current && this.listRef.current.forceUpdateGrid();
    };
    // 渲染列表项
    this.rowRender = ({
      key,
      index,
      style,
      item
    }) => {
      const {
        needDnd
      } = this.props;
      return !needDnd ? lineItemNormal(this.props, this.state, this.onChecked, {
        key,
        index,
        style
      }) : lineItemHasDnd(this.props, this.state, this.onChecked, {
        item
      }, this.dragEnd, this.dragStart);
    };
    // ----------------------------------------------拖拽---begin------------------------------
    this.dragStart = e => {
      this.dragged = e.currentTarget;
    };
    this.dragEnd = e => {
      const {
        list
      } = this.props;
      let listTemp = cloneDeep(list);
      this.dragged.style.display = 'block';
      e.target.classList.remove('drag-up');
      this.over.classList.remove('drag-up');
      e.target.classList.remove('drag-down');
      this.over.classList.remove('drag-down');
      var from = Number(this.dragged.dataset.id);
      var to = Number(this.over.dataset.id);
      listTemp.splice(to, 0, listTemp.splice(from, 1)[0]);
      listTemp = listTemp.map((doc, index) => {
        doc.newIndex = index + 1;
        return doc;
      });
      this.props.dragOrders(listTemp);
    };
    this.dragOver = e => {
      e.preventDefault();
      this.dragged.style.display = 'none';
      if (e.target.parentElement.parentElement.getAttribute('class') && e.target.parentElement.parentElement.getAttribute('class').trim() === 'list-item') {
        let destTarget = e.target.parentElement.parentElement;
        const dgIndex = JSON.parse(this.dragged.dataset.item).newIndex;
        const taIndex = JSON.parse(destTarget.dataset.item).newIndex;
        const animateName = dgIndex > taIndex ? 'drag-up' : 'drag-down';
        if (this.over && destTarget.dataset.item !== this.over.dataset.item) {
          this.over.classList.remove('drag-up', 'drag-down');
        }
        if (!destTarget.classList.contains(animateName)) {
          destTarget.classList.add(animateName);
          this.over = destTarget;
        }
      }
    };
    // ----------------------------------------------拖拽---end------------------------------
    this.typeSelect = (type, list, e) => {
      console.log(e);
      this.setState({
        buttomType: 'primary'
      });
    };
    this.listRef = /*#__PURE__*/React__default.createRef();
    const {
      checkedKeys: _checkedKeys,
      defaultCheckedIds,
      itemKey: _itemKey,
      list: _list
    } = this.props;
    const {
      checkHalfStatus: _checkHalfStatus,
      checkAllStatus: _checkAllStatus
    } = this.computedCheckStatus(_list, _checkedKeys, _itemKey);
    this.state = {
      isCheckedChange: false,
      isForceUpdate: false,
      activeKey: props.activeKey,
      keywords: props.keywords,
      checkHalfStatus: _checkHalfStatus,
      checkAllStatus: _checkAllStatus,
      checkedKeys: cloneDeep(defaultCheckedIds) || cloneDeep(_checkedKeys) || undefined
    };
  }
  static getDerivedStateFromProps(props, state) {
    const options = {};
    if (props.checkable && !props.checkedKeys && !state.checkedKeys && Array.isArray(props.defaultCheckedIds)) {
      options.checkedKeys = cloneDeep(props.defaultCheckedIds);
      options.isCheckedChange = true;
      options.isForceUpdate = true;
    }
    if (props.checkable && props.checkedKeys && !isEqual(props.checkedKeys, state.checkedKeys)) {
      options.checkedKeys = cloneDeep(props.checkedKeys);
      options.isCheckedChange = true;
      options.isForceUpdate = true;
    }
    if (props.keywords !== undefined && props.keywords !== state.keywords) {
      options.keywords = props.keywords;
      options.isForceUpdate = true;
      options.isCheckedChange = true;
    }
    if (props.activeKey && props.activeKey !== state.activeKey) {
      options.activeKey = props.activeKey;
      options.isForceUpdate = true;
    }
    if (!isEmpty(options)) {
      return options;
    }
    return null;
  }
  componentDidUpdate() {
    if (this.state.isCheckedChange) {
      const {
        checkedKeys
      } = this.state;
      const {
        list,
        itemKey
      } = this.props;
      const {
        checkHalfStatus,
        checkAllStatus
      } = this.computedCheckStatus(list, checkedKeys, itemKey);
      this.setState({
        isCheckedChange: false,
        checkHalfStatus,
        checkAllStatus
      });
    }
    if (this.state.isForceUpdate) {
      this.setState({
        isForceUpdate: false
      });
      this.listRef && this.listRef.current && this.listRef.current.forceUpdateGrid();
    }
  }
  componentWillUnmount() {
    this.listRef = null;
  }
  render() {
    const {
      className = '',
      title = '摄像机列表',
      checkableTitle = '全选',
      list = [],
      // 列表数据
      checkable = true,
      // 是否显示checkbox
      placeholder = '请输入设备名称搜索',
      onChange,
      itemKey = 'id',
      hasHeader = true,
      destoryList,
      needDnd
    } = this.props;
    const {
      checkHalfStatus,
      checkAllStatus,
      checkedKeys
    } = this.state;
    return /*#__PURE__*/React__default.createElement(CBox, {
      className: `lm-c-base-list-wrapper ${className}`
    }, hasHeader && /*#__PURE__*/React__default.createElement(TreeTitle, {
      title: title,
      hasInput: !!onChange,
      onChange: onChange,
      inputPlaceholder: placeholder
    }), (checkable || destoryList) && /*#__PURE__*/React__default.createElement("div", {
      className: "list-checkall"
    }, checkable && /*#__PURE__*/React__default.createElement(Checkbox, {
      indeterminate: checkHalfStatus,
      checked: checkAllStatus,
      onChange: () => this.checkChange(checkAllStatus ? difference(checkedKeys, list.map(v => v[itemKey])) : uniq([].concat(checkedKeys, list.map(v => v[itemKey])))),
      disabled: !list.length
    }, checkableTitle), destoryList && /*#__PURE__*/React__default.createElement(IconFont, {
      type: "icon-S_AID_delete",
      onClick: destoryList
    })), !needDnd ? /*#__PURE__*/React__default.createElement("div", {
      className: "lm-c-base-list-layout"
    }, /*#__PURE__*/React__default.createElement(ListView$1, {
      className: "lm-c-virtual-layout",
      data: list,
      rowHeight: 30,
      rowRenderer: this.rowRender,
      ref: this.listRef
    })) : /*#__PURE__*/React__default.createElement("div", {
      className: "lm-c-base-list-layout",
      onDragOver: this.dragOver.bind(this)
    }, /*#__PURE__*/React__default.createElement(ListView, {
      className: "lm-c-virtual-layout",
      data: list,
      rowHeight: 30,
      rowRenderer: this.rowRender,
      ref: this.listRef
    })));
  }
}
BaseList.defaultProps = {
  itemKey: 'id',
  itemNameKey: 'name'
};

export { BaseList as B };
//# sourceMappingURL=index-fcf1ad06.js.map
