/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-01-13 10:47:32
 * @LastEditTime: 2022-10-09 14:07:11
 * @LastEditors: dengchao 754083046@qq.com
 */
/* eslint-disable indent */
import { Button, Spin, Empty, Input } from 'antd';
import React, { useState, useEffect } from 'react';
import { OrderedListOutlined } from '@ant-design/icons';
import styles from '../SchemeConfig.less';
import { GetMaplayerByTerminalType, GettMaplayer } from '@/services/webConfig/api';
import AddModal from './AddModal';
import Cards from './components/card';
import SortModal from './SortModal';

const VectorData = props => {
  const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
  const [tileData, setTileData] = useState([]); // 页面初始化数据
  const [nameData, setNameData] = useState([]);
  const [visible, setVisible] = useState(false); // 弹窗
  const [flag, setFlag] = useState(0); // 状态更新
  const [cardFlag, setCardFlag] = useState(false); // 状态更新
  const [type, setType] = useState(''); // 弹窗类型
  const [formObj, setFormObj] = useState({});
  const [keepData, setKeepData] = useState([]);
  const [sortVisible, setSortVisible] = useState(false);
  const [searchValue, setSearchValue] = useState('');
  const { Search } = Input;

  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
  };
  const onDeletebaseMap = value => {
    setCardFlag(false);
    setFlag(flag + 1);
  };
  const handleAdd = () => {
    setType('schemeAdd');
    setVisible(true);
  };
  useEffect(() => {
    renderTile({ filter: searchValue });
  }, [flag]);

  // 获取瓦片数据配置数据
  const renderTile = (params = { filter: '' }) => {
    setTreeLoading(true);
    GetMaplayerByTerminalType({
      terminalType: 'scheme',
      isBaseMap: false,
      ...params,
    }).then(resdata => {
      if (resdata.code == '0') {
        setTreeLoading(false);
        GettMaplayer({ terminalType: 'base', isBaseMap: true }).then(res => {
          if (res.code == '0') {
            let arr = [];
            res.data.general.baseMap.layers.map(i => {
              arr.push(i.servicename);
            });
            setKeepData(arr);
            let list = [];
            resdata.data.map((j, index) => {
              let data = [];
              let aa = [];
              j.baseMap.map(k => {
                if (arr.indexOf(k) != -1) {
                  data.push(k);
                } else {
                  aa.push(k);
                }
              });
              list.push(j.schemename);
              let bb = aa.concat(data);
              let i = bb.indexOf(j.baseMap[j.defaultBaseMap]);
              resdata.data[index].defaultOldBaseMap = j.baseMap;
              resdata.data[index].baseMap = bb;
              resdata.data[index].defaultBaseMap = i;
            });
            setNameData(list);
            setTileData(resdata.data);
          }
        });
      } else {
        setTreeLoading(false);
      }
    });
  };
  useEffect(() => {
    setCardFlag(true);
  }, [tileData]);

  const onOK = () => {
    setFlag(flag + 1);
  };

  const handleSort = () => {
    setSortVisible(true);
  };
  // 搜索
  const handleSearch = text => {
    setFlag(flag + 1);
  };
  // 搜索框改变时存储输入的值
  const handleChange = e => {
    setSearchValue(e.target.value);
  };

  return (
    <>
      <div className={styles.tileBtn}>
        <span style={{ marginLeft: '20px', marginRight: '5px' }}>快速检索</span>
        <Search
          allowClear
          placeholder="请输入方案名或管网"
          onSearch={handleSearch}
          onChange={handleChange}
          value={searchValue}
          enterButton
          style={{ width: '300px', marginRight: '20px' }}
        />
        <Button
          icon={<OrderedListOutlined className={styles.icon} />}
          onClick={() => {
            handleSort();
          }}
          style={{
            verticalAlign: 'middle',
            marginRight: '10px',
          }}
        >
          排序
        </Button>
        <Button
          type="primary"
          onClick={() => {
            handleAdd();
          }}
        >
          新增
        </Button>
      </div>
      <div className={styles.schemeBox}>
        <Spin tip="loading..." spinning={treeLoading}>
          <div style={{ height: 'calc(100%)', width: '100%' }}>
            <div className={styles.cardsList}>
              {/* {console.log(tileData)} */}
              {tileData && tileData.length ? (
                tileData.map((item, index) => (
                  <div
                    className={styles.cardItem}
                    key={index}
                    span={5}
                    offset={2}
                    style={{ marginBottom: '1rem' }}
                  >
                    <Cards
                      item={item}
                      cardFlag={cardFlag}
                      deletebaseMaps={onDeletebaseMap}
                      keepData={keepData}
                      nameData={nameData}
                    />
                  </div>
                ))
              ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ margin: 'auto' }} />
              )}
            </div>
            <AddModal
              visible={visible}
              onCancel={() => setVisible(false)}
              callBackSubmit={onSubmit}
              type={type}
              formObj={formObj}
              keepData={keepData}
              nameData={nameData}
            />
            <SortModal
              title="调整顺序"
              visible={sortVisible}
              sortData={tileData}
              onCancel={() => setSortVisible(false)}
              callBackSubmit={onOK}
            />
          </div>
        </Spin>
      </div>
    </>
  );
};
export default VectorData;