<!--河流-->
<template>
    <div class="infoWindow-model">
        <div class="rever-title">{{ currentPoint.name }}</div>
        <div class="section-container">
            <div v-for="item in riverInfoData" :key="item.key" class="section-item">
                <span class="text">{{ item.text }}</span>
                <span class="content">{{ item.content }} </span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'RiverInfoModel',
    props: {
        currentPoint: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    data() {
        return {
            activeName: '河流详情',
            riverInfoData: [
                {
                    text: '河流名称',
                    content: 'XXX河',
                    key: 1,
                },
                {
                    text: '河流代码',
                    content: 'HL123',
                    key: 2,
                },
                {
                    text: '上级河流',
                    content: 'XXXX河',
                    key: 3,
                },
                {
                    text: '河流级别',
                    content: '二级河流',
                    key: 4,
                },
                {
                    text: '流域面积(单位Km2)',
                    content: '56',
                    key: 5,
                },
            ],
        }
    },
    inject: ['mapData'],
    created() {
        let mapData = this.mapData()
        this.districtData = this.originData
        this.T = mapData.T
        this.map = mapData.map
    },
    mounted() {
        console.log(this.currentPoint, 'this.currentPoint')
        this.update()
    },
    beforeDestroy() {

    },
    watch: {
        currentPoint: {
            handler(newVal) {
                this.update()
            }
        }
    },
    methods: {
        update() {
            this.riverInfoData[0].content = this.currentPoint.name
            this.riverInfoData[1].content = this.currentPoint.code
            this.riverInfoData[2].content = this.currentPoint.parentName
            let grade = ""
            if (this.currentPoint.rvGrad == "1") {
                grade = "一"
            } else if (this.currentPoint.rvGrad == "2") {
                grade = "二"
            } else if (this.currentPoint.rvGrad == "3") {
                grade = "三"
            }
            else if (this.currentPoint.rvGrad == "4") {
                grade = "四"
            }
            else if (this.currentPoint.rvGrad == "5") {
                grade = "五"
            }
            this.riverInfoData[3].content = grade + "级支流"
            this.riverInfoData[4].content = this.currentPoint.rvBasArea
        },
        handleClick(tab, event) {
            console.log(tab, event)
        },
    },
}
</script>

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

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

.rever-title {
    font-size: 18px;
    font-weight: 700;
    color: $active-color;
    padding: 10px;
    border-bottom: 1px dashed $border-color;
}

.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>