import React, {Component} from 'react'
import './ExampleFwyPage.css'
import {Bp, GIS} from "iclient3d-plot-diy";
import {Button} from "antd";

export default class ExampleDefaultSelectPage extends Component {
    drawOps = [];

    constructor(props) {
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>',
            bp: null,
            clickBpIndex: -1,
        };
    }

    options = [
        {
            "bz": true,
            "bzlx": "simple",
            "jbwb": "R:00017",
            "type": 2002,
            "code": "draw_primitive_1000_",
            "useModify": false,
            "lon": 102.73181802939419,
            "lat": 30.982754659441543,
            "height": 0
        },
        {
            "bz": true,
            "bzlx": "detail",
            "jbwb": "R:00017",
            "type": 2002,
            "xbwb": "17/10/2019\n16:45:8\n9260.00-10400.00MHZ",
            "code": "draw_primitive_1001_",
            "useModify": false,
            "lon": 102.74521918551825,
            "lat": 30.982390144247127,
            "height": 0
        }, {
            useModify: false,
            type: "fwy",
            bjs: [1, 2, 3],
            "lon": 102.75521918551825,
            "lat": 30.972390144247127,
            "height": 0
        }
    ]

    componentDidMount() {
        this.showData();

        fetch('./example/ExampleDefaultSelectPage.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            });

        //监听拨盘事件
        this.mapFunction.addBpListener((code, dom, drawObj, obj) => {
            if (code && dom) {
                dom.innerHTML = '';
                const newElement = document.createElement('canvas');
                newElement.id = 'bpCanvas';
                dom.append(newElement);

                const bpConfig = {
                    canvasId: 'bpCanvas',
                    items: [
                        {name: '图标1', img: './project3d/icon/bpImgs/icon-1.png'},
                        {name: '图标2', img: './project3d/icon/bpImgs/icon-2.png'},
                        {name: '图标3', img: './project3d/icon/bpImgs/icon-3.png'},
                        {name: '关闭拨盘', img: './project3d/icon/bpImgs/icon-4.png'},
                    ]
                };
                this.setState({
                    bp: new Bp(bpConfig)
                })
                this.state.bp.createBp();
                this.state.bp.listenClick((index) => {
                    this.setState({
                        clickBpIndex: index
                    });
                    if (index === 3) {
                        this.mapFunction.closeBp();
                    } else {
                        alert('点击了第' + (index + 1) + '个面板')
                    }
                });
            }
        });
    }

    showData() {

        let op = {
            useModify: true,
            type: "fwy",
            bjs: [1, 2, 3, 4, 5, 6]
        }
        this.mapFunction.mapApiService.draw(op);
        this.mapFunction.mapApiService.showDrawDatas(this.options);
    }

    openEdit() {
        this.mapFunction.openDefaultSelectedEdit();
        alert('已打开编辑')
    }

    closeEdit() {
        this.mapFunction.closeDefaultSelectedEdit();
        alert('已关闭编辑')
    }
    openDefaultShowPropertyPanel() {
        this.mapFunction.openDefaultShowPropertyPanel();
        alert('已打开属性面板')
    }

    closeDefaultShowPropertyPanel() {
        this.mapFunction.closeDefaultShowPropertyPanel();
        alert('已关闭属性面板')
    }

    closeBp() {
        this.state.bp && this.state.bp.removeCanvasListener();
        this.setState({
            bp: null,
            clickBpIndex: -1
        })
        this.mapFunction.closeBp();
    }


    render() {
        return (
            <div className={"example_fwy_container"}>
                <h3>默认选中</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={true}
                         defaultShowPropertyPanel={false}
                         defaultSelectedEdit={false}
                    />
                </div>
                <Button type="primary" onClick={this.closeEdit.bind(this)}>关闭编辑功能</Button>
                <Button type="primary" onClick={this.openEdit.bind(this)}>打开编辑功能</Button>
                <Button type="primary" onClick={this.closeDefaultShowPropertyPanel.bind(this)}>关闭编辑面板</Button>
                <Button type="primary" onClick={this.openDefaultShowPropertyPanel.bind(this)}>打开编辑面板</Button>

                <Button type="primary" onClick={this.closeBp.bind(this)}>关闭拨盘</Button>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}