import React from 'react';
import styles from './index.css';
import {Amap,ArcGIS} from '../../../components/amap/index';
import Video from "./video";
import EditTpl from "../../../components/edit/index";
import {getData} from "../../../api/index";
import LeftMenu from "../../../components/leftMenu";
import Box from '../../../components/Box/index.jsx';

const monitorDataStyle = {
    marginBottom: "10px",
    position: "absolute",
    top: "20px",
    bottom: "160px",
    right: "10px",
    left: "auto",
    height: "auto"
};

export default class iframe extends React.Component {
    state = {
        ToolNavData: {
            data: {
                list: []
            }
        },
        monitorData: {
            data: {
                lsit: []
            }
        },
        nIndex: 0, //当前显示
        monitorItem: {
            url:''
        },
        mapConfig: {
            data: {
                amapkey: '',
                map: {
                    mapStyle: "",
                    center: [
                        106.630153,26.647661
                    ],
                    zoom: 10
                },
                legend: [
                    {
                        name: "31231",
                        icon: 'icon-shucai',
                        color: "#fff"
                    }, {
                        name: "31231",
                        color: "red"
                    }, {
                        name: "31231",
                        icon: 'icon-shucai',
                        color: "red"
                    }
                ],
                covers: [
                    // {
                    //     type: "Polygon",
                    //     style: {
                    //         strokeColor: "#acd9f1",
                    //         strokeOpacity: "0.5",
                    //         fillColor: "#fff",
                    //         fillOpacity: "0.5"
                    //     },
                    //     path: [
                    //         [
                    //             106.627819, 26.64756
                    //         ],
                    //         [
                    //             106.674511, 26.619019
                    //         ],
                    //         [106.617519, 26.613801]
                    //     ]
                    // }
                ]
            }
        }
    }
    getData = ({
        id = "",
        type = ''
    },index) => {
        const {match: {
                params
            },navItem} = this.props,
        obj = {
            ...params,
                    params:{
                        ...navItem
                    },
                    pId:navItem.id,
                    id:id || index
        };
        switch (type) {
            case "map":
                getData({
                    ...obj,
                    port:"ParkDetailAMap"
                }).then(res => {
                    const {code, config} = res;
                    if (!code) {
                        this.setState({mapConfig: config});
                    }
                });
                break;
            case "monitor":
                getData({
                    ...obj,
                    port:"MonitorData"
                }).then(res => {
                    const {
                        code,
                        config,
                        config: {
                            data: {
                                list = []
                            }
                        }
                    } = res;
                    if (!code) {
                        this.setState({monitorData: config});
                        list.length && this.clickMonitor(list[0]);
                    }
                });
                break;
            default:
                break;
        }
    }
    componentWillReceiveProps(props) {
        const {match: {
                params
            },navItem:{
                id
            }} = props,
            {navItem = {}} = this.props;
        id && id != navItem.id && getData({
            port:"MapTooLNav",
            ...params,
            id
        }).then(res => {
            const {code, config} = res;
            if (!code) {
                this.setState({ToolNavData: config});
                this.clickTool(0);
            }
        });
    }
    clickMonitor = item => {
        this.setState({monitorItem: item});
    }
    clickTool = (index) => {
        const {
                data: {
                    list = []
                }
            } = this.state.ToolNavData,
            item = list[index] || {};
        this.getData(item,index);
        this.setState({nIndex: index});
    }
    render() {
        const {
            mapConfig,
            ToolNavData,
            ToolNavData: {
                data: {
                    list = []
                }
            },
            nIndex,
            monitorItem:{
                url:m_url = '',
                accessToken = ''
            },
            monitorData
        } = this.state;
        const {type, url} = (list[nIndex] || {});
        return (
            <Box className={styles.mapBox}>
                {type == 'map'
                    ? <Amap config={mapConfig}><ArcGIS/></Amap>
                    : type == 'link'
                        ? <iframe
                                src={url}
                                className={styles.iframe}
                                scrolling="no"
                                poster={url.split('&$')[1] || ''}
                                allowFullScreen={true}></iframe>
                        : type == 'video'
                            ? <Video src={url}></Video>
                            : type == 'monitor'
                                ? <iframe
                                        ref={this.videoIframe}
                                        src={`/screen/assets/monitor/index.html?src=${encodeURIComponent(m_url)}&token=${accessToken}`}
                                        className={styles.iframe}
                                        scrolling="no"
                                        allowFullScreen={true}></iframe>
                                : ''}
                {type == 'monitor'
                    ? <LeftMenu
                            style={monitorDataStyle}
                            mName={"monitorData"}
                            data={monitorData}
                            click={this.clickMonitor}></LeftMenu>
                    : ''
}
                {!!list.length && <ul className={styles.toolbar}>
                    <EditTpl
                        style={{
                        bottom: "30%"
                    }}
                        data={ToolNavData}
                        upData={ToolNavData => this.setState({ToolNavData})}></EditTpl>
                    {list.map((x, i) => {
                        return (
                            <li
                                key={i}
                                onClick={() => this.clickTool(i)}
                                className={nIndex == i
                                ? styles.activeLink
                                : ''}>
                                <i className={`iconfont ${x.icon}`}></i>
                                <span>{x.name}</span>
                            </li>
                        )
                    })}
                </ul>}
            </Box>
        )
    }
}
