<template>
    <div class="water-safety-page">
        <div class="content-left">
            <CntTopTitle title="内涝点列表" />
            <!-- <SiteLeftList :data="siteList" @change="onSiteChange" /> -->
        </div>
        <div class="content-right">
            <CntTopTitle title="内涝地图" />
            <!-- <MainMap
                ref="myOlmap"
                v-bind:layerList="layermsg"
                style="height: 730px;"
            /> -->
        </div>
    </div>
</template>
<script>
// import SiteLeftList from "@/components/SiteLeftList";
// import MainMap from "@/components/MainMap";
import { prositeinfoData } from "@/services";

export default {
    components: {
        // SiteLeftList,
        // MainMap
    },
    data() {
        return {
            map: null,
            siteList: [],
            layermsg: "水安全"
        };
    },
    methods: {
        //初始化地图
        initMap() {
            this.map = this.$refs.myOlmap.getMap();
        },
        // 获取站点列表
        async getSiteList() {
            let res = await prositeinfoData(3);
            if (res.code === 200) {
                const { records } = res.data;
                this.siteList = records;
            }
        },
        // 点击站点
        onSiteChange(val) {
            console.log(val);
            console.log(val.id);
            //调用子组件展示属性pop框方法showWaterProOfList
            this.$refs.myOlmap.showWaterProOfList(val);
        }
    },
    mounted() {
        this.getSiteList();
        this.initMap();
    }
};
</script>
<style lang="less" scoped>
@import "@/global.less";
.water-safety-page {
    display: flex;
    .title {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: @title-color;
        img {
            margin-right: 10px;
        }
    }
    .content-left {
        width: 250px;
    }
    .content-right {
        flex: 1;
        margin-left: 15px;
        overflow: hidden;
    }
}
</style>