<template>
    <!-- 重要指标展示 -->
    <div class="indicatorsShow">
        <div class="box">
            <div class="box-top">
                <el-form
                    size="mini"
                    label-width="70px"
                    inline
                >
                    <el-form-item label="年度">
                        <el-date-picker
                            v-model="filterForm.data.clock"
                            type="year"
                            placeholder=""
                            style="width: 150px"
                            value-format="yyyy"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <el-button
                            class="button"
                            type="primary"
                            size="mini"
                            icon="el-icon-search"
                            v-privilege="activeMenu + 'QUERY'"
                            @click="getTableData(1)"
                        >查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="box-bottom">
                <el-tabs
                    ref="analyzeChartTabs"
                    type="border-card"
                    v-model="analyzeChart.tabName"
                >
                    <!-- <el-tab-pane
                        label="企业可比价产值能耗趋势图"
                        name="chart_1"
                    >
                        <icore-graphical
                            ref="chart_1"
                            v-if="analyzeChart.chart_1.show && analyzeChart.tabName === 'chart_1'"
                            :option="analyzeChart.chart_1.option"
                            :width="'100%'"
                            :height="analyzeChart.height"
                        >
                        </icore-graphical>
                    </el-tab-pane> -->
                    <!-- <el-tab-pane
                        label="企业工业增加值能耗趋势图"
                        name="chart_2"
                    >
                        <icore-graphical
                            ref="chart_2"
                            v-if="analyzeChart.chart_2.show && analyzeChart.tabName === 'chart_2'"
                            :option="analyzeChart.chart_2.option"
                            :width="'100%'"
                            :height="analyzeChart.height"
                        >
                        </icore-graphical>
                    </el-tab-pane>
                    <el-tab-pane
                        label="企业能综合源消耗耗面积图"
                        name="chart_3"
                    >
                        <icore-graphical
                            ref="chart_3"
                            v-if="analyzeChart.chart_3.show && analyzeChart.tabName === 'chart_3'"
                            :option="analyzeChart.chart_3.option"
                            :width="'100%'"
                            :height="analyzeChart.height"
                        >
                        </icore-graphical>
                    </el-tab-pane> -->
                    <!-- <el-tab-pane
                        label="企业可比价增加值能耗趋势图"
                        name="chart_4"
                    >
                        <icore-graphical
                            ref="chart_4"
                            v-if="analyzeChart.chart_4.show && analyzeChart.tabName === 'chart_4'"
                            :option="analyzeChart.chart_4.option"
                            :width="'100%'"
                            :height="analyzeChart.height"
                        >
                        </icore-graphical>
                    </el-tab-pane> -->
                    <el-tab-pane
                        label="企业吨产品水耗趋势图"
                        name="chart_5"
                    >
                        <icore-graphical
                            ref="chart_5"
                            v-if="analyzeChart.chart_5.show && analyzeChart.tabName === 'chart_5'"
                            :option="analyzeChart.chart_5.option"
                            :width="'100%'"
                            :height="analyzeChart.height"
                        >
                        </icore-graphical>
                    </el-tab-pane>
                    <el-tab-pane
                        label="企业吨产品电耗趋势图"
                        name="chart_6"
                    >
                        <icore-graphical
                            ref="chart_6"
                            v-if="analyzeChart.chart_6.show && analyzeChart.tabName === 'chart_6'"
                            :option="analyzeChart.chart_6.option"
                            :width="'100%'"
                            :height="analyzeChart.height"
                        >
                        </icore-graphical>
                    </el-tab-pane>
                    <el-tab-pane
                        label="企业能源消耗耗趋势图"
                        name="chart_7"
                    >
                        <icore-graphical
                            ref="chart_7"
                            v-if="analyzeChart.chart_7.show && analyzeChart.tabName === 'chart_7'"
                            :option="analyzeChart.chart_7.option"
                            :width="'100%'"
                            :height="analyzeChart.height"
                        >
                        </icore-graphical>
                    </el-tab-pane>
                    <!-- <el-tab-pane
                        label="企业万元产值能耗趋势图"
                        name="chart_8"
                    >
                        <icore-graphical
                            ref="chart_8"
                            v-if="analyzeChart.chart_8.show && analyzeChart.tabName === 'chart_8'"
                            :option="analyzeChart.chart_8.option"
                            :width="'100%'"
                            :height="analyzeChart.height"
                        >
                        </icore-graphical>
                    </el-tab-pane> -->
                    <!-- <el-tab-pane
                        label="企业吨产品可比能耗趋势图"
                        name="chart_9"
                    >
                        <icore-graphical
                            ref="chart_9"
                            v-if="analyzeChart.chart_9.show && analyzeChart.tabName === 'chart_9'"
                            :option="analyzeChart.chart_9.option"
                            :width="'100%'"
                            :height="analyzeChart.height"
                        >
                        </icore-graphical>
                    </el-tab-pane> -->
                    <el-tab-pane
                        label="企业能源消耗耗结构图"
                        name="chart_10"
                    >
                        <icore-graphical
                            ref="chart_10"
                            v-if="analyzeChart.chart_10.show && analyzeChart.tabName === 'chart_10'"
                            :option="analyzeChart.chart_10.option"
                            :width="'100%'"
                            :height="analyzeChart.height"
                        >
                        </icore-graphical>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/util.js'
