<!--大坝-->
<template>
    <div class="infoWindow-model">
        <el-tabs
            v-model="activeName"
            type="border-card"
            @tab-click="handleClick"
        >
            <el-tab-pane label="基本情况" name="基本情况">
                <div class="section-container">
                    <div
                        v-for="item in reservoirData"
                        :key="item.key"
                        class="section-item"
                    >
                        <span class="text">{{ item.text }}</span>
                        <span class="content">{{ item.content }} </span>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="位移测点" name="位移测点">
                <div class="section-container">
                    <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>
            </el-tab-pane>
            <el-tab-pane label="渗流测点" name="渗流测点">
                <div class="section-container">
                    <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-tab-pane label="渗压测点" name="渗压测点">
                <div class="section-container">
                    <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>
export default {
    name: 'damModel',
    data() {
        return {
            activeName: '基本情况',
            reservoirData: [
                {
                    text: '水库名称',
                    content: 'XXX水库',
                    key: 1,
                },
                {
                    text: '水库类型',
                    content: '山丘水库',
                    key: 2,
                },
                {
                    text: '水库代码',
                    content: '225522',
                    key: 3,
                },
                {
                    text: '别名/曾用名',
                    content: 'XXX水库',
                    key: 4,
                },
                {
                    text: '工程规模',
                    content: '中型',
                    key: 5,
                },
                {
                    text: '工程状态',
                    content: '完工',
                    key: 6,
                },
                {
                    text: '所在行政区划',
                    content: 'XX镇',
                    key: 7,
                },
            ],
            stationData: [
                {
                    name: '雨量站',
                    num: 5,
                    key: 1,
                    icon: 'yuliang',
                },
                {
                    name: '河道水位站',
                    num: 5,
                    key: 2,
                    icon: 'shuiwei',
                },
                {
                    name: '水库水位站',
                    num: 5,
                    key: 3,
                    icon: 'shuiwen',
                },
                {
                    name: '位移测点',
                    num: 5,
                    key: 4,
                    icon: 'weiyi',
                },
                {
                    name: '渗流测点',
                    num: 5,
                    key: 5,
                    icon: 'shenliu',
                },
                {
                    name: '渗压测点',
                    num: 5,
                    key: 6,
                    icon: 'shenya',
                },
            ],
            engineerData: [
                {
                    name: '水库',
                    num: 5,
                    key: 1,
                    icon: 'shuiku',
                },
                {
                    name: '大坝',
                    num: 5,
                    key: 2,
                    icon: 'daba',
                },
                {
                    name: '水电站',
                    num: 5,
                    key: 3,
                    icon: 'shuidianzhan',
                },
                {
                    name: '堤防',
                    num: 5,
                    key: 4,
                    icon: 'difang',
                },
            ],
        }
    },
    inject: ['mapData'],
    created() {
        let mapData = this.mapData()
        this.districtData = this.originData
        this.T = mapData.T
        this.map = mapData.map
    },
    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)
        },
    },
}
</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: 16px;
        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;
        }
    }
    .text{
        font-size: 16px;
        margin-right: 20px;
        color: $text-sub;
        margin:0 10px;
    }
    .content{
        color: $active-color;
        font-size: 16px;
        vertical-align: middle;
        margin:0 10px;
    }
}

</style>