<template>
    <div v-loading="loading" element-loading-text="数据加载中">
        <VBar2 :data="data" style="height: 350px;" v-if="isFlag" />
        <el-table :data="tableData" style="width: 100%"  max-height="700">
            <el-table-column prop="year" label="年份" width="100" align="center" />
            <el-table-column prop="ammoniaNitrogenAvg" label="氨氮年平均浓度值" width="140" align="center" />
            <el-table-column prop="ammoniaNitrogen" label="氨氮超标率" align="center">
                <!-- <template slot-scope="scope">
                    <span>{{ scope.row.ammoniaNitrogen }}%</span>
                </template> -->
            </el-table-column>
            <el-table-column prop="totalPhosphorusAvg" label="总磷年平均浓度值" width="140" align="center" />
            <el-table-column prop="totalPhosphorus" label="总磷超标率" align="center">
                <!-- <template slot-scope="scope">
                    <span>{{ scope.row.totalPhosphorus }}%</span>
                </template> -->
            </el-table-column>
            <el-table-column prop="rate" label="达标率" align="center" />
            <el-table-column prop="environmenta" label="地下水环境标准" align="center" />
        </el-table>
    </div>
</template>
<script>
import { environmentData } from '@/services';
import VBar2 from './VBar2';
export default {
    name: 'environment',
    components: {
        VBar2
    },
    data() {
        return {
            isFlag:false,
            loading: false,
            data: {
                xData: [],
                yData: []
            },
            tableData: []
        }
    },
    methods: {
        async getData() {
            this.loading = true;
            let res = await environmentData();
            this.loading = false;
            console.log(res,333);
            if (res.code === 200) {
                let _xData = [];
                let _yData = [];
                let _list1 = [],
                    _list2 = [];
                this.tableData = res.data;
                res.data.length && res.data.map((item, index) => {
                    _xData.push(item.year);
                    _list1.push(item.ammoniaNitrogenAvg); // 氨氮年平均浓度值
                    _list2.push(item.totalPhosphorusAvg); //总磷年平均浓度值
                })
                _yData = [
                    { name: '氨氮年平均浓度值', barGap: 0, barWidth: 30, type: 'bar', data: _list1 },
                    { name: '总磷年平均浓度值', barWidth: 30, type: 'bar', data: _list2 }
                ]
                this.data = {
                    xData: _xData,
                    yData: _yData
                }
                this.isFlag=true
            }
        }
    },
    mounted() {
        this.getData();
    }
}
</script>