<template>
    <div class="bbls-map-container full">
        <div id="bbls-map" class="full"></div>
        <transition name="component-fade" mode="out-in">
            <div id="control-menu-button" @click="toggleMenu" v-if="!showMenu">
                <i class="el-icon-menu"></i>
            </div>
        </transition>
        <transition name="component-fade" mode="out-in">
            <div class="control-menu-container" v-if="showMenu">
                <div class="top-bar">
                    <span
                        >综合应用
                        <!-- <el-tooltip content="可选择1-3个应用">
                            <i class="el-icon-info"></i>
                        </el-tooltip> -->
                    </span>
                    <i class="el-icon-d-arrow-left" @click="toggleMenu"></i>
                </div>

                <el-checkbox-group
                    v-model="selectionData"
                    @change="changeSelect"
                >
                    <el-tag size="mini" class="group-name" effect="dark">
                        实时监测
                    </el-tag>
                    <br />
                    <el-checkbox
                        @change="test(menu, 'jcyj')"
                        class="check-item"
                        v-for="menu in jcyjMenu"
                        :label="menu.key"
                        :key="menu.key"
                        >{{ menu.text }}</el-checkbox
                    >
                    <br />
                    <el-tag size="mini" class="group-name" effect="dark">
                        基础概况
                    </el-tag>
                    <br />
                    <el-checkbox
                        @change="test(menu, 'jcss')"
                        class="check-item"
                        v-for="menu in jcssMenu"
                        :label="menu.key"
                        :key="menu.key"
                        >{{ menu.text }}</el-checkbox
                    >
                </el-checkbox-group>
            </div>
        </transition>

        <div
            class="control-content-container"
            :class="showContent ? 'show' : 'hidden'"
        >
            <div class="control-content-bar" @click="toggleContent">
                控制面板
            </div>
            <div class="control-content">
                <el-tabs
                    class="fullheight tab-container-root"
                    v-model="currentTabComponent"
                    type="border-card"
                    @tab-click="handlePaneClick"
                    v-if="tabComponentOptions.length > 0"
                >
                    <el-tab-pane
                        :name="tabComponent.key"
                        v-for="tabComponent in tabComponentOptions"
                        :key="tabComponent.key"
                    >
                        <span slot="label">
                            <el-link :underline="false">{{
                                tabComponent.text
                            }}</el-link>
                        </span>

                        <component
                            v-if="
                                currentTabComponent == tabComponent.key &&
                                mapReady
                            "
                            v-bind:is="currentTabComponent"
                        ></component>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script>
