import React, { useState, useEffect } from 'react';
import classnames from 'classnames'
import styles from '../../SchemeConfig.less'
import { Popconfirm, notification, Card, Button, message } from 'antd';
import {
    unbindSchemeBaseMap, GettMaplayer, SetServiceConfig, deleteConfig
} from '@/services/webConfig/api';
import {
    CloseOutlined, PlusOutlined
} from '@ant-design/icons';
import AddModal from '../AddModal'
import MapScope from '@/components/MapScope'
import { createGuid } from '@/utils/transformUtil'
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, baseMapItem) => {
        unbindSchemeBaseMap({ schemename: item.schemename, basemapName: baseMapItem }).then(res => {
            if (res.code === 0) {
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '底图删除成功',
                });
                deletebaseMaps()
            }
            else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: '底图删除失败',
                });
            }

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


    }
    const submitExtent = (extent, areaName, flag ) => {
        if(flag === 0) {
            notification.warn({
                message: '提交失败',
                description: '请框选范围',
              });
            return;
        }
        const jsConfig = {
            extent: extent,
            areaName: areaName,
            boundColor: "#86c8f8",
            boundWidth: "10px",
            backgroundColor: "#000000",
            backgroundOpacity: "0.6"
        }
        SetServiceConfig(
            {
                schemename: item.schemename,
                terminalType: "web",
                isBaseMap: false,
                jsonCfg: JSON.stringify(jsConfig)
            }
        ).then(
            res => {
                if (res.msg === "Ok") {
                    setMapScopeVisible(false)
                    message.info("范围设置成功")
                }
            }
        )

    }
    const pick = (schemename, index) => {
        SetServiceConfig(
            {
                schemename: schemename,
                terminalType: 'scheme',
                isBaseMap: false,
                jsonCfg: JSON.stringify({
                    defaultBaseMap: index,
                })
            }
        ).then(
            res => {
                if (res.msg === "Ok") {
                    deletebaseMaps()
                    message.info('设置成功')
                }
                else{
                    message.warning(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 }}>
                <p><span className={styles.schemeName}>矢量</span>  {props.item.servicename}</p>
                <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(props.item.schemename, baseindex)} className={classnames({
                                [styles.defaultTile]: true,
                                [styles.activeTile]: baseindex == props.item.defaultBaseMap,
                            })}>默认</div>
                            <div className={styles.mapText}>{baseMapItem}</div>
                            <div className={styles.mapIcon}>
                                <Popconfirm
                                    title="是否删除该底图？"
                                    okText="确认"
                                    cancelText="取消"
                                    onConfirm={() => {
                                        deletebaseMap(props.item, baseMapItem);
                                    }}
                                >
                                    <CloseOutlined />
                                </Popconfirm>  </div>
                        </div>
                    }) : ''}
                </div>

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