import React, { useState, useEffect } from 'react';
import classnames from 'classnames'
import styles from '../../dimensionsConfig.less'
import { Popconfirm, notification, Card, Button, message, Tooltip } from 'antd';
import {
    SchemaMapSettings, DeleteSchemaBaseMap, GetBaseMapList, DeleteSchema, SchemaSettingIsActive
} from '@/services/webConfig/api';
import {
    CloseOutlined, PlusOutlined
} from '@ant-design/icons';
import AddModal from '../AddModal'
import MapScope from '@/components/ThreeMapScope'
import { createGuid } from '@/utils/transformUtil'
import DemoTest from './demoTest'
const CardData = props => {
    const { deletebaseMaps = () => { }, item } = props;
    const [visible, setVisible] = useState(false); // 弹窗
    const [flag, setFlag] = useState(0); // 状态更新
    const [type, setType] = useState(''); // 弹窗类型
    const [formObj, setFormObj] = useState({});
    const [serviceList, setServiceList] = useState([]);
    const [mapScopeVisible, setMapScopeVisible] = useState(false)
    //删除瓦片
    const deletebaseMap = (item, type) => {
        DeleteSchemaBaseMap({ schemename: item.schemename, type }).then(res => {
            if (res.msg === '') {
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '底图删除成功',
                });
                deletebaseMaps()
            }
            else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                });
            }

        })
    }
    //删除方案
    const deleteTile = (item) => {
        DeleteSchema({
            schemename: item.schemename,
        }).then(res => {
            if (res.msg === "") {
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '方案删除成功',
                });
                deletebaseMaps()
            }
            else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: '方案删除失败',
                });
            }
        })
    }
    const onSubmit = prop => {
        setVisible(false);
        deletebaseMaps()
    };
    //增加瓦片
    const addTile = (value) => {
        console.log(value, 'value');
        let serverList = [], newArr = []
        value.baseMap.map(item => {
            newArr.push(item.baseMap.name)
        })
        setFormObj(value);
        if (JSON.stringify(value) != "{}") {
            GetBaseMapList().then(res => {
                if (res.msg === 'Ok') {
                    res.data.map(item => {
                        if (newArr.indexOf(item.name) == -1) {
                            serverList.push(item.type)
                        }
                    })
                }
                if (serverList.length) {
                    setServiceList(serverList)
                    setType('add');
                    setVisible(true);
                }
                else {
                    notification.warning({
                        message: '提示',
                        duration: 3,
                        description: '请先在基础配置-配置底图',
                    });
                }
            })
        }


    }

    const pick = (type) => {
        SchemaSettingIsActive({
            schemename: item.schemename,
            type
        }).then(res => {
            if (res.msg === "") {
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '底图切换成功',
                });
                deletebaseMaps()
            }
            else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                });
            }
        })
    }
    const submitExtent = (mapSettings) => {
        SchemaMapSettings(
            {
                schemename: item.schemename,
                mapSettings
            }
        ).then(
            res => {
                if (res.msg === "") {
                    setMapScopeVisible(false)
                    message.info("范围设置成功")
                    deletebaseMaps()
                }
                else {
                    notification.warning({
                        message: '提示',
                        duration: 3,
                        description: res.msg,
                    });
                }
            }
        )

    }
    return (
        <>
            <Card title={<div><span className={styles.schemeName}>方案名</span>{props.item.schemename}</div>} extra={<a href="#">
                <Popconfirm
                    title="是否删除该方案?"
                    okText="确认"
                    cancelText="取消"
                    onConfirm={() => {
                        deleteTile(props.item);
                    }}
                >
                    <CloseOutlined />
                </Popconfirm> </a>} style={{ width: 300 }}>
                <div style={{ display: 'flex', marginBottom: '0.5rem' }}><span className={styles.schemeName}>矢量</span>
                    <Tooltip title={props.item.data.length ? props.item.data.map((item, index) => {
                        return index == props.item.data.length - 1 ? item.id : item.id + ','
                    }) : ''}>
                        <div style={{
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            width: '13rem'
                        }}>{props.item.data.map((item, index) => {
                            return index == props.item.data.length - 1 ? item.id : item.id + ','
                        })}</div>
                    </Tooltip> </div>
                <div>
                    <span className={styles.schemeName}>范围</span>
                    <Button style={{ width: '12rem', marginBottom: '0.5rem' }} onClick={() => setMapScopeVisible(true)}>选择范围</Button>
                </div>
                <div className={styles.schemeItem}><span className={styles.schemeName}>瓦片</span>
                    <Button className={styles.schemeBtn} onClick={() => addTile(props.item)}> <PlusOutlined />添加瓦片</Button>
                </div>
                <div style={{ overflowY: 'scroll', maxHeight: '11.4rem' }}>
                    {props.item.baseMap && props.item.baseMap.length ? props.item.baseMap.map((baseMapItem, baseindex) => {
                        return <div className={styles.mapItem} key={baseindex} >
                            <div onClick={() => pick(baseMapItem.baseMap.type)} className={classnames({
                                [styles.defaultTile]: true,
                                [styles.activeTile]: baseMapItem.status === 'active',
                            })}>默认</div>
                            <div className={styles.mapText}>{baseMapItem.baseMap.name}</div>
                            <div className={styles.mapIcon}>
                                <Popconfirm
                                    title="是否删除该底图?"
                                    okText="确认"
                                    cancelText="取消"
                                    onConfirm={() => {
                                        deletebaseMap(props.item, baseMapItem.baseMap.type);
                                    }}
                                >
                                    <CloseOutlined />
                                </Popconfirm>  </div>
                        </div>
                    }) : ''}
                </div>

            </Card>
            <AddModal
                visible={visible}
                onCancel={() => setVisible(false)}
                callBackSubmit={onSubmit}
                type={type}
                serviceList={serviceList}
                formObj={formObj}
            />
            <MapScope
                visible={mapScopeVisible}
                onCancel={() => setMapScopeVisible(false)}
                confirmModal={submitExtent}
                item={props.item}
                handleType = 'update'
            />
        </>
    )
}
export default CardData