import towns from './js/towns'
import gisComponents from './js/gisComponents.js'
// leaflet实现离线地图
import 'leaflet/dist/leaflet.css'
// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import L from 'leaflet'
import * as d3 from 'd3'
import d3Svglayer from './js/d3SvgOverlay.js'
export default {
    name: 'tianditu',
    components: {
        ...gisComponents,
    },
    provide() {
        return {
            mapData: this.mapData,
        }
    },
    data() {
        return {
            L: null,
            map: null,
            baseMapOverlay: null,
            handler: null,
            zoom: 10,
            config: null,
            showMenu: true,
            showContent: true,
            selectionData: ['RealTimeRain'],
            jcssMenu: [
                {
                    text: '行政区划',
                    key: 'District',
                },
                {
                    text: '河流信息',
                    key: 'RiverInfo',
                },
                {
                    text: '水库',
                    key: 'Reservoir',
                },
                {
                    text: '生态流量',
                    key: 'Hydropower',
                },
                {
                    text: '水雨情测站',
                    key: 'WaterRainStation',
                },
                {
                    text: '工情测站',
                    key: 'EngineerStation',
                },
                {
                    text: '预警设施',
                    key: 'WarnInstallations',
                },
                {
                    text: '视频巡查',
                    key: 'VideoPatrol',
                },
                {
                    text: '取水工程',
                    key: 'WaterUser',
                },
                {
                    text: '山洪防治点',
                    key: 'mountainTorrentDisaster',
                },
            ],
            jcyjMenu: [
                {
                    text: '实时雨情',
                    key: 'RealTimeRain',
                },
                {
                    text: '日降雨量',
                    key: 'DailyRainfall',
                },
                {
                    text: '实时水情',
                    key: 'RealTimeWater',
                },
                {
                    text: '实时工情',
                    key: 'RealTimeEngineer',
                },
                {
                    text: '取水监测',
                    key: 'WaterIntakeMonitor',
                },{
					text: '生态流量',
					key: 'EcologicalFlow',
				}
                // {
                //     text: '测站告警',
                //     key: 'StationAlarm',
                // },
                // {
                //     text: '工情告警',
                //     key: 'EngineerAlarm',
                // },
            ],
            currentTabComponent: 'RealTimeRain',
            tabComponentOptions: [
                {
                    text: '实时雨情',
                    key: 'RealTimeRain',
                },
            ],
            currentChangeItem: {},
            polygon: null, // 行政区划多边形
            sectionMarker: null, // 行政区划标记点
            label: null, // 行政区划标记点名称
            wmsLayer: null,
            mapReady: false,
        }
    },
    mounted() {
        const initL = () => {
            return new Promise((resolve, reject) => {
                console.log(reject)
                // 如果已加载直接返回
                if (window.L) {
                    resolve(window.L)
                }
            })
        }
        this.$nextTick(() => {
            this.newMap()
            initL().then((res) => {
                this.L = res
                d3Svglayer.initD3SvgOverlay(this.L, d3)
                this.mapReady = true
            })
        })
    },
    created() {},
    methods: {
        mapData() {
            return {
                L: this.L,
                map: this.map,
                baseMapOverlay: this.baseMapOverlay,
            }
        },
        changeSelect(data) {
            if (!this.showContent) {
                this.showContent = true
                setTimeout(() => {
                    this.$bus.$emit('contentPanleToggle')
                }, 500)
            }
            if (data.length > 3) {
                this.tabComponentOptions.push(this.currentChangeItem)
                this.tabComponentOptions.shift()
                this.selectionData.shift()
                this.currentTabComponent =
                    this.tabComponentOptions[
                        this.tabComponentOptions.length - 1
                    ].key
            } else if (data.length == 3) {
                this.tabComponentOptions.push(this.currentChangeItem)
                this.currentTabComponent =
                    this.tabComponentOptions[
                        this.tabComponentOptions.length - 1
                    ].key
            } else if (data.length == 2) {
                if (this.tabComponentOptions.length == 3) {
                    this.tabComponentOptions = this.tabComponentOptions.filter(
                        (item) => item.key !== this.currentChangeItem.key
                    )
                } else if (this.tabComponentOptions.length == 1) {
                    this.tabComponentOptions.push(this.currentChangeItem)
                }
                this.currentTabComponent =
                    this.tabComponentOptions[
                        this.tabComponentOptions.length - 1
                    ].key
            } else if (data.length == 1) {
                if (!this.tabComponentOptions.length) {
                    this.tabComponentOptions.push(this.currentChangeItem)
                } else {
                    this.tabComponentOptions = this.tabComponentOptions.filter(
                        (item) => item.key !== this.currentChangeItem.key
                    )
                }

                this.currentTabComponent = this.tabComponentOptions[0].key
            } else if (!data.length) {
                this.tabComponentOptions = []
                this.currentTabComponent = ''
                this.showContent = false
            }
        },
        test(item, type) {
            this.currentChangeItem = item
        },
        handlePaneClick() {},
        // 菜单显示隐藏
        toggleMenu() {
            this.showMenu = !this.showMenu
        },
        // 控制面板显示隐藏
        toggleContent() {
            this.showContent = !this.showContent
            if (this.showContent) {
                this.$nextTick(() => {
                    this.$bus.$emit('contentPanleToggle')
                })
            }
        },
        // 初始化天地图
        newMap() {
            this.map = new L.Map('bbls-map', {
                crs: L.CRS.EPSG4326,
                scrollWheelZoom: true,
                attributionControl: false,
                zoomControl: false,
                center: [29.865585, 106.499857],
                zoom: this.zoom,
            })
            //   this.map.setView(
            //     new L.LatLng( 29.865585,106.499857), // 106.395593, 29.805197
            //     this.zoom
            //   )
            // vec 矢量底图  img 影像
            var _baseImgLayer = new L.tileLayer(
                'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=f6df78cf1738e5623e2291f608e7040e',

                {
                    zoomOffset: 1,
                }
            )
            _baseImgLayer.addTo(this.map)
            // cva  矢量注记 cia影像注记
            let pointImgLayer = new L.tileLayer(
                'http://t3.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=f6df78cf1738e5623e2291f608e7040e',

                {
                    zoomOffset: 1,
                }
            )
            console.log(pointImgLayer, _baseImgLayer)
            // pointImgLayer.addTo(this.map)

            this.map.on('click', (point) => {
                console.log(point)
                console.log('lt:' + point.latlng.lat)
                console.log('lg:' + point.latlng.lng)
            })

            this.map.setMinZoom(10)
            this.map.setMaxZoom(17)
            // 添加控件
            // var ctrl = new T.Control.MapType()
            this.initBBSL()
        },

        // 绘制北碚行政区域
        initBBSL() {
            // d3绘制
            let countries = []
            //   L.polygon([init, redraw]).addTo(this.map)
            countries = towns.features
            var myStyle = {
                color: '#d2e0e1',
                weight: 2,
                opacity: 1,
                fillColor: 'transparent',
                fillOpacity: 1,
            }
            this.baseMapOverlay = new L.geoJSON(countries, {
                style: myStyle,
            })
            this.map.addLayer(this.baseMapOverlay)
            this.baseMapOverlay.bringToBack()

            //   function init(sel, transform) {
            //     var upd = sel.selectAll('path.geojson').data(countries)
            //     upd
            //       .enter()
            //       .append('path')
            //       .attr('class', 'geojson')
            //       .attr('stroke', '#ccc')
            //       .attr('stroke-width', '1')
            //       .attr('fill', '#006ced')
            //       .attr('fill-opacity', '0.01')
            //   }

            //   function redraw(sel, transform) {
            //     sel.selectAll('path.geojson').each(function(d, i) {
            //       d3.select(this).attr('d', transform.pathFromGeojson)
            //     })
            //   }
        },
    },
}
</script>

