<!--行政区划-->
<template>
    <div class="comp-container district-container" ref="comContainer">
        <div class="search-container" ref="searchPanle">
            <el-row class="search-row">
                <el-tag size="mini" class="label" effect="dark">
                    行政区名称
                </el-tag>
                <br />
                <el-select
                    v-model="form.name"
                    placeholder="请选择"
                    size="mini"
                    clearable
                    :popper-append-to-body="false"
                    @change="changeSearch"
                >
                    <el-option
                        v-for="item in districtData"
                        :key="item.code"
                        :label="item.name"
                        :value="item.name"
                    ></el-option>
                </el-select>
                <!-- <el-input
                    style="width: 98%"
                    clearable
                    v-model="form.hystName"
                    placeholder="请输入名称"
                    size="mini"
                    @change="changeSearch"
                ></el-input> -->
            </el-row>
            <!-- <el-form ref="form" :model="form" label-width="40px">
            <el-form-item label="名称">
                <el-select
                    v-model="form.name"
                    placeholder="请选择"
                    size="mini"
                    clearable
                    :popper-append-to-body="false"
                    @change="changeSearch"
                >
                    <el-option
                        v-for="item in originData"
                        :key="item.code"
                        :label="item.name"
                        :value="item.name"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form> -->
        </div>
        <el-table
            :data="districtData"
            :height="tableHeight"
            stripe
            size="mini"
            highlight-current-row
            @row-click="rowClick"
        >
            <el-table-column
                label="行政区代码"
                prop="code"
                align="center"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="行政区名称"
                prop="name"
                align="center"
                show-overflow-tooltip
            ></el-table-column>
        </el-table>
        <DistrictModel
            ref="DistrictModel"
            :currentPoint="currentPoint"
            v-show="showInfo"
        ></DistrictModel>
    </div>
</template>

