import React, { useState } from 'react';
import { inject, observer } from 'mobx-react';
import ContentBox from '../../../themeComponents/ContentBox';
import OrgTree from '../../../businessComponents/OrgTree';
import PlaceTree from '../../../businessComponents/PlaceTree';
import BaseList from '../../../components/VList/Base';
import CheckList from '../../../components/VList/CheckList';
import DragList from '../../../components/VList/DragList';
import PointsSelect from '../../../businessComponents/PointsSelect';
import './index.less';

function createDatas(num) {
  return Array.from(new Array(num)).map((_, index) => ({ name: `测试${index}`, id: index }));
}

function OrgTreeView({ org, device, place }) {
  const [list, setList] = useState(createDatas(10000));

  function dragOver({ dragIndex, dropIndex }) {
    setList((oList) => {
      const item = oList[dragIndex];
      const l = [...oList];
      l.splice(dragIndex, 1);
      l.splice(dropIndex, 0, item);
      console.log(l);
      return l;
    });
  }

  return (
    <ContentBox className="form-theme-component">
      <div style={{ display: 'flex', height: '100%' }}>
        <OrgTree className="theme-org-tree" treeData={org.orgList} title="组织机构" />
        <PlaceTree className="theme-org-tree" treeData={place.placeList} title="行政区划" />
        <BaseList itemNameKey="deviceName" className="theme-org-tree" list={device.deviceList} destoryList={() => {}} onChange={() => {}} />
        <CheckList itemNameKey="deviceName" className="theme-org-tree" list={device.deviceList} destoryList={() => {}} onChange={() => {}} />
        <DragList itemNameKey="name" className="theme-org-tree" list={list} destoryList={() => {}} onChange={() => {}} dragOver={dragOver} />
      </div>
      <div>
        <PointsSelect />
      </div>
    </ContentBox>
  );
}

export default inject('device', 'org', 'place')(observer(OrgTreeView));
