<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="年份" align="center" width="100" />
            <el-table-column prop="lengthEcological" label="原岸线长度(km)" align="center" />
            <el-table-column prop="lengthStereoplasm" label="岸线恢复长度(km)" align="center" />
            <el-table-column prop="ecologicalRate" label="生态岸线恢复率" align="center" />
        </el-table>
    </div>
</template>
<script>
import { ecologicalData } from '@/services';
import VBar2 from './VBar2';
export default {
    name: 'ecological',
    components: {
        VBar2
    },
    data() {
        return {
            isFlag: false,
            loading: false,
            data: {
                xData: [],
                yData: [],
                inverse: true
            },
            tableData: []
        }
    },
    methods: {
        async getData() {
            this.loading = true;
            let res = await ecologicalData();
            this.loading = false;
            if (res.code === 200) {
                // const { rateList, typeList } = res.data;
                const data = res.data;
                console.log( res.data,' res.data res.data res.data');
                this.tableData = data;
                let _xData = ['湟水河', '火烧沟', '解放渠'];
                let _list1 = [],
                    _list2 = [];
                    data.map(item => {
                    _list1.push(item.lengthStereoplasmHuang);
                    _list1.push(item.lengthStereoplasmHuo);
                    _list1.push(item.lengthStereoplasmQu);
                    _list2.push(item.lengthEcologicalHuang);
                    _list2.push(item.lengthEcologicalHuo);
                    _list2.push(item.lengthEcologicalQu);
                })
                let _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>