export default {
    name: 'indicatorsShow',
    data () {
        return {
            activeMenu: '',
            filterForm: {
                data: {
                    clock: formatDate(new Date(), 'yyyy')
                },
                rules: {

                }
            },
            analyzeChart: {
                height: 500,
                tabName: 'chart_5',
                chart_1: {
                    show: true,
                    loading: false,
                    option: {
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [],
                            type: 'bar'
                        }]
                    }
                },
                chart_2: {
                    show: true,
                    loading: false,
                    option: {
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [],
                            type: 'bar'
                        }]
                    }
                },
                chart_3: {
                    show: true,
                    loading: false,
                    option: {
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [],
                            type: 'bar'
                        }]
                    }
                },
                chart_4: {
                    show: true,
                    loading: false,
                    option: {
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [],
                            type: 'bar'
                        }]
                    }
                },
                chart_5: {
                    show: true,
                    loading: false,
                    option: {
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [],
                            type: 'bar'
                        }]
                    }
                },
                chart_6: {
                    show: true,
                    loading: false,
                    option: {
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [],
                            type: 'bar'
                        }]
                    }
                },
                chart_7: {
                    show: true,
                    loading: false,
                    option: {
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [],
                            type: 'bar'
                        }]
                    }
                },
                chart_8: {
                    show: true,
                    loading: false,
                    option: {
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [],
                            type: 'bar'
                        }]
                    }
                },
                chart_9: {
                    show: true,
                    loading: false,
                    option: {
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [],
                            type: 'bar'
                        }]
                    }
                },
                chart_10: {
                    show: true,
                    loading: false,
                    option: {
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [],
                            type: 'bar'
                        }]
                    }
                }
            }
        }
    },
    created () {
        this.activeMenu = window.localStorage.getItem('activeMenu');
    },
    mounted () {
        let that = this;
        that.$nextTick(() => {
            // 立即获取的height有一定偏差，通过setTimeout延迟来解决
            setTimeout(() => {
                that.analyzeChart.height = that.getRoleHeight(that.$refs['analyzeChartTabs'].$el) - 60;
                that.analyzeChart.show = true;
            }, 1);
        });
        that.getTableData();
    },
    methods: {
        //  计算树区域高度
        getRoleHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        // 获取数据
        getTableData () {
            let that = this;
            // 企业工业增加值能耗趋势图
            // that.getApiData('pass/ems/v1/trmactvalues/chtResult6a', function (data, breakFoo) {
            //     let xAxis = [],
            //         yAxis = [];
            //     if (data) {
            //         for (let item of data) {
            //             xAxis.push(item.CLOCK);
            //             yAxis.push(item.APPORTVALUE);
            //         }
            //     }
            //     that.analyzeChart.chart_2.option = {
            //         'title': { 'text': '企业工业增加值能耗趋势图' },
            //         'tooltip': { 'trigger': 'axis', 'show': true },
            //         'legend': { 'data': ['CLOCK'] },
            //         'xAxis': [{ 'name': '月份', 'data': xAxis }],
            //         'yAxis': [{ 'name': '最终值' }],
            //         'series': [{ 'type': 'bar', 'data': yAxis }],
            //         'yName': 'APPORTVALUE',
            //         'xName': 'CLOCK'
            //     }
            //     breakFoo();
            // }, that.analyzeChart.chart_2);
            // 企业能综合源消耗耗面积图
            // that.getApiData('pass/ems/v1/trmactvalues/chtResult3a', function (data, breakFoo) {
            //     let xAxis = [],
            //         yAxis = [];
            //     if (data) {
            //         for (let item of data) {
            //             xAxis.push(item.CLOCK);
            //             yAxis.push(item.APPORTVALUE);
            //         }
            //     }
            //     that.analyzeChart.chart_3.option = {
            //         'title': { 'text': '企业能综合源消耗耗面积图' },
            //         'tooltip': { 'trigger': 'axis', 'show': true },
            //         'legend': { 'data': ['ITEMNAME'] },
            //         'xAxis': [{ 'name': '月份', 'data': xAxis }],
            //         'yAxis': [{ 'name': '最终值' }],
            //         'series': [{
            //             'type': 'line',
            //             'areaStyle': {},
            //             'symbol': 'none',
            //             'data': yAxis
            //         }],
            //         'yName': 'APPORTVALUE',
            //         'xName': 'clock'
            //     }
            //     breakFoo();
            // }, that.analyzeChart.chart_3);
            // 企业吨产品水耗趋势图
            that.getApiData('pass/ems/v1/trmindexvalues/chtResult5', function (data, breakFoo) {
                let xAxis = [],
                    yAxis = [];
                if (data) {
                    for (let item of data) {
                        xAxis.push(item.CLOCK);
                        yAxis.push(item.APPORTVALUE);
                    }
                }
                that.analyzeChart.chart_5.option = {
                    'title': {'text': '企业吨产品水耗趋势图'},
                    'tooltip': {'trigger': 'axis', 'show': true},
                    'legend': {'data': ['CLOCK']},
                    'xAxis': [{'name': '月份', 'data': xAxis}],
                    'yAxis': [{'name': '吨钢水耗（t）'}],
                    'series': [{'type': 'line', 'data': yAxis, itemStyle: {normal: {label: {show: true}}}}],
                    'yName': 'APPORTVALUE',
                    'xName': 'CLOCK'
                }
                breakFoo();
            }, that.analyzeChart.chart_5);
            // 企业吨产品电耗趋势图
            that.getApiData('pass/ems/v1/trmindexvalues/chtResult6', function (data, breakFoo) {
                let xAxis = [],
                    yAxis = [];
                if (data) {
                    for (let item of data) {
                        xAxis.push(item.CLOCK);
                        yAxis.push(item.APPORTVALUE);
                    }
                }
                that.analyzeChart.chart_6.option = {
                    'title': {'text': '企业吨产品电耗趋势图'},
                    'tooltip': {'trigger': 'axis', 'show': true},
                    'legend': {'data': ['ITEMNAME']},
                    'xAxis': [{'name': '月份', 'data': xAxis}],
                    'yAxis': [{'name': '吨钢电耗（千瓦时）'}],
                    'series': [{'type': 'bar', 'data': yAxis, itemStyle: {normal: {label: {show: true}}}}],
                    'yName': 'APPORTVALUE',
                    'xName': 'clock'
                }
                breakFoo();
            }, that.analyzeChart.chart_6);
            // 企业能源消耗耗趋势图
            that.getApiData('pass/ems/v1/trmindexvalues/chtResult7', function (data, breakFoo) {
                let xAxis = [],
                    yAxis = [];
                if (data) {
                    for (let item of data) {
                        xAxis.push(item.CLOCK);
                        yAxis.push(item.APPORTVALUE);
                    }
                }
                that.analyzeChart.chart_7.option = {
                    'title': {'text': '企业能源消耗耗趋势图'},
                    'tooltip': {'trigger': 'axis', 'show': true},
                    'legend': {'data': ['CLOCK']},
                    'xAxis': [{'name': '月份', 'data': xAxis}],
                    'yAxis': [{'name': '总能耗（吨标煤）'}],
                    'series': [{'type': 'bar', 'data': yAxis, itemStyle: {normal: {label: {show: true}}}}],
                    'yName': 'APPORTVALUE',
                    'xName': 'CLOCK'
                }
                breakFoo();
            }, that.analyzeChart.chart_7);
            // // 企业吨产品可比能耗趋势图
            // that.getApiData('pass/ems/v1/trmactvalues/chtResult6a', function (data, breakFoo) {
            //     let xAxis = [],
            //         yAxis = [];
            //     if (data) {
            //         for (let item of data) {
            //             xAxis.push(item.CLOCK);
            //             yAxis.push(item.APPORTVALUE);
            //         }
            //     }
            //     that.analyzeChart.chart_9.option = {
            //         'title': {'text': '企业吨产品可比能耗趋势图'},
            //         'tooltip': {'trigger': 'axis', 'show': true},
            //         'legend': {'data': ['CLOCK']},
            //         'xAxis': [{'name': '月份', 'data': xAxis}],
            //         'yAxis': [{'name': '最终值'}],
            //         'series': [{'type': 'bar', 'data': yAxis}],
            //         'yName': 'APPORTVALUE',
            //         'xName': 'CLOCK'
            //     }
            //     breakFoo();
            // }, that.analyzeChart.chart_9);
            // 企业能源消耗耗结构图
            that.getApiData('pass/ems/v1/trmindexvalues/chtResult10', function (data, breakFoo) {
                let seriesData = [],
                    dataitems = []
                if (data) {
                    for (let item of data) {
                        console.log('EVAL', item.EVAL);
                        if (item.EVAL || item.EVAL === 0) {
                            console.log('item.EVAL', item.EVAL);
                            dataitems.push(item.WORKPROCNAME);
                            seriesData.push({name: item.WORKPROCNAME, value: Number(item.EVAL).toFixed(2)});
                        }
                    }
                }
                that.analyzeChart.chart_10.option = {
                    'title': {'text': '企业能源消耗耗结构图'},
                    'tooltip': {'trigger': 'item', 'show': true, formatter: '{a} <br/>{b} : {c} ({d}%)'},
                    'legend': {type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20, data: dataitems},
                    'series': [{
                        'name': '能耗（吨标煤）',
                        'type': 'pie',
                        'data': seriesData,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: '{b} : {c} ({d}%)'
                                },
                                labelLine: {show: true}
                            }
                        }
                    }]
                }
                breakFoo();
            }, that.analyzeChart.chart_10);
        },
        getApiData (url, foo, chartObj, paramsObj) {
            let that = this,
                params = {
                    clock: that.filterForm.data.clock
                };
            if (paramsObj) {
                for (let key in paramsObj) {
                    params[key] = paramsObj[key];
                }
            }
            chartObj.loading = true;
            that.axios.get(url, {
                params: params
            })
                .then(function (res) {
                    if (res.code === '0') {
                        foo(res.data, function () {
                            chartObj.show = false; // 将通过v-if使画面组件重新渲染
                            setTimeout(() => {
                                chartObj.show = true;
                            }, 100);
                        });
                    } else {
                        that.$message.error(res.message);
                    }
                    chartObj.loading = false;
                }).catch(function () {
                    chartObj.loading = false;
                });
        }
    }
}
</script>

<style lang="less">
.indicatorsShow {
    min-width: 700px;
    height: 100%;
    .box {
        height: 100%;
        padding: 15px 15px 0 15px;
        .box-top {
            // padding-bottom: 7px;
            // border-bottom: 1px solid #ccc;
            // margin-bottom: 7px;
            .el-form-item {
                margin-bottom: 7px;
            }
        }
    }
}
</style>
