import React from 'react';
import { Tree, Button, Modal, Form, Input, Radio, message } from 'antd';
import axios from 'axios';
import {
  DownOutlined,
  EyeOutlined,
  EyeInvisibleOutlined,
} from '@ant-design/icons';
import SetLogoImagePath from './SetLogoImagePath'
import { createLayer } from '../../../api';
import '../../../index.less';

class LayerData extends React.Component {
    constructor () {
        super ();
        this.state = {
            treeData: [],
            layerId: '',
            isModalOpen: false,
            addLayer: {
                id: 0,
                logoImageColor: 'gray',
                logoImagePath: '',
                name: '',
                note: '',
            },
            selectLayerList: [],
        }
    }

    // 获取基础图层菜单栏
    getBasicLayerMenu = (adcode) => {
        return axios.get('/api/basicMap/getBasicLayerMenu', {
            params: {
                adcode: adcode
            }
        }).then((e) => {
            let basicLayeData = e.data.data;
            let basicLayeList = [];
            for (var i in basicLayeData) {
                basicLayeList.push({
                    key: basicLayeData[i].id,
                    title : basicLayeData[i].name,
                    selectable: false,
                    children: this.getLayerList(basicLayeData[i].layerList),
                })
            }
            this.setState ({
                treeData: basicLayeList
            })
        });
    }
    getLayerList = (layerList, i) => {
        var cLayerList = [];
        for (let i in layerList) {
            cLayerList.push({
                'key': i + '-' + layerList[i].id + '-' + new Date(),
                'title': layerList[i].name + '(' + layerList[i].geoUnitAmount + ')',
                'icon': ({ selected }) => (selected ? [<EyeOutlined key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]
                     : [<EyeInvisibleOutlined key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath}  key={new Date().getTime() + 1}/>]),
                'type': layerList[i].type,
                'isCustomize': layerList[i].isCustomize,
            })
        }
        return cLayerList;
    }
    //新建点位后修改涂层数量
    changeUnitAmount = (layerId) => {
        let treeData = this.state.treeData;
        for (let i in treeData) {
            for (let j in treeData[i].children) {
                if (layerId == treeData[i].children[j].key.split('-')[1]) {
                    treeData[i].children[j].title = 'ooo' ;
                }
            }
        }
        this.setState ({
            treeData: treeData
        })
    }
    // 选中图层
    onLayerSelect = (selectedKeys, info) => {
        let selectLayerList = [];
        let layerId = info.node.key.split('-')[1];
        for (let i in info.selectedNodes) {
            selectLayerList.push({
                'value': info.selectedNodes[i].key.split('-')[1],
                'label': info.selectedNodes[i].title,
                'isCustomize': info.selectedNodes[i].isCustomize,
            })
        }
        this.setState({
            layerId: layerId,
            selectLayerList: selectLayerList,
        })
        if (info.node.type === 1 || info.node.type === 4) {
            this.props.getLayerPoints(layerId, info.selected, info.node.type);
        } else if (info.node.type === 2) {
            this.props.getLayerShapes(layerId, info.selected);
        }
    }
    //弹出框事件
    showModal = () => {
        this.setState({
            isModalOpen: true
        });
    };
    handleOk = (values) => {
        let self = this;
        let treeData = this.state.treeData
        if (this.state.addLayer.id != 0) { //编辑图层
            updateLayer({
                id: this.state.addLayer.id,
                logoImagePath: this.state.addLayer.logoImagePath,
                name: this.state.addLayer.name,
                note: this.state.addLayer.note,
            }).then((e) => {
                this.setState({
                    isModalOpen: false
                });
            })
        } else {
            createLayer({ //创建图层
                // id: this.state.addLayer.id,
                cityAdcode: this.props.adcode.cityAdcode,
                districtAdcode: this.props.adcode.districtAdcode,
                logoImagePath: this.state.addLayer.logoImagePath,
                name: this.state.addLayer.name,
                note: this.state.addLayer.note,
            }).then((e) => {
                if (e.success) {
                    message.success(e.message || '图层创建成功!');
                    this.setState({
                        isModalOpen: false
                    });
                } else {
                    message.error(e.message || '图层创建失败！');
                }
            }).then(() => {
                let filter = self.props.adcode.districtAdcode || self.props.adcode.cityAdcode;
                self.getBasicLayerMenu(filter)
            })
        }
    };
    handleCancel = () => {
        this.setState({
            isModalOpen: false
        });
    };
    onLayerNameChange = (e) => {
        this.setState({
            addLayer: {
                id: this.state.addLayer.id,
                logoImagePath: this.state.addLayer.logoImagePath,
                note: this.state.addLayer.note,
                name: e.target.value,
                logoImageColor: this.state.addLayer.logoImageColor
            }
        })
    };
    onLayerNoteChange = (e) => {
        this.setState({
            addLayer: {
                id: this.state.addLayer.id,
                logoImagePath: this.state.addLayer.logoImagePath,
                name: this.state.addLayer.name,
                note: e.target.value,
                logoImageColor: this.state.addLayer.logoImageColor
            }
        })
    };
    onLayerIconColorChange = (e) => {
        debugger
        this.setState({
            addLayer: {
                id: this.state.addLayer.id,
                note: this.state.addLayer.note,
                name: this.state.addLayer.name,
                logoImagePath: this.state.addLayer.logoImagePath,
                logoImageColor: e.target.value
            }
        })
    };
    onLayerIogoImagePathChange = (e) => {
                this.setState({
            addLayer: {
                id: this.state.addLayer.id,
                note: this.state.addLayer.note,
                name: this.state.addLayer.name,
                logoImagePath: e.target.value,
                logoImageColor: this.state.addLayer.logoImageColor
            }
        })
    };
    //弹出框事件

    render() {
        return (
            <div className='layer-data-wrap'>
                <Tree
                    multiple
                    showIcon
                    defaultSelectedKeys={[]}
                    switcherIcon={<DownOutlined />}
                    treeData={this.state.treeData}
                    onSelect={this.onLayerSelect}
                />
                <Button type='primary' id='add-layer' className={this.state.treeData.length > 0 ? 'showItem' : 'hideItem'}
                onClick={this.showModal}>新建图层</Button>
                <Modal title="新建图层" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} className='edit-layer-modal'>
                    <Form name='base' id='edit-layer-form' onFinish={this.handleOk}>
                        <Form.Item label="图层名称"
                        rules={[
                            {
                                required: true,
                                message: '请输入图层名称!',
                            }
                        ]}>
                            <Input name='id' type='hidden' value={this.state.addLayer.id}/>
                            <Input name='name' value={this.state.addLayer.name} onChange={this.onLayerNameChange}/>
                        </Form.Item>
                        <Form.Item label="图层图标" rules={[
                            {
                                required: true,
                                message: '请选择图层图标!',
                            }
                        ]}>
                            <Radio.Group id='redio-btn-color-group' onChange={this.onLayerIconColorChange}>
                                <Radio.Button name='logoColor' value='red' className='radio-btn-color color-01'></Radio.Button>
                                <Radio.Button name='logoColor' value='yellow' className='radio-btn-color color-02'></Radio.Button>
                                <Radio.Button name='logoColor' value='green' className='radio-btn-color color-03'></Radio.Button>
                                <Radio.Button name='logoColor' value='blue' className='radio-btn-color color-04'></Radio.Button>
                                <Radio.Button name='logoColor' value='cyan' className='radio-btn-color color-05'></Radio.Button>
                                <Radio.Button name='logoColor' value='pink' className='radio-btn-color color-06'></Radio.Button>
                                <Radio.Button name='logoColor' value='white' className='radio-btn-color color-07'></Radio.Button>
                                <Radio.Button name='logoColor' value='gray' className='radio-btn-color color-08'></Radio.Button>
                                <Radio.Button name='logoColor' value='black' className='radio-btn-color color-09'></Radio.Button>
                            </Radio.Group>
                            <Radio.Group id='redio-btn-group' onChange={this.onLayerIogoImagePathChange}>
                                <Radio.Button name='logoImagePath' value={`iconPoint01_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint01-${this.state.addLayer.logoImageColor}`}></Radio.Button>
                                <Radio.Button name='logoImagePath' value={`iconPoint02_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint02-${this.state.addLayer.logoImageColor}`}></Radio.Button>
                                <Radio.Button name='logoImagePath' value={`iconPoint03_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint03-${this.state.addLayer.logoImageColor}`}></Radio.Button>
                                <Radio.Button name='logoImagePath' value={`iconPoint04_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint04-${this.state.addLayer.logoImageColor}`}></Radio.Button>
                                <Radio.Button name='logoImagePath' value={`iconPoint05_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint05-${this.state.addLayer.logoImageColor}`}></Radio.Button>
                                <Radio.Button name='logoImagePath' value={`iconPoint06_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint06-${this.state.addLayer.logoImageColor}`}></Radio.Button>
                                <Radio.Button name='logoImagePath' value={`iconPoint07_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint07-${this.state.addLayer.logoImageColor}`}></Radio.Button>
                                <Radio.Button name='logoImagePath' value={`iconPoint08_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint08-${this.state.addLayer.logoImageColor}`}></Radio.Button>
                                <Radio.Button name='logoImagePath' value={`iconPoint09_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint09-${this.state.addLayer.logoImageColor}`}></Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="图层备注">
                            <Input.TextArea name='note' value={this.state.addLayer.note} onChange={this.onLayerNoteChange} 
                            style={{height: '120px'}}/>
                        </Form.Item>
                    </Form>
                </Modal>
            </div >
        );
    }
}
export default LayerData