<script>
import towns from './../../js/towns'
import DistrictModel from '@/views/frontScreens/components/gisTabComponents/module/DistrictModel'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import gisMap from '@/api/frontScreen/gisMap.js'
import {gisCompMixin} from '@/mixins/gisCompMixin.js'
export default {
    name: 'district',
    components: {DistrictModel},
    mixins: [gisCompMixin],
    data() {
        return {
            form: {
                name: '',
            },
            iconUrl: require('./../../../../assets/img/gis_district.png'),
            districtData: [],
            isInitMarkers: false,
            LayerGroup: null, // layerGroup 收集用于切换删除
            markerslayer: [], //集合标点的layer 收集用于切换删除
            currentPoint: {},
            params: {
                children: [],
                code: '',
                id: '',
                isParent: '',
                latitude: 0,
                levelCode: 'town',
                levels: [],
                longitude: 0,
                name: '',
                parentId: '',
                pkVal: '',
                sn: 0,
                text: '',
            },
            originData: [
                {
                    code: '1',
                    name: '三圣镇',
                    local: [29.893282, 106.626127],
                },
                {
                    code: '2',
                    name: '复兴街道',
                    local: [29.81363, 106.54764],
                },
                {
                    code: '3',
                    name: '天府镇',
                    local: [29.89507, 106.50078],
                },
                {
                    code: '4',
                    name: '水土街道',
                    local: [29.81216, 106.49202],
                },
                {
                    code: '5',
                    name: '朝阳街道',
                    local: [29.831273, 106.434406],
                },
                {
                    code: '6',
                    name: '柳荫镇',
                    local: [29.97067, 106.59883],
                },
                {
                    code: '7',
                    name: '歇马街道',
                    local: [29.77261, 106.35246],
                },
                {
                    code: '8',
                    name: '澄江镇',
                    local: [29.8744, 106.34989],
                },
                {
                    code: '9',
                    name: '天生街道',
                    local: [29.82307, 106.41701],
                },
                {
                    code: '10',
                    name: '施家梁镇',
                    local: [29.77235, 106.47099],
                },
                {
                    code: '11',
                    name: '童家溪镇',
                    local: [29.6967, 106.43229],
                },
                {
                    code: '12',
                    name: '北温泉街道',
                    local: [29.83887, 106.3916],
                },
                {
                    code: '13',
                    name: '龙凤桥街道',
                    local: [29.77964, 106.41718],
                },
                {
                    code: '14',
                    name: '静观镇',
                    local: [29.89651, 106.56065],
                },
                {
                    code: '15',
                    name: '东阳街道',
                    local: [29.86444, 106.43675],
                },
                {
                    code: '16',
                    name: '蔡家岗街道',
                    local: [29.729001, 106.463601],
                },
                {
                    code: '17',
                    name: '金刀峡镇',
                    local: [30.03387, 106.62094],
                },
            ],
            showInfo: false,
            polygon: null, // 单个行政区划多边形
            sectionMarker: null, // 行政区划标记点
            label: null, // 行政区划标记点名称
            townsPolygon:[], // 行政区划多边形集合
            townsPolygonLayer: null,// 行政区划多边形layer
            townsPoint: [
                {
                    code: '1',
                    name: '三圣镇',
                    local: [29.893282, 106.626127],
                },
                {
                    code: '2',
                    name: '复兴镇',
                    local: [29.81363, 106.54764],
                },
                {
                    code: '3',
                    name: '天府镇',
                    local: [29.89507, 106.50078],
                },
                {
                    code: '4',
                    name: '水土镇',
                    local: [29.81216, 106.49202],
                },
                {
                    code: '5',
                    name: '朝阳街道',
                    local: [29.831273, 106.434406],
                },
                {
                    code: '6',
                    name: '柳荫镇',
                    local: [29.97067, 106.59883],
                },
                {
                    code: '7',
                    name: '歇马镇',
                    local: [29.77261, 106.35246],
                },
                {
                    code: '8',
                    name: '澄江镇',
                    local: [29.8744, 106.34989],
                },
                {
                    code: '9',
                    name: '天生街道',
                    local: [29.82307, 106.41701],
                },
                {
                    code: '10',
                    name: '施家梁镇',
                    local: [29.77235, 106.47099],
                },
                {
                    code: '11',
                    name: '童家溪镇',
                    local: [29.6967, 106.43229],
                },
                {
                    code: '12',
                    name: '北温泉街道',
                    local: [29.83887, 106.3916],
                },
                {
                    code: '13',
                    name: '龙凤桥街道',
                    local: [29.77964, 106.41718],
                },
                {
                    code: '14',
                    name: '静观镇',
                    local: [29.89651, 106.56065],
                },
                {
                    code: '15',
                    name: '东阳街道',
                    local: [29.86444, 106.43675],
                },
                {
                    code: '16',
                    name: '蔡家岗镇',
                    local: [29.729001, 106.463601],
                },
                {
                    code: '17',
                    name: '金刀峡镇',
                    local: [30.03387, 106.62094],
                },
            ],
        }
    },
    created() {
        // this.districtData = this.originData
    },
    mounted() {
        this.$nextTick(async () => {
            await this.getQuerySysAreas()
            this.initMarkers()
        })
    },
    methods: {
        customClear() {
            if (this.polygon) {
                this.map.removeLayer(this.polygon)
                this.polygon = null
            }
            if(this.townsPolygonLayer){
                this.map.removeLayer(this.townsPolygonLayer)
                this.townsPolygonLayer = null
            }
        },
        getQuerySysAreas() {
            return new Promise((resolve, reject) => {
                gisMap.querySysAreas(this.params, (res) => {
                    if (res) {
                        this.districtData = res
                        resolve()
                    }
                    reject()
                })
            })
        },
        updateMarkers() {
            // 获得新的列表数据后清除旧的标点、重新创建地图标点
            this.searchClear = true
            this.clearMarkers()
            this.searchClear = false
            this.initMarkers()
        },
        initMarkers() {
            this.LayerGroup = null
            this.markerslayer = []
            // 画区域
            this.townsPolygon = [], // 行政区划多边形集合
            this.townsPolygonLayer = null,// 行政区划多边形layer
            towns.features.forEach((item) => {
                let points = []
                item.geometry.coordinates[0].forEach((inner) => {
                    let latLng = L.latLng(inner[1], inner[0])
                    points.push(latLng)
                })
                let polygon = this.drawPolygons(points, item.color)
                this.townsPolygon.push(polygon)
            })
            this.townsPolygonLayer = new L.layerGroup(this.townsPolygon);
            this.map.addLayer(this.townsPolygonLayer);

            let icon = this.createdIcon(this.iconUrl)
            // 画乡镇名称
            this.districtData.forEach((item) => {
                let latlng = new L.LatLng(item.longitude, item.latitude)
                const label = new L.divIcon({
                    html:
                        `<div style="color: #fff">${item.name}<div>` +
                        `<img style="width: 15px; height:15px" src="${icon.options.iconUrl}"></img>`,
                    className: 'my-divIcon',
                    iconSize: 60,
                    iconAnchor: L.point(8, 12),
                })
                const sectionMarker = new L.marker(latlng, {
                    icon: label,
                })
                this.markerslayer.push(sectionMarker)
                let infoWin = this.infoWindow()
                sectionMarker.addEventListener('click', () => {
                    this.currentPoint = item
                    infoWin.update()
                    this.showInfo = true
                    // this.sectionMarker.bindPopup(this.infoWin).openPopup()
                })
				sectionMarker.addEventListener('mouseover', () => {
				})
                this.LayerGroup = new L.layerGroup(this.markerslayer)
                this.map.addLayer(this.LayerGroup)
                // 将标注添加到地图中
                sectionMarker.addTo(this.map).bindPopup(infoWin)
                // this.map.addLayer(sectionMarker)
            })
        },
        // 创建icon
        createdIcon(iconUrl) {
            let icon = new L.icon({
                iconUrl: iconUrl,
                iconSize: new L.point(12, 12),
                iconAnchor: new L.point(0, -6),
            })
            return icon
        },
        drawPolygons(points, color) {
            // 创建面对象
            return new L.polygon(points, {
                color: '#f4f7fd',
                weight: 1,
                opacity: 1,
                fillColor: '#409eff',
                fillOpacity: 0.1,
            })
            //向地图上添加面
            // this.map.addLayer(polygon)
        },
        rowClick(row) {
            // this.currentPoint = row
            this.clearMarkers()
            this.createdLngLat(row)
        },
        async changeSearch(val) {
            this.params.name = val
            await this.getQuerySysAreas()
            this.updateMarkers()
            if (val) {
                this.createdLngLat(this.districtData[0])
            }
            // if (!val) {
            //   this.districtData = this.originData
            //   return
            // }
            // this.districtData = this.originData.filter(item => item.name == val)
        },
        // 多边形绘制
        drawPolygon(points) {
            if (this.polygon) {
                this.map.removeLayer(this.polygon)
                this.polygon = null
            }
            // 创建面对象
            this.polygon = L.polygon(points, {
                color: '#f5f5f5',
                weight: 1,
                opacity: 0.5,
                fillColor: '#4db7ff',
                fillOpacity: 0.9,
            })
            //向地图上添加面
            this.map.addLayer(this.polygon)
        },
        infoWindow() {
            let sContent = this.$refs.DistrictModel.$el
            var infoWin = new L.popup({
                autoPan: true,
                maxHeight: 300,
                maxWidth: 600,
                minWidth: 300,
            }).setContent(sContent)
			
            return infoWin
        },
        drawMarker(latlng, item, name) {
            if (this.sectionMarker) {
                this.map.removeLayer(this.sectionMarker)
                this.sectionMarker = null
            }
            // 图片
            let icon = new L.icon({
                iconUrl: this.iconUrl,
                iconSize: new L.point(12, 12),
                iconAnchor: new L.point(0, -6),
            })
            const label = new L.divIcon({
                html:
                    `<div style="color:#fff">${name}<div>` +
                    `<img style=" width: 15px;height:15px" src="${icon.options.iconUrl}"></img>`,
                className: 'my-divIcon',
                iconSize: 60,
                iconAnchor: L.point(8, 12),
            })
            this.sectionMarker = new L.marker(latlng, {icon: label})
            this.infoWin = this.infoWindow()
            this.sectionMarker.addEventListener('click', () => {
                this.infoWin.update()
                this.showInfo = true
            })
            // 将标注添加到地图中
            this.sectionMarker.addTo(this.map).bindPopup(this.infoWin)
            // this.map.addLayer(this.sectionMarker)
            // this.showInfo = true
        },
        createdLngLat(row) {
            this.currentPoint = row
            let markerLocal = [row.longitude, row.latitude]
            let points = []
            let area = towns.features.filter(
                (item) => item.properties.name == row.name
            )
            area[0].geometry.coordinates[0].forEach((item) => {
                points.push(new L.LatLng(item[1], item[0]))
            })
            let latlng = new L.LatLng(markerLocal[0], markerLocal[1])
            // 创建
            this.drawPolygon(points)
            this.drawMarker(latlng, row, row.name)
        },
    },
}
</script>

<style lang="scss" scoped>
@import './../../css/gisComp.scss';
.district-container {
  /deep/ .el-form-item--small.el-form-item {
    margin-bottom: 20px;
  }
}
/deep/ .my-divIcon {
  color: #fff !important;
}
</style>
