<!--水库-->
<template>
    <div class="infoWindow-model" v-show="isShow">
        <div class="model-title">{{ currentPoint.waterName }}</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.stnm }} </span>
                    </div>
					<div class="section-item"  >
					    <span class="text">所属取水证</span>
					    <span class="content">{{ currentPoint.wpcSn }} </span>
					</div>
					<div class="section-item"  >
					    <span class="text">所属取水户</span>
					    <span class="content">{{ currentPoint.waterName }} </span>
					</div>
					<div class="section-item"  >
					    <span class="text">取水地址</span>
					    <span class="content">{{ currentPoint.stlc  }} </span>
					</div>
                </div>
           <!-- </el-tab-pane>
            
            <el-tab-pane label="取水量监测" name="data">
                <div class="section-container">
                    <div id="chart" class="full"></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'
export default {
    name: 'WaterUserModel',
    props: {
        currentPoint: {
            type: Object,
            default: () => {
                return {}
            },
        },
        isShow: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            activeName: '取水户信息',
			param:{
					id: "",
					monitorLevelList: [],
					stcd: "",
					stnm: "",
					waterCode: "",
					waterName: "",
					waterPurposeList: [],
					waterSourceList: [],
					waterTypeList: []
			},
            defaultData: [
                {
                    text: '取水户',
                    content: 'XXX',
                    key: 1,
                },
                {
                    text: '监控级别',
                    content: '省控级',
                    key: 2,
                },
                {
                    text: '许可量',
                    content: 'xxx',
                    key: 3,
                },
                {
                    text: '年累计取水量',
                    content: 'xxx',
                    key: 4,
                },
            ],
            tableData: [],
            chart: null, //雨情监测
			yearWaterPalns:{},
        }
    },
    inject: ['mapData'],
    created() {
        let mapData = this.mapData()
        this.T = mapData.T
        this.map = mapData.map
    },
	watch: {
	    currentPoint: {
	        handler(newVal) {
				console.log(this.currentPoint);
				// this.getWaterPlanLis()
				// this.getYearWaterPaln()
                this.activeName = '取水户信息'
	        },
	    }
	},
    mounted() {
        this.$nextTick(async() => {
            // this.getWaterPlanLis()
			    // await this.getYearWaterPaln()
        })
    },
    beforeDestroy() {},
    methods: {
		// getWaterPlanLis(){
		// 	this.params.waterCode=this.currentPoint.waterCode
		// 	gisMap.waterPlanLis(this.params,res=>{
		// 		if(res.state){
		// 			this.tableData=res.value
		// 			// this.$nextTick(() => {
		// 			//     this.initChart()
		// 			// })
		// 		}
		// 	})
		// },
		getYearWaterPaln(){
			this.param.stcd=this.currentPoint.stcd
			gisMap.waterDataList(this.param,res=>{
				if(res.state){
					this.yearWaterPalns=res.value
					this.$nextTick(() => {
					    this.initChart()
					})
				}
			})
		},
        handleClick(tab, event) {
			if(tab.name=='data'){
				this.getYearWaterPaln()
			}else if(tab.name=='rain'){
				this.getWaterPlanLis()
			}
            this.$nextTick(() => {
                this.chart.resize()
            })
        },
		monitorLevel(val){
				let name
				let jkjb = dictUtils.getDictItemsFromCache('jkjb')
				jkjb.forEach(e => {
					if (e.value == val) {
						name = e.name
					}
				})
				return name
		},
        initCharts() {
            this.initChart()
        },
        initChart() {
            const chartDom = document.getElementById('chart')
            this.chart = echarts.init(chartDom)
			let Alist = []//取水量
			let Blist = []//取水累积量
			let times = []//累计取水量
			this.yearWaterPalns.forEach(e=>{
				Alist.push(e.sflow)
				Blist.push(e.flow)
				times.push(e.tm.split(' ')[1])
			})
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#576580',
                        },
                    },
                },
                grid: {
                    top: 30,
                    right: '5%',
                    bottom: 50,
                },
                legend: {
                    left: 5,
                    bottom: 5,
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                },
                xAxis: {
                    type: 'category',
                    data: times,
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                yAxis: {
					scale:true,
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}',
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#7c7c7c',
                        },
                    },
                },
                series: [
                    {
                        name: '取水量',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '万m³'
                            },
                        },
                        data:Alist,
                        itemStyle: {
                            color: '#6767ff',
                        },
                    },
                    {
                        name: '累计取水量',
                        type: 'line',
                        smooth: true,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '万m³'
                            },
                        },
                        data:Blist,
                        itemStyle: {
                            color: '#ff9a00',
                        },
                    },
                ],
            }
            option && this.chart.setOption(option)
        },
    },
}
</script>

<style lang="scss" scoped>
@import './../../../css/model.scss';
.section-container{
    // width: 500PX;
    width: 440PX;
    // height: 290PX;
    /deep/ .el-table__expanded-cell[class*=cell]{
        padding:0 10px;
    }
    /deep/.el-table__expanded-cell {
        background-color: #16437e;
        color: $text-title ;
    }
    /deep/.el-form-item--small.el-form-item {
        margin-bottom: 0;
    }
    /deep/.el-form-item__label {
        color: $text-sub  ;
        padding: 0 6px;
    }
    /deep/.el-row{
        border-bottom: 1px solid $border-color;
    }
    /deep/.el-row:last-of-type{
        border-bottom: none;
    }
    /deep/.el-col{
        border-right: 1px solid $border-color;
    }
    /deep/.el-col:last-of-type{
        border-right: none;
    }
}


</style>