<template>
    <div class="map-1">
        <div class="btn-group-tabs">
            <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
        </div>
        <div class="panel-title">
            <div class="panel-title-name">
                <span class="svg-icon svg-icon-green svg-icon-sm">
                    <SvgIcon svgid="svg-wind-site"></SvgIcon>
                </span>
                <span class="green">某某某风电场</span>
                <div class="sub-title-item green">
                    <span class="sub-title">aaaa</span>
                    <span class="sub-count">56</span>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div id="map-1" dojotype="dijit.layout.ContentPane" region="center"></div>
        </div>
    </div>
</template>

<script>
    import Map from "@arcgis/core/Map";
    import MapView from "@arcgis/core/views/MapView";
    import MapImageLayer from "@arcgis/core/layers/MapImageLayer";
    import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
    import SvgIcon from "@com/coms/icon/svg-icon.vue";
    import '@arcgis/core/assets/esri/themes/light/main.css';

    export default {
        // 名称
        name: "Map",
        // 使用组件
        components: {
            BtnGroup2,
            SvgIcon,
        },
        // 数据
        data() {
            return {
                btnGroups: [{
                        icon: "svg-wind-site",
                        btns: [{
                                text: "某某风场",
                                code: "mmfdc1",
                            },
                            {
                                text: "某某风场",
                                code: "mhsfc",
                            },
                            {
                                text: "某某风场",
                                code: "mmfdc2",
                            },
                            {
                                text: "某某风场",
                                code: "mmfdc3",
                            },
                            {
                                text: "某某风场",
                                code: "mmfdc4",
                            },
                        ],
                    },
                    {
                        icon: "svg-photovoltaic",
                        btns: [{
                                text: "某某风场",
                                code: "mmgf1",
                            },
                            {
                                text: "某某风场",
                                code: "mmgf2",
                            },
                            {
                                text: "某某风场",
                                code: "mmgf3",
                            },
                            {
                                text: "某某风场",
                                code: "mmgf4",
                            },
                        ],
                    },
                ],
            }
        },
        // 函数
        methods: {},
        // 生命周期钩子
        beforeCreate() {
            // 创建前
        },
        created() {
            // 创建后
        },
        beforeMount() {
            // 渲染前
        },
        mounted() {
            // 渲染后
            const map = new Map();
            const layer = new MapImageLayer({
                url: "http://61.161.152.110:12345/arcgis/rest/services/NX_MAP_14/MapServer"
            });
            map.add(layer);
            const view = new MapView({
                map: map,
                center: [106.230909, 38.487193],
                container: this.$el.querySelector("#map-1")
            });
            view.scale = 128000;
        },
        beforeUpdate() {
            // 数据更新前
        },
        updated() {
            // 数据更新后
        },
    }
</script>

<style lang="less" scoped>
    @titleHeight: 3.704vh;

    .map-1 {
        width: 100%;
        height: calc(100vh - 90px);
        display: flex;
        flex-direction: column;

        .btn-group-tabs {
            display: flex;
            flex-direction: row;
        }

        .panel-title {
            width: 100%;
            height: @titleHeight;
            line-height: @titleHeight;
            background-color: fade(@darkgray, 40%);
            margin-top: 1.481vh;

            .panel-title-name {
                font-size: 13px;
                color: @green;
                display: flex;
                align-items: center;

                i,
                span {
                    margin: 0 0 0 1.481vh;
                }
            }

            .sub-title-item {
                .sub-title {
                    font-size: 13px;
                    margin: 0 0 0 1.481vh;
                }

                .sub-count {
                    font-size: 13px;
                    font-family: "Bicubik";
                    font-weight: 500;
                }
            }
        }

        .panel-body {
            flex-grow: 1;
            background-color: fade(@darkgray, 20%);
            padding: 0.741vh;
            overflow: auto;

            #map-1 {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>
