<!--水库-->
<template>
    <div class="infoWindow-model" v-show="isShow">
        <div class="model-title">{{ currentPoint.rsnm }}</div>
       <!-- <el-tabs
            v-model="activeName"
            type="border-card"
            @tab-click="handleClick"
        >
            <el-tab-pane label="水库详情" name="水库详情"> -->
                <div class="section-container">
                    <div class="section-item" >
                        <span class="text">水库名称</span>
                        <span class="content">{{currentPoint.rsnm}}</span>
                    </div>
					<div class="section-item" >
					    <span class="text">水库代码</span>
					    <span class="content"> {{currentPoint.rscd}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">工程规模</span>
					    <span class="content">{{currentPoint.prsc}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">工程状态</span>
					    <span class="content">{{currentPoint.prst}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">所属河流</span>
					    <span class="content">{{currentPoint.rvcd}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">总库容(万m³)</span>
					    <span class="content">{{currentPoint.ttstcp}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">正常蓄水位(m)</span>
					    <span class="content">{{currentPoint.nrstlv}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">设计洪水位(m)</span>
					    <span class="content">{{currentPoint.dsfllv}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">校核洪水位(m)</span>
					    <span class="content">{{currentPoint.chfllv}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">防洪高水位(m)</span>
					    <span class="content">{{currentPoint.fllv}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">期限制水位(m)</span>
					    <span class="content">{{currentPoint.dsfllv}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">大坝材料类型</span>
					    <span class="content">{{damTypeMat(currentPoint.damTypeMat)}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">大坝结构类型</span>
					    <span class="content">{{damTypeStr(currentPoint.damTypeStr)}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">最大坝高(m)</span>
					    <span class="content">{{currentPoint.damMaxHeig}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">坝顶长度(m)</span>
					    <span class="content">{{currentPoint.damTopLen}}</span>
					</div>
					<div class="section-item" >
					    <span class="text">坝顶宽度(m)</span>
					    <span class="content">{{currentPoint.damTopWid}}</span>
					</div>
                </div>
            <!-- </el-tab-pane>
            <el-tab-pane label="雨情数据" name="rain">
                <div class="section-container">
                    <div id="rainChart" class="full"></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="水情数据" name="water">
                <div class="section-container">
                    <div id="waterChart" class="full"></div>
                </div>
            </el-tab-pane>
			<el-tab-pane label="测压管数据" name="pressure">
			    <div class="section-container">
			        <div class="station-search">
			            测站：
			            <el-select
			                class="search-select"
			                v-model="stationKey3"
			                placeholder="请选择"
			                size="mini"
			                :popper-append-to-body="false"
			            >
			                <el-option
			                    v-for="item in monitoringList3"
			                    :key="item.mpcd"
			                    :label="item.mpnm"
			                    :value="item.mpcd"
			                >
			                </el-option>
			            </el-select>
			        </div>
					<pressure-echarts :rscd="currentPoint.rscd" :stcd="stationKey3" :name="activeName"  v-if="activeName=='pressure'"></pressure-echarts>
			</el-tab-pane>
            <el-tab-pane label="位移数据" name="shift">
                <div class="section-container">
                    <div class="station-search">
                        测站：
                        <el-select
                            class="search-select"
                            v-model="stationKey1"
                            placeholder="请选择"
                            size="mini"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="item in monitoringList1"
                                :key="item.mpcd"
                                :label="item.mpnm"
                                :value="item.mpcd"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <shift-echarts :rscd="currentPoint.rscd" :stcd="stationKey1" :name="activeName"  v-if="activeName=='shift'"></shift-echarts>
                </div>
            </el-tab-pane>
            <el-tab-pane label="渗流数据" name="seepage">
                <div class="section-container">
                    <div class="station-search">
                        测站：
                        <el-select
                            class="search-select"
                            v-model="stationKey2"
                            placeholder="请选择"
                            size="mini"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="item in monitoringList2"
                                :key="item.mpcd"
                                :label="item.mpnm"
                                :value="item.mpcd"
                            >
                            </el-option>
                        </el-select>
                    </div>
					<seepage-echarts :rscd="currentPoint.rscd" :stcd="stationKey2" :name="activeName"  v-if="activeName=='seepage'"></seepage-echarts>
                </div>
            </el-tab-pane>
			<el-tab-pane label="渗流压力数据" name="potentiometric">
				<div class="section-container">
				    <div class="station-search">
				        测站：
				        <el-select
				            class="search-select"
				            v-model="stationKey4"
				            placeholder="请选择"
				            size="mini"
				            :popper-append-to-body="false"
				        >
				            <el-option
				                v-for="item in monitoringList4"
				                :key="item.rscd"
				                :label="item.mpnm"
				                :value="item.mpcd"
				            >
				            </el-option>
				        </el-select>
				    </div>
				  
				</div>
			</el-tab-pane>
        </el-tabs> -->
    </div>
</template>

<script>
import * as echarts from 'echarts'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import gisMap from '@/api/frontScreen/gisMap.js'
import shiftEcharts from './components/ReservoirEcharts.vue'
import seepageEcharts from './components/seepageEcharts.vue'
import pressureEcharts from './components/pressureEcharts.vue'
export default {
    name: 'reservoirModel',
    props: {
        currentPoint: {
            type: Object,
            default: () => {
                return {}
            },
        },
        isShow: {
            type: Boolean,
            default: false,
        },
    },
	components: {
	     shiftEcharts,
		 seepageEcharts,
		 pressureEcharts
	  },
    data() {
        return {
            activeName: '水库详情',
            reservoirData: [
                {
                    text: '水库名称',
                    content: 'XXX水库',
                    key: 1,
                },
                {
                    text: '水库代码',
                    content: '225522',
                    key: 2,
                },
                {
                    text: '工程规模',
                    content: '中型',
                    key: 3,
                },
                {
                    text: '工程状态',
                    content: '完工',
                    key: 4,
                },
                {
                    text: '所属河流',
                    content: 'XX河',
                    key: 5,
                },
                {
                    text: '正常蓄水位(m)',
                    content: '125',
                    key: 6,
                },
                {
                    text: '总库容(万m³)',
                    content: '78',
                    key: 7,
                },
                {
                    text: '主汛限制水位(m)',
                    content: '145',
                    key: 8,
                },
                {
                    text: '设计洪水位(m)',
                    content: '150',
                    key: 9,
                },
                {
                    text: '大坝材料类型',
                    content: 'xxx',
                    key: 10,
                },
                {
                    text: '大坝结构类型',
                    content: 'xxx',
                    key: 11,
                },
                {
                    text: '最大坝高(m)',
                    content: '20',
                    key: 12,
                },
                {
                    text: '坝顶长度(m)',
                    content: '156',
                    key: 13,
                },
                {
                    text: '坝顶宽度(m)',
                    content: '8',
                    key: 14,
                },
            ],
            stationKey1: '',
            monitoringList1: [],
            stationKey2: '',
            monitoringList2: [],
            stationKey3: '',
            monitoringList3: [],
			stationKey4: '',
			monitoringList4: [],
            rainChart: null, //雨情监测
            waterChart: null, //水情监测
            seepageChart: null, //渗流监测
            pressureChart: null, //渗压监测
            shiftChart: null, //位移监测
			pptnLatestLists:[],
			rsvrLatestLists:[],
			dammvLists:[],
			damspgLists:[],
			damspprLists:[]
        }
    },
    inject: ['mapData'],
    created() {
        let mapData = this.mapData()
        this.districtData = this.originData
        this.T = mapData.T
        this.map = mapData.map
		// this.getMonitoring()
    },
    mounted() {
        // this.$nextTick(() => {
        //     this.initCharts()
        // })
    },
	watch: {
	    currentPoint: {
	        handler(newVal) {
				console.log(this.activeName);
                this.activeName = '水库详情'
				if(this.activeName=='rain'){
					this.getPptnLatestList()
				}else if(this.activeName=='water'){
					this.getRsvrLatestList()
				}else if(this.activeName=='shift'){
					this.dropDownList(1)
				}else if(this.activeName=='seepage'){
						this.dropDownList(2)
				}else if(this.activeName=='pressure'){
						this.dropDownList(3)
				}
	        },
	    }
	},
    beforeDestroy() {},
    methods: {
        handleClick(tab, event) {
			console.log(tab.name);
			if(tab.name=='rain'){
				this.getPptnLatestList()
			}else if(tab.name=='water'){
				this.getRsvrLatestList()
			}else if(tab.name=='shift'){
				this.dropDownList(1)
			}else if(tab.name=='seepage'){
					this.dropDownList(2)
			}else if(tab.name=='pressure'){
					this.dropDownList(3)
			}
			
        },
		//雨情
		getPptnLatestList(){
			let param = {
				// rscd: this.params.rscd
				appTypeList: [],
					endTime: "",
					id: "",
					mpcd: "",
					periodTime: "",
					rscd: this.currentPoint.rscd,
					startTime: "",
					stcd: "",
					stlc: "",
					stnm: "",
					sttp: "",
					sttpList: [],
					usfl: "",
					tmOrderAsc:true
			}
			gisMap.pptnLatestList(param, res => {
				if (res.state) {
					this.pptnLatestLists=res.value
					this.$nextTick(()=>{
						this.initRainChart()
					})
				}
			})
		},
		//水情监测
		getRsvrLatestList() {
			let param = {
				appTypeList: [],
					endTime: "",
					id: "",
					mpcd: "",
					periodTime: "",
					rscd: this.currentPoint.rscd,
					startTime: "",
					stcd:"",
					stlc: "",
					stnm: "",
					sttp: "",
					sttpList: [],
					usfl: ""
			}
			gisMap.rsvrLatestList(param, res => {
				if (res.state) {
					this.rsvrLatestLists=res.value
					this.$nextTick(()=>{
						this.initWaterChart()
					})
				}
			})
		},
		dropDownList(val){
			let param = {
				id: "",
				mpcd: "",
				mpnm: "",
				rscd: this.currentPoint.rscd,
				stlc: "",
				sttp: val,
				wkcn: ""
			}
			gisMap.monitoring(param, res => {
				if (res.state) {
					if(val==1){
						this.monitoringList1 = res.value
						if(res.value.length>0){
							this.stationKey1 = this.monitoringList1[0].mpcd
						}else{
							this.stationKey1=''
						}
						// this.getDammvList() //位移曲线
					}else if(val==2){
						this.monitoringList2 = res.value
						if(res.value.length>0){
							this.stationKey2 = this.monitoringList2[0].mpcd
						}else{
							this.stationKey2=''
						}
						// this.getDamspprList() //渗压曲线
					}else if(val==3){
						this.monitoringList3 = res.value
						if(res.value.length>0){
							this.stationKey3 = this.monitoringList3[0].mpcd
						}else{
							this.stationKey3=''
						}
						// this.getDamspgList() //渗流曲线
					}
				}
			})
		},
		//位移曲线图
		getDammvList() {
			let param = {
				appTypeList: [],
				endTime: "",
				id: "",
				mpcd: "",
				periodTime: "",
				rscd: this.currentPoint.rscd,
				startTime: "",
				stcd: this.stationKey1,
				stlc: "",
				stnm: "",
				sttp: "",
				sttpList: [],
				usfl: ""
			}
			gisMap.dammvList(param, res => {
				if (res.state) {
					this.dammvLists = res.value
					this.$nextTick(() => {
						this.initShiftChart()
					})
				}
			})
		},
		//渗压监测
		getDamspprList() {
			let param = {
				appTypeList: [],
				endTime: "",
				id: "",
				mpcd: "",
				periodTime: "",
				rscd: this.currentPoint.rscd,
				startTime: "",
				stcd: this.stationKey2,
				stlc: "",
				stnm: "",
				sttp: "",
				sttpList: [],
				usfl: ""
			}
			gisMap.damspprList(param, res => {
				if (res.state) {
					this.damspprLists=res.value
					this.$nextTick(()=>{
						this.initPressureChart()
					})
				}
			})
		},
		//渗流曲线图
		getDamspgList() {
			console.log(123);
			let param = {
				appTypeList: [],
				endTime: "",
				id: "",
				mpcd: "",
				periodTime: "",
				rscd: this.currentPoint.rscd,
				startTime: "",
				stcd: this.stationKey3,
				stlc: "",
				stnm: "",
				sttp: "",
				sttpList: [],
				usfl: ""
			}
			gisMap.damspgList(param, res => {
				if (res.state) {
					this.damspgLists=res.value
					this.$nextTick(()=>{
						this.initSeepageChart()
					})
				}
			})
		},
        initCharts() {
            this.initRainChart()
            this.initWaterChart()
            this.initSeepageChart()
            this.initPressureChart()
            this.initShiftChart()
        },
		
		damTypeMat(val){
			let name
			let dbcl= dictUtils.getDictItemsFromCache('dbcl')
		 	dbcl.forEach(e=>{
				if(e.value==val){
					name= e.name
				}
			})
			return name
		},
		damTypeStr(val){
			let name
			let dbjg= dictUtils.getDictItemsFromCache('dbjg')
			dbjg.forEach(e=>{
				if(e.value==val){
					name= e.name
				}
			})
			return name
		},
		//雨情
        initRainChart() {
			let times = []
			let drpList = []
			this.pptnLatestLists.forEach(e => {
				times.push(e.tm)
				drpList.push(e.drp)
			})
            const rainChartDom = document.getElementById('rainChart')
            this.rainChart = echarts.init(rainChartDom)
            let option = {
                tooltip: {
                    appendToBody: true,
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                        },
                    },
                },
                legend: {
                    bottom: 0,
                    right: 0,
                    data: ['小时雨量(mm)'],
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                },
                grid: {
                    top: '4%',
                    left: '4%',
                    right: '4%',
                    bottom: '16%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data:times,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
						 scale:true
                    },
                ],
                series: [
                    {
                        name: '小时雨量(mm)',
                        type: 'line',
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: 'series',
                        },
                        data: drpList,
                        itemStyle: {
                            color: '#6767ff',
                        },
                    },
                ],
            }
            option && this.rainChart.setOption(option)
        },
        initWaterChart() {
			let times = []
			let rzList = []
			let wList=[]
			this.rsvrLatestLists.forEach(e => {
				times.push(e.tm)
				rzList.push(e.rz)
				wList.push(e.w)
			})
            const waterChartDom = document.getElementById('waterChart')
            this.waterChart = echarts.init(waterChartDom)
            let option = {
                tooltip: {
                    appendToBody: true,
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                        },
                    },
                },
                legend: {
                    bottom: 0,
                    right: 0,
                    data: ['水位(m)', '库容(万m²)'],
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                },
                grid: {
                    top: '4%',
                    left: '4%',
                    right: '4%',
                    bottom: '16%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: times,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
						 scale:true
                    },
                ],
                series: [
                    {
                        name: '水位(m)',
                        type: 'line',
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: 'series',
                        },
                        data:rzList,
                        itemStyle: {
                            color: '#6767ff',
                        },
                    },
                    {
                        name: '库容(万m²)',
                        type: 'line',
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: 'series',
                        },
                        data: wList,
                        itemStyle: {
                            color: '#00FFFF',
                        },
                    },
                ],
            }
            option && this.waterChart.setOption(option)
        },
        initSeepageChart() {
            let times = []
            let spqnList = []
            
            this.damspgLists.forEach(e => {
            	times.push(e.mstm.split(' ')[1])
            	spqnList.push(e.spqn)
            })
            const seepageChartDom = document.getElementById('seepageChart')
            this.seepageChart = echarts.init(seepageChartDom)
            let option = {
            	tooltip: {
            		trigger: 'axis',
            		backgroundColor: 'rgba(0,0,0,0.7)',
            		textStyle: {
            			color: '#dddee0',
            		},
            		axisPointer: {
            			type: 'cross',
            			label: {
            				backgroundColor: '#6a7985',
            			},
            		},
            	},
            	legend: {
            		top: '2%',
            		left: '4%',
            		data: ['瞬时流量(m³/s)'],
            		textStyle: {
            			color: '#adb9ba',
            			fontSize: 10,
            		},
            	},
            	grid: {
            		top: '20%',
            		left: '4%',
            		right: '4%',
            		bottom: '6%',
            		containLabel: true,
            	},
            	xAxis: [{
            		type: 'category',
            		boundaryGap: false,
            		data:times,
            	}, ],
            	yAxis: [{
            		type: 'value',
					 scale:true
            	}, ],
            	series: [{
            		name: '瞬时流量(m³/s)',
            		type: 'line',
            		smooth: true,
            		areaStyle: {},
            		emphasis: {
            			focus: 'series',
            		},
            		data: spqnList,
            		itemStyle: {
            			color: '#0091ff',
            		},
            	}, ],
            }
            option && this.seepageChart.setOption(option)
        },
        initPressureChart() {
			let times = []
			let pztbwlList = []
			let spprwlList = []
			this.damspprLists.forEach(e => {
				times.push(e.mstm.split(' ')[1])
				pztbwlList.push(e.pztbwl)
				spprwlList.push(e.spprwl)
			})
			
			const pressureChartDom = document.getElementById('pressureChart')
			this.pressureChart = echarts.init(pressureChartDom)
			let option = {
				tooltip: {
					trigger: 'axis',
					backgroundColor: 'rgba(0,0,0,0.7)',
					textStyle: {
						color: '#dddee0',
					},
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985',
						},
					},
				},
				legend: {
					top: '2%',
					left: '4%',
					data: ['测压管水位(m)', '渗流压力水(m)'],
					textStyle: {
						color: '#adb9ba',
						fontSize: 10,
					},
				},
				grid: {
					top: '20%',
					left: '4%',
					right: '4%',
					bottom: '6%',
					containLabel: true,
				},
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					data: times,
				}, ],
				yAxis: [{
					type: 'value',
					 scale:true
				}, ],
				series: [{
						name: '测压管水位(m)',
						type: 'line',
						smooth: true,
						emphasis: {
							focus: 'series',
						},
						data:pztbwlList,
						itemStyle: {
							color: '#6767ff',
						},
					},
					{
						name: '渗流压力水(m)',
						type: 'line',
						smooth: true,
						emphasis: {
							focus: 'series',
						},
						data:spprwlList,
						itemStyle: {
							color: '#ff9a00',
						},
					},
				],
			}
			option && this.pressureChart.setOption(option)
			
            // const pressureChartDom = document.getElementById('pressureChart')
            // this.pressureChart = echarts.init(pressureChartDom)
            // let option = {
            //     tooltip: {
            //         appendToBody: true,
            //         trigger: 'axis',
            //         backgroundColor: 'rgba(0,0,0,0.7)',
            //         textStyle: {
            //             color: '#dddee0',
            //         },
            //         axisPointer: {
            //             type: 'cross',
            //             label: {
            //                 backgroundColor: '#6a7985',
            //             },
            //         },
            //     },
            //     legend: {
            //         bottom: 0,
            //         right: 0,
            //         data: ['浸润线1(m)', '浸润线2(m)'],
            //         textStyle: {
            //             color: '#adb9ba',
            //             fontSize: 10,
            //         },
            //     },
            //     grid: {
            //         top: '4%',
            //         left: '4%',
            //         right: '4%',
            //         bottom: '16%',
            //         containLabel: true,
            //     },
            //     xAxis: [
            //         {
            //             type: 'category',
            //             boundaryGap: false,
            //             data: ['坝顶', '坝中', '坝底'],
            //         },
            //     ],
            //     yAxis: [
            //         {
            //             type: 'value',
            //         },
            //     ],
            //     series: [
            //         {
            //             name: '浸润线1(m)',
            //             type: 'line',
            //             smooth: true,
            //             emphasis: {
            //                 focus: 'series',
            //             },
            //             data: [65, 68, 62],
            //             itemStyle: {
            //                 color: '#6767ff',
            //             },
            //         },
            //         {
            //             name: '浸润线2(m)',
            //             type: 'line',
            //             smooth: true,
            //             emphasis: {
            //                 focus: 'series',
            //             },
            //             data: [76, 74, 77],
            //             itemStyle: {
            //                 color: '#ff9a00',
            //             },
            //         },
            //     ],
            // }
            // option && this.pressureChart.setOption(option)
        },
        initShiftChart() {
			let times = []
			let xrdsList = []
			let yrdsList = []
			let zrdsList = []
			this.dammvLists.forEach(e => {
				times.push(e.tm.split(' ')[1])
				xrdsList.push(e.dx)
				yrdsList.push(e.dy)
				zrdsList.push(e.dz)
			})
			console.log(this.dammvLists);
            const shiftChartDom = document.getElementById('shiftChart')
            this.shiftChart = echarts.init(shiftChartDom)
            let option = {
                tooltip: {
                    appendToBody: true,
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                        },
                    },
                },
                legend: {
                    bottom: 0,
                    right: 0,
                    data: ['北方向(mm)', '东方向(mm)', '垂直方向(mm)'],
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                },
                grid: {
                    top: '4%',
                    left: '4%',
                    right: '4%',
                    bottom: '16%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: times,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
						 scale:true
                    },
                ],
                series: [
                    {
                        name: '北方向(mm)',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                        },
                        data:xrdsList,
                        itemStyle: {
                            color: '#ff9a00',
                        },
                    },
                    {
                        name: '东方向(mm)',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                        },
                        data: yrdsList,
                        itemStyle: {
                            color: '#6767ff',
                        },
                    },
                    {
                        name: '垂直方向(mm)',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                        },
                        data: zrdsList,
                        itemStyle: {
                            color: '#91cc75',
                        },
                    },
                ],
            }
            option && this.shiftChart.setOption(option)
        },
    },
}
</script>

<style lang="scss" scoped>
@import './../../../css/model.scss';
.section-container{
    height: 200PX;
    width: 400PX;
    overflow-y: auto;
    padding-top: 10px;
}
.station-search{
    margin: 0 4%;
    width: 92%;
    margin-bottom: 6px;
    .search-select{
       width: 60%;
    }
} 
.full-body{
    height: calc(100% - 40PX);
}

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