<template>
    <div class="edit-view" ref="container">
        <div class="edit-view__content-wrapper">
            <div class="edit-view__content-section">
                <div id="map" style="width: 100%; height:100%"></div>

                <el-dialog :title="companyInfo.org_name" width="500px" center :visible.sync="showInfo">
                    <template #title>
                        <div class="box-title">
                            <img :src="companyInfo.logo" alt="" />
                            <span>{{ companyInfo.org_name }}</span>
                        </div>
                    </template>

                    <div class="form-info">
                        <span class="name">企业介绍：</span>
                        <span class="val">{{ companyInfo.intro }}</span>
                    </div>
                    <div class="form-info">
                        <span class="name">企业法人：</span>
                        <span class="val">{{ companyInfo.contact_na }}</span>
                    </div>
                    <div class="form-info">
                        <span class="name">企业类型：</span>
                        <span class="val">{{ companyInfo.org_type }}</span>
                    </div>
                    <div class="form-info">
                        <span class="name">企业地址：</span>
                        <span class="val">{{ companyInfo.address_de }}</span>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import { Map, View } from 'ol';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import ImageLayer from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS';
import { fromLonLat } from 'ol/proj';
import Projection from 'ol/proj/Projection';
import axios from 'axios';

export default {
    data() {
        return {
            companyInfo: {
                id: 11902,
                created_at: '',
                created_by: '管理员(1)',
                modified_a: '',
                modified_b: '管理员(1)',
                address: '江西南昌',
                address_de: '江西省南昌经济技术开发区双港西大街528号',
                attach: '',
                contact_em: '',
                contact_id: '',
                contact_na: '余绍华',
                contact_ph: '',
                intro:
                    '研制生产航空航天器通信测控设备、特种专测设备和地面设备，语言电教设备、通讯设备、航空机电、电子电脑、工业和文化办公自动化设备、仪表仪器、通信设备的技术开发、转让、咨询、服务；机械加工、计算机软件开发、应用服务、电视电缆系统工程、音像设备及产品制造。（依法',
                license: '',
                org_name: '江西航天海虹测控技术有限责任公司',
                org_type: '高新技术企业',
                parent_org: '南昌经济技术开发区市场监督管理局',
                public_com: '0',
                remark: '',
                state: '',
                user_id: 11838,
                industry: '',
                loge: '',
                uscc: '',
                logo: 'https://image.qcc.com/auto/5f28de08d359c58c3cc2654f539cfb33.jpg',
                status: 'PASS',
                audit_time: '',
                location: '115.847722,28.746426',
                x: 115.847722,
                y: 28.746426
            },
            showInfo: false
        };
    },
    mounted() {
        setTimeout(() => {
            this.initMap();
        }, 2000);
    },
    methods: {
        initMap() {
            var untiled1 = new ImageLayer({
                source: new ImageWMS({
                    ratio: 1,
                    url: 'https://10.5.23.172/geoserver/nc/wms',
                    crossorigin: 'anonymous',
                    params: {
                        FORMAT: 'image/png',
                        VERSION: '1.1.1',
                        exceptions: 'application/vnd.ogc.se_inimage',
                        LAYERS: 'nc:jxdt',
                        SRS: 'EPSG%3A3857'
                    }
                })
            });
            var untiled2 = new ImageLayer({
                source: new ImageWMS({
                    url: 'https://10.5.23.172/geoserver/nc/wms',
                    params: {
                        FORMAT: 'image/png',
                        VERSION: '1.1.1',
                        LAYERS: 'nc:poi',
                        exceptions: 'application/vnd.ogc.se_inimage'
                    }
                })
            });
            var map = new Map({
                target: 'map',
                layers: [
                    new TileLayer({
                        source: new OSM()
                    }),
                    untiled1,
                    untiled2
                ],
                view: new View({
                    center: [12898853.98345, 3346484.5321],
                    zoom: 11,
                    minZoom: 7,
                    maxZoom: 15
                })
            });

            map.on('singleclick', evt => {
                var view = map.getView();
                var viewResolution = view.getResolution();
                console.log(untiled2.get('visible'));
                var source = untiled2.get('visible') ? untiled2.getSource() : untiled1.getSource();
                var url = source.getGetFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857', {
                    INFO_FORMAT: 'application/json'
                });
                axios.get(url).then(res => {
                    console.log(res);
                    if (res.data.features.length > 0) {
                        this.companyInfo = res.data.features[0].properties;
                        this.showInfo = true;
                    }
                });
            });
        }
    }
};
</script>

<style lang="less" scoped>
.edit-view__content-section {
    height: 100%;
    box-sizing: border-box;
    padding: 0 !important;
    position: relative;

    .company-box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 500px;
        height: 300px;
        z-index: 30;
        background-color: #fff;
        border-radius: 10px;
        transform: translate(-50%, -50%);
    }
}
/deep/.el-dialog {
    background-color: #00000090;
    border-radius: 10px;
}
.box-title {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
        width: 40px;
        height: 40px;
    }

    span {
        margin-left: 12px;
        color: #fff;
    }
}

.form-info {
    margin-bottom: 12px;
    .name {
        display: inline-block;
        margin-right: 12px;
        color: #fff;
    }
    .val {
        color: #ffffff99;
    }
}
</style>
