import { Space, Table, Button, Popconfirm, notification, Spin, Modal } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from '../dimensionsConfig.less'
import {
    GetBaseMapList,
    DeleteBaseMap,
    GetSchemaBaseMapIsLast
} from '@/services/webConfig/api';
import AddModal from './AddModal'
const TileData = props => {
    const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
    const [tileData, setTileData] = useState([]); // table表格数据
    const [visible, setVisible] = useState(false); // 弹窗
    const [type, setType] = useState(''); // 弹窗类型
    const [formObj, setFormObj] = useState({});
    const [flag, setFlag] = useState(0); // 弹窗类型
    const [baseMap, setBaseMap] = useState([]); //底图数据
    const [delVisible, setDelVisible] = useState(false); // 弹窗
    const [records, setRecords] = useState({}); // 弹窗
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center'
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            align: 'center'
        },
        {
            title: '透明度',
            dataIndex: 'opacity',
            key: 'opacity',
            align: 'center'
        },
        {
            title: 'url',
            dataIndex: 'url',
            key: 'url',
            align: 'center',
            with: 400
        },
        {
            title: '编辑',
            align: 'center',
            render: (text, record) => (
                <Space>
                    <Button
                        type="primary"
                        size="small"
                        onClick={() => {
                            changebaseMap(record);
                        }}
                    >
                        编辑
                    </Button>
                    <div onClick={e => e.stopPropagation()}>
                        <Popconfirm
                            title="是否删除该底图？"
                            okText="确认"
                            cancelText="取消"
                            onConfirm={() => {
                                delConfirm(record);
                            }}
                        >
                            <Button size="small" danger>
                                删除
                            </Button>
                        </Popconfirm>
                    </div>
                </Space>
            ),
        },

    ];

    const changebaseMap = (record) => {
        setType('edit');
        setFormObj(record);
        setVisible(true);
    }
    const onSubmit = prop => {
        setVisible(false);
        setFlag(flag + 1)
    };

    const delConfirm = (record) => {
        setRecords(record)
        GetSchemaBaseMapIsLast({ type: record.type }).then(res => {
            if (res.code === 0 && !res.data) {
                setTreeLoading(true);
                DeleteBaseMap({
                    type: record.type
                }).then(res => {
                    setFlag(flag + 1)
                    setTreeLoading(false);
                    if (res.msg === '') {
                        // form.resetFields();
                        // callBackSubmit();
                        notification.success({
                            message: '提示',
                            duration: 3,
                            description: res.message || '删除成功',
                        });
                    } else {
                        notification.error({
                            message: '提示',
                            duration: 3,
                            description: res.message || '删除失败',
                        });
                    }
                }).catch(err => {
                    setFlag(flag + 1)
                    setTreeLoading(false);
                })
            }
            else if (res.code === 0 && res.data) {
                setDelVisible(true)
            }
        })

    }
    const handleAdd = () => {
        if (baseMap.length) {
            setType('add');
            setVisible(true);
        }
        else {
            notification.warning({
                message: '提示',
                duration: 3,
                description: '地图类型已都存在,可编辑修改',
            });
        }

    }
    useEffect(() => {
        renderTile();
    }, [flag]);
    // 获取瓦片数据配置数据
    const renderTile = () => {
        setTreeLoading(true);
        const baseMapData = ['高德街道', '高德影像', '天地图街道', '天地图影像','百度街道','百度影像', 'mapBox地图', 'arcgis地图']
        GetBaseMapList().then(
            res => {
                if (res.msg === "Ok") {
                    console.log('res', res.data);
                    setTreeLoading(false);
                    setTileData(res.data);
                    res.data.map((item) => {
                        let index = baseMapData.indexOf(item.name);
                        if (index != -1) {
                            baseMapData.splice(index, 1);
                        }
                    })
                    setBaseMap(baseMapData)
                } else {
                    setTreeLoading(false);
                    notification.error({
                        message: '获取失败',
                        description: res.message,
                    });
                }
            }
        )
    };
    const handleOk = () => {
        DeleteBaseMap({
            type: records.type
        }).then(res => {
            setFlag(flag + 1)
            setTreeLoading(false);
            if (res.msg === '') {
                // form.resetFields();
                // callBackSubmit();
                setDelVisible(false)
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: res.message || '删除成功',
                });
            } else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.message || '删除失败',
                });
            }
        }).catch(err => {
            setFlag(flag + 1)
            setTreeLoading(false);
        })
    }
    return (
        <>
            <Spin tip="loading..." spinning={treeLoading}>
                <div className={styles.tileBtn}>
                    <Button type="primary" onClick={() => {
                        handleAdd();
                    }} >
                        新增
                    </Button>
                </div>
                <Table
                    columns={columns}
                    dataSource={tileData}
                    bordered
                    rowKey="type"
                    scroll={{ y: 400 }}
                    pagination={{
                        showTotal: (total, range) =>
                            `第${range[0]}-${range[1]} 条/共 ${total} 条`

                    }}
                >
                </Table>
                <Modal
                    title="删除"
                    visible={delVisible}
                    onOk={handleOk}
                    onCancel={() => setDelVisible(false)}
                >
                    <p>有方案唯一地图为此地图，删掉此地图，方案也会被删掉，确认是否删除</p>
                </Modal>
                <AddModal
                    visible={visible}
                    onCancel={() => setVisible(false)}
                    callBackSubmit={onSubmit}
                    type={type}
                    formObj={formObj}
                    baseMap={baseMap}
                />
            </Spin>
        </>
    )
}
export default TileData