<template>
    <div class="water-resource">
        <div class="container">
            <div class="item">
                <CntTopTitle class="CntTopTitle" title="排水分区近三年雨水资源利用率" />
                <div class="cnt" v-loading="loading1">
                    <VBarLine :data="barData"  v-if="flag" />
                </div>
            </div>
            <div class="item">
                <CntTopTitle title="污水去向占比数据" />
                <div class="cnt" v-loading="loading2">
                    <el-form :inline="true">
                        <el-form-item label="年份：">
                            <el-date-picker
                                v-model="formData.year"
                                type="year"
                                format="YYYY"
                                value-format="YYYY"
                                @change="onYearChange"
                                placeholder="选择年"
                                />
                        </el-form-item>
                    </el-form>
                    <VEmpty v-if="!data2.xData || !data2.xData.length  && flag" />
                    <VBar
                        :data="data2"
                        v-if="data2.xData && data2.xData.length && flag"
                        :key="addKey"
                    />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { utilizationrateData, proReuseData, strictinfoData } from '@/services';
import VBarLine from './components/waterresource/VBarLine';
import VBar from './components/waterresource/VBar';
import VEmpty from '@/components/VEmpty';
import moment from 'moment';
export default {
    components: {
        VBarLine,
        VBar,
        VEmpty
    },
    data() {
        return {
            addKey:0,
            flag:false,
            current: 0,
            barData: [],
            formData: {
                // regionNo: '',
                year: new Date().getFullYear()-1+''
            },
            regionList: [],
            data2: {},
            loading1: false,
            loading2: false,
        }
    },
    methods: {
        moment,
        // 获取污水资源利用率
        async getData1() {
            this.loading1 = true;
            let res = await utilizationrateData();
            this.loading1 = false;
            if (res.code === 200) {
                let len = res.data.length;
                let list = Array(len).fill([]);
                for (let i = 0; i < len; i++) {
                    list[i] = [
                        res.data[i].year,
                        res.data[i].totalAmount,
                        res.data[i].treatmentCapacity,
                        res.data[i].totalWastewater,
                        parseFloat(res.data[i].treatmentRate),
                    ]
                }
                this.barData = list;
                console.log(this.barData,88);
                this.flag=true
            }
        },
        // 获取污水去向占比数据
        async getData2() {
            this.loading2 = true;
            // let _data = {
                // data: this.formData
                // data: {
                //     regionNo: 'I',
                //     year: '2019'
                // }
            // }
            let res = await proReuseData(this.formData);
            this.loading2 = false;
            if (res.code === 200) {
                const data = res.data;
                if (data) {
                    let dataMs=data[0]
                    let _xData = ['道路浇洒', '绿地灌溉', '生态补水'];
                    let _yData = [parseFloat(dataMs.daoRate), parseFloat(dataMs.lvRate), parseFloat(dataMs.shengRate)];
                    this.data2 = {
                        xData: _xData,
                        yData: _yData
                    }
                } else {
                    this.data2 = {
                        xData: [],
                        yData: []
                    }
                }
                this.addKey++
                this.flag=true

            }
        },
        // 获取区划编号
        async getStrictinfoData() {
            this.loading2 = true;
            let res = await strictinfoData();
            this.loading2 = false;
            if (res.code === 200) {
                let list = [];
                const { records } = res.data;
                records.length && records.map(item => {
                    list.push({
                        value: item.districtSerial,
                        label: item.districtName
                    })
                })
                if (list.length) {
                    this.formData.regionNo = list[0].value;
                    this.regionList = list;
                    this.getData2();
                }
            }
        },
        // 年份改变
        onYearChange(val) {
            let year = moment(val).format('YYYY');
            this.formData.year = year;
            this.addKey++
            this.getData2();
        },
        // 区域改变
        onTypeChange(val) {
            this.getData2();
        }
    },
    mounted() {
        // this.getStrictinfoData()
        this.getData2()
        this.getData1();
    }
}
</script>
<style lang="less" scoped>
@import "@/global.less";

.water-resource {
    // background-image: url("../../assets/images/bj_img.png");
width: 100%;
height: 91vh;
    .el-input__inner {
        // color: #fff !important;
    }
    .top-tabs {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .item {
            width: 130px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            // background-color: rgba(24, 104, 207, 0.7);
            margin-right: 15px;
            cursor: pointer;
            transition: all 0.2s ease-out;
            font-size: 14px;
        }

        .item.active {
            // box-shadow: 0px 0px 10px inset #fff;
        }
    }

    .container {
        display: flex;
        padding: 20px;
        .item {
            flex: 1;
            .title {
                display: flex;
                align-items: center;
                font-size: 14px;
                margin-bottom: 10px;
                color: @title-color;

                img {
                    margin-right: 10px;
                }
            }
        }
    }
    ::v-deep(.el-input__wrapper)  {
        background-color: transparent ;
    }
}
.CntTopTitle{
    margin-bottom:-50px;
}
</style>