import { w as appContext, i as __read, h as __spreadArray, cc as Button } from './MapEditView-67426f04.js';
import React__default, { useRef } from 'react';
import { B as BottomWrapper } from './BottomWrapper-bce78582.js';
import { I as Input } from './index-8a362310.js';
import { C as Checkbox } from './index-4700627d.js';
import { observer } from 'mobx-react';
import { useVirtualList } from 'ahooks';
import 'maptalks';
import 'lodash';
import 'uuid';
import 'mobx';
import 'lz-string';
import 'dayjs';
import 'react-dom';
import 'classnames';
import 'react-is';
import '@loadable/component';
import 'js-beautify';
import 'axios';
import 'superstruct';
import '@tanem/react-nprogress';
import 'jquery';
import 'chroma-js';
import 'js-cookie';
import 'is-email';
import 'is-uuid';
import 'is-url';
import 'anymatch';
import 'perf-request';
import '@syncpoint/wkx';
import 'buffer';
import '@turf/turf';
import '@mapbox/polylabel';
import 'turf-multipolygon';
import 'turf-polygon';
import 'gcoord';
import 'eventemitter2';
import 'geobuf';
import 'localforage';
import 'rc-menu';
import 'perfect-scrollbar';
import 'jszip';
import 'file-saver';
import 'screenfull';
import 'sql-formatter-fork';
import 'array-move';
import 'turf-multilinestring';
import 'copy-to-clipboard';
import 'maptalks.three';
import 'ajv';
import 'spark-md5';
import 'react-draggable';
import 'react-virtualized';
import 'turf-point';
import 'decamelize';
import 'rbush';
import 'qs';
import 'maptalks.snap';
import 'react-use';
import 'react-rnd';
import 'react-beautiful-dnd';
import './Spin-91879212.js';

var FenceSingleList = observer(function () {
    var Context = appContext.getContext();
    var value = React__default.useContext(Context);
    var routeStore = value.routeStore; value.prefixCls;
    var onSearch = routeStore.onSearch, setFenceSingleList = routeStore.MobileUIStore.setFenceSingleList, _a = routeStore.GeoFiltersStore, geoData = _a.geoData, selectedGeo = _a.selectedGeo, setSelectedGeo = _a.setSelectedGeo;
    var containerRef = useRef(null);
    var wrapperRef = useRef(null);
    var _b = __read(useVirtualList((geoData === null || geoData === void 0 ? void 0 : geoData.features) || [], {
        containerTarget: containerRef,
        wrapperTarget: wrapperRef,
        itemHeight: 50,
        overscan: 5,
    }), 1), list = _b[0];
    return (React__default.createElement(BottomWrapper, { title: "\u56F4\u680F\u7B5B\u9009", iconClick: function () {
            setFenceSingleList(false);
        } },
        React__default.createElement("div", { className: "dm-map-mobile-fence-single-list" },
            React__default.createElement(Input, { className: "pointer-events-auto pl12", placeholder: "\u641C\u7D22\u56F4\u680F", bordered: false }),
            React__default.createElement("div", { className: "pointer-events-auto dm-map-mobile-fence-single-list-item" },
                React__default.createElement(Checkbox, { indeterminate: selectedGeo.length > 0 && selectedGeo.length < list.length, checked: selectedGeo.length === list.length, onChange: function () {
                        if (selectedGeo.length === list.length) {
                            setSelectedGeo([]);
                        }
                        else {
                            setSelectedGeo(list.map(function (ele) { var _a; return (_a = ele === null || ele === void 0 ? void 0 : ele.data) === null || _a === void 0 ? void 0 : _a.properties.id; }));
                        }
                    } }, "\u5168\u9009")),
            React__default.createElement("div", { ref: containerRef, style: { height: '300px', overflow: 'auto' } },
                React__default.createElement("div", { ref: wrapperRef, className: "pointer-events-auto" }, list.map(function (ele) {
                    var _a, _b;
                    console.log(ele, 'ele');
                    var checked = selectedGeo.includes((_a = ele === null || ele === void 0 ? void 0 : ele.data) === null || _a === void 0 ? void 0 : _a.properties.id);
                    return (React__default.createElement("div", { key: ele.index, className: "dm-map-mobile-fence-single-list-item" },
                        React__default.createElement(Checkbox, { checked: checked, onChange: function () {
                                var _a;
                                var id = (_a = ele === null || ele === void 0 ? void 0 : ele.data) === null || _a === void 0 ? void 0 : _a.properties.id;
                                if (checked) {
                                    setSelectedGeo(selectedGeo.filter(function (ele) { return ele !== id; }));
                                }
                                else {
                                    setSelectedGeo(__spreadArray(__spreadArray([], __read(selectedGeo), false), [id], false));
                                }
                            } }, (_b = ele === null || ele === void 0 ? void 0 : ele.data) === null || _b === void 0 ? void 0 : _b.properties.name)));
                }))),
            React__default.createElement("div", { className: "dm-map-mobile-fence-single-list-bottom" },
                React__default.createElement(Button, { style: { flex: 1 }, onClick: function () {
                        setFenceSingleList(false);
                    } }, "\u53D6\u6D88"),
                React__default.createElement(Button, { style: { flex: 1 }, type: "primary", onClick: function () {
                        onSearch();
                        setFenceSingleList(false);
                    } }, "\u786E\u8BA4")))));
});

export { FenceSingleList as default };