<style lang="scss" scoped>
$active-color: #4db7ff;
$active-color-dark: #1451a0;
$shadow-color: #101c35;
$section-bg: #1c2330;
$section-bg-light: #33415a;
$text-sub: #5d739c;
$text-main: #dddddd;
$text-title: #f4f7fd;
$border-color: #576580;
.bbls-map-container {
  position: relative;
}
.control-menu-container {
  position: absolute;
}
#control-menu-button {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 999;
  color: $text-main;
  i {
    font-size: 30px;
    color: $active-color;
    cursor: pointer;
    box-shadow: 4px 4px 10px $shadow-color;
  }
}
.control-menu-container {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 260px;
  background-color: rgba($section-bg, 0.8);
  color: $text-main;
  z-index: 999;
  border-radius: 20px 20px 20px 20px;
  padding: 40px 20px 20px 20px;
  padding-right: 0;
  box-sizing: border-box;
  color: $text-sub;
  .top-bar {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border-radius: 20px 20px 0 0;
    padding: 0 20px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    color: $text-title;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid $border-color;
    span,
    i {
      font-size: 16px;
      font-weight: 700;
    }
    .el-icon-info {
      margin-left: 6px;
      color: #e6a23c;
    }
  }
  .top-bar .el-icon-d-arrow-left:hover {
    color: $active-color;
  }
  .group-name {
    // font-size: 14px;
    // color: $text-main;
    margin: 20px 0 10px;
    display: inline-block;
    background-color: $active-color-dark;
  }
  .group-name:nth-of-type(1) {
    margin-top: 10px;
  }
  /deep/ .el-checkbox__label {
    font-size: 12px;
    color: $text-main;
  }
  .check-item {
    width: 100px;
    margin: 2px 0;
    margin-right: 20px;
  }
}
// 控制面板
.control-content-container {
  position: absolute;
  width: 460px;
  height: 86%;
  right: 0;
  top: 20px;
  z-index: 999;
  transition: all 0.3s;
  .control-content-bar {
    width: 26px;
    padding: 6px 4px;
    background-color: rgba($section-bg, 0.8);
    color: $text-main;
    position: absolute;
    left: -34px;
    top: 26px;
    border-radius: 6px 0 0 6px;
    text-align: center;
    color: $text-title;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
  }
  .control-content-bar:hover {
    color: $active-color;
  }
  .control-content {
    height: 100%;
    background-color: rgba($section-bg, 0.8);
    border-radius: 20px 0 0 20px;
  }
}
.component-fade-enter-active,
.component-fade-leave-active {
  transition: all 0.3s;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  transform: scale(0);
  transform-origin: 0 0;
}
.control-content-container.hidden {
  width: 0;
}
.control-content-container.show {
  width: 460px;
}
/deep/ .el-checkbox-group {
  height: auto !important;
}

/deep/ .el-tabs--border-card {
  background: transparent;
  border: none;
}
/deep/ .el-tabs--border-card > .el-tabs__header {
  background: transparent;
  border-color: $border-color;
}
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: $text-title;
  background-color: #1451a0;
  border-right-color: $border-color;
  border-left-color: $border-color;
}
/deep/ .el-link.el-link--default {
  color: $text-title;
}
/deep/ .el-tabs__item:nth-child(1) {
  border-top-left-radius: 20px;
  border-left: 0;
}
/deep/ .el-tabs--border-card > .el-tabs__content {
  width: 100%;
  height: calc(100% - 40px) !important;
  padding: 0;
  box-sizing: border-box;
}
/deep/ .el-tab-pane {
  width: 100%;
  height: 100%;
}
#bbls-map /deep/ .tdt-infowindow-content-wrapper,
#bbls-map /deep/ .tdt-infowindow-tip {
  background-color: $section-bg !important;
  // border: 1px solid $border-color;
}
#bbls-map /deep/ .leaflet-popup-content-wrapper,
#bbls-map /deep/ .leaflet-popup-tip {
  background-color: $section-bg !important;
}
#bbls-map /deep/ .tdt-label {
  background: $section-bg;
  color: $text-main;
  box-shadow: 1px 1px 4px $section-bg-light;
  border: 1px solid $border-color;
}
/deep/ .el-checkbox__inner {
  background-color: $section-bg;
  border-color: $border-color;
  width: 12px;
  height: 12px;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: $active-color;
  border-color: $active-color;
}
/deep/ .el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color: $section-bg-light;
  border-color: $section-bg-light;
}
/deep/ .el-checkbox__inner::after {
  height: 5px;
  left: 3px;
}
</style>
<style>
.tdt-control-copyright.tdt-control {
  display: none;
}

</style>
