import { Button,Spin } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from '../SchemeConfig.less'
import {
    GetMaplayerByTerminalType
} from '@/services/webConfig/api';
import AddModal from './AddModal'
import Cards from './components/card'
const VectorData = props => {
    const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
    const [tileData, setTileData] = useState([]); // 页面初始化数据
    const [visible, setVisible] = useState(false); // 弹窗
    const [flag, setFlag] = useState(0); // 状态更新
    const [type, setType] = useState(''); // 弹窗类型
    const [formObj, setFormObj] = useState({});


    const onSubmit = prop => {
        setVisible(false);
        setFlag(flag + 1)
    };
    const onDeletebaseMap = (value) => {
        setFlag(flag + 1)
    }
    const handleAdd = () => {
        setType('schemeAdd');
        setVisible(true);
    }
    useEffect(() => {
        renderTile();
    }, [flag]);
    // 获取瓦片数据配置数据
    const renderTile = () => {
        setTreeLoading(true);
        GetMaplayerByTerminalType({
            terminalType: 'scheme',
            isBaseMap: false
        }).then(
            res => {
                console.log('res',res);
                if (res.msg ==='Ok') {
                    setTreeLoading(false);
                    setTileData(res.data.scheme.optionalLayer.layers);
                } else {
                    setTreeLoading(false);

                }
            }
        )
    };
    return (
        <>
         <Spin tip="loading..." spinning={treeLoading}>
            <div style={{ width: 'calc(100vw - 265px)' }}>
                <div className={styles.tileBtn}>
                    <Button type="primary" onClick={() => {
                        handleAdd();
                    }} >
                        新增
                </Button>
                </div>
                <div className={styles.cardsList}>
                    {tileData && tileData.length ?
                        tileData.map((item, index) => {
                            return <div className={styles.cardItem} key={index} span={5} offset={2} style={{ marginBottom: '1rem' }}>
                                <Cards item={item} deletebaseMaps={onDeletebaseMap} ></Cards>
                            </div>
                        }) : ''}
                </div >
                <AddModal
                    visible={visible}
                    onCancel={() => setVisible(false)}
                    callBackSubmit={onSubmit}
                    type={type}
                    formObj={formObj}
                />
            </div>
            </Spin>
        </>
    )
}
export default VectorData