<!--行政区-->
<template>
    <div class="infoWindow-model">
		<div class="model-title">
			{{currentPoint.name	}}
		</div>
			<div class="section-container" style="overflow:auto">
			    <div v-for="item in stationData" :key="item.key" class="section-item">
			        <div>
			            <i class="bbsl-iconfont" :class="`bbsl-${item.icon}`"></i>
			            <span class="name">{{ item.name }}</span>
			        </div>
			        <span class="num">{{ item.num }} <i>个</i></span>
			    </div>
			</div>
		</div>
        <!-- <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick"> -->
            <!-- <el-tab-pane label="监测站" name="first"> -->
                
            <!-- </el-tab-pane> -->
            <!-- <el-tab-pane label="水利工程" name="second">
                <div class="section-container" style="overflow:auto">
                    <div v-for="item in engineerData" :key="item.key" class="section-item">
                        <div>
                            <i class="bbsl-iconfont" :class="`bbsl-${item.icon}`"></i>
                            <span class="name">{{ item.name }}</span>
                        </div>
                        <span class="num">{{ item.num }}<i>个</i></span>
                    </div>
                </div>
            </el-tab-pane> -->
        </el-tabs>
    </div>
</template>

<script>
import dictUtils from '@/components/dict/DictSelectUtils.js'
import gisMap from '@/api/frontScreen/gisMap.js'
export default {
    props: {
        currentPoint: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    name: 'districtModel',
    data () {
        return {
            activeName: 'first',
            params: {},
            stationData: [
                {
                    name: '雨量站',
                    num: 0,
                    key: 1,
                    icon: 'yuliang',
                },
                {
                    name: '河道水位站',
                    num: 0,
                    key: 2,
                    icon: 'shuiwei',
                },
                {
                    name: '水库水位站',
                    num: 0,
                    key: 3,
                    icon: 'shuiwen',
                },
                // {
                //     name: '位移点',
                //     num: 0,
                //     key: 4,
                //     icon: 'weiyi',
                // },
                // {
                //     name: '渗流点',
                //     num: 0,
                //     key: 5,
                //     icon: 'shenliu',
                // },
                {
                    name: '渗压点',
                    num: 0,
                    key: 4,
                    icon: 'shenya',
                },
				{
				    name: '预警设施',
				    num: 0,
				    key: 5,
				    icon: 'weiyi',
				},
				{
				    name: '生态流量站',
				    num: 0,
				    key: 6,
				    icon: 'shenliu',
				},
				
            ],
            engineerData: [
                {
                    name: '水库',
                    num: 0,
                    key: 1,
                    icon: 'shuiku',
                },
                {
                    name: '水电站',
                    num: 0,
                    key: 3,
                    icon: 'shuidianzhan',
                },
                {
                    name: '堤防',
                    num: 0,
                    key: 4,
                    icon: 'difang',
                },
            ],
        }
    },
    inject: ['mapData'],
    created () {
        let mapData = this.mapData()
        this.districtData = this.originData
        this.T = mapData.T
        this.map = mapData.map
    },
    watch: {
        currentPoint: {
            handler (newVal) {
                console.log(this.currentPoint);
                this.getCountStation()
                this.activeName = 'first'
            },
        }
    },
    mounted () {
    },
    beforeDestroy () {
        if (this.sectionMarker && this.label) {
            this.map.removeLayer(this.sectionMarker)
            this.map.removeLayer(this.label)
            this.sectionMarker.closeInfoWindow()
        }
        if (this.polygon) {
            this.map.removeLayer(this.polygon)
        }
    },
    methods: {
        handleClick (tab, event) {
            console.log(tab, event)
        },
        getCountStation () {
            this.params.addvcd = this.currentPoint.code
            gisMap.countStation(this.params, res => {
                if (res.state) {
                    console.log(res.value);
                    res.value.forEach(e => {
                        this.stationData.forEach(s => {
                            if (e.typeName == s.name) {
                                s.num = e.count
                            }
                        })
                        this.engineerData.forEach(g => {
                            if (e.typeName == g.name) {
                                g.num = e.count
                            }
                        })
                    })
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
@import './../../../css/model.scss';

.section-container {
    padding-top: 10px;
}

.section-item {
    padding: 6px 0;
    border-bottom: 1px dashed $border-color;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .bbsl-iconfont {
        font-size: 18px;
        color: $active-color;
        margin: 0 10px;
    }

    .name {
        font-size: 14px;
        margin-right: 20px;
        color: $text-sub;
    }

    .num {
        color: $active-color;
        font-size: 20px;
        vertical-align: middle;
        margin: 0 10px;

        i {
            font-size: 12px;
            font-style: normal;
            margin-left: 6px;
            color: $text-sub;
        }
    }
}
</style>