<template>
<!-- 准点数据查询 -->
    <div class="measuringLocationQuery">
        <div class="box">
            <div class="box-top">
                <el-form
                    style="overflow: hidden;"
                    :style="filterForm.show ? null : { height: '0px' }"
                    ref="dialog_form"
                    :model="filterForm.data"
                    :rules="filterForm.rules"
                    size="mini"
                    label-width="70px"
                >
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="开始时间" prop="timestart">
                                <el-date-picker
                                    v-model="filterForm.data.timestart"
                                    type="datetime"
                                    placeholder="开始时间"
                                    style="width: 100%;"
                                    format="yyyy-MM-dd HH"
                                    value-format="yyyy-MM-dd HH"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="结束时间" prop="timeend">
                                <el-date-picker
                                    v-model="filterForm.data.timeend"
                                    type="datetime"
                                    placeholder="结束时间"
                                    style="width: 100%;"
                                    format="yyyy-MM-dd HH"
                                    value-format="yyyy-MM-dd HH"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="计量点" prop="codes">
                                <el-input clearable
                                    v-model.trim="filterForm.data.names"
                                    placeholder="计量点"
                                    style="width: 100%;"
                                    class="input-but"
                                    readonly
                                >
                                    <el-button slot="append" @click="choosePlace()">选择</el-button>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="数据类型" prop="dataType">
                                <el-select
                                filterable clearable
                                    v-model="filterForm.data.dataType"
                                    placeholder="数据类型"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item of nameObj.dataType.arr"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="box-top-gjl">
                    <div style="float:right; text-align: right;">
                        <el-button
                            class="button"
                            type="primary"
                            size="mini"
                            icon="el-icon-search"
                            v-privilege="activeMenu + 'QUERY'"
                            @click="getTableData(1)"
                        >查询</el-button>
                        <el-button
                            class="button"
                            type="primary"
                            size="mini"
                            icon="el-icon-refresh"
                            v-privilege="activeMenu + 'QUERY'"
                            @click="tableDataCancel();"
                        >重置</el-button>
                        <el-button
                            size="mini"
                            :icon="filterForm.show ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
                            :title="filterForm.show ? '收起搜索区' : '展开搜索区'"
                            @click="filterForm.show = !filterForm.show;
                                $nextTick(() => {
                                    singleTableHeight = getRoleHeight($refs['singleTable'].$el) - 30;
                                }
                            );"
                        >{{ filterForm.show ? '收起' : '展开' }}</el-button>
                    </div>
                </div>
            </div>
            <div class="box-bottom">
                <div class="box-left">
                    <el-table stripe
                        id="singleTable"
                        ref="singleTable"
                        :data="tableData"
                        v-loading="tableLoading"
                        style="width: 100%;"
                        :height="singleTableHeight"
                        border
                        size="mini"
                        highlight-current-row
                        show-summary
                        :summary-method="getSummaries"
                    >
                        <el-table-column
                            sortable
                            prop="time"
                            label="时间"
                            min-width="100px"
                            align="center"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column
                            v-if="tableMenu.length > 0"
                            :label="filterForm.dataTypeName"
                        >
                            <el-table-column
                                sortable
                                v-for="(item, index) of tableMenu"
                                :key="index"
                                :prop="item.code"
                                :label="item.name"
                                min-width="100px"
                                align="center"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="box-right">
                    <icore-graphical
                        ref="graphical"
                        v-if="chart.show"
                        :option="chart.option"
                        :width="'100%'"
                        :height="singleTableHeight"
                    >
                    </icore-graphical>
                </div>
            </div>
        </div>
        <el-dialog
            title="选择计量点"
            :visible.sync="dialog.measuringLocation.show"
            width="900px"
            :close-on-click-modal="false"
            :show-close="!loading"
        >
            <div>
                <measurementPlaceChoose ref="measurementPlaceChoose" :z_data="filterForm.data"></measurementPlaceChoose>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="choosePlaceCancel()">取 消</el-button>
                <el-button
                    type="primary"
                    @click="choosePlaceSave()"
                >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import measurementPlaceChoose from './components/measurementPlaceChoose.vue'
import {formatDate, commonSummaries} from '@/utils/util.js';
export default {
    name: 'measuringLocationQuery',
    components: {
        measurementPlaceChoose
    },
    data () {
        let yesterday = new Date();
        yesterday.setDate(new Date().getDate() - 1);
        yesterday.setHours(0);
        let timestart = formatDate(yesterday, 'yyyy-MM-dd HH'),
            timeend = formatDate(new Date().setHours(new Date().getHours() - 1), 'yyyy-MM-dd HH');
        return {
            activeMenu: '',
            filterForm: {
                show: true,
                dataTypeName: '',
                data: {
                    timestart: timestart,
                    timeend: timeend,
                    dataType: 'Sum',
                    codes: '',
                    names: ''
                },
                rules: {
                    timestart: [
                        { required: true, message: '该项不能为空', trigger: 'change' }
                    ],
                    timeend: [
                        { required: true, message: '该项不能为空', trigger: 'change' }
                    ],
                    dataType: [
                        { required: true, message: '该项不能为空', trigger: 'change' }
                    ],
                    codes: [
                        { required: true, message: '该项不能为空', trigger: 'change' }
                    ]
                }
            },
            singleTableHeight: 100,
            // 表列名与数据id的对应关系
            tableMenu: [
                // {
                //     name: '计量点1号',
                //     code: 'code1'
                // },
                // {
                //     name: '计量点2号',
                //     code: 'code2'
                // }
            ],
            tableData: [
                // {
                //     time: '2019-01-01/00',
                //     code1: '1230',
                //     code2: '1980'
                // },
                // {
                //     time: '2019-01-01/03',
                //     code1: '2234',
                //     code2: '1200'
                // },
                // {
                //     time: '2019-01-01/06',
                //     code1: '3000',
                //     code2: '3200'
                // },
                // {
                //     time: '2019-01-01/09',
                //     code1: '4500',
                //     code2: '2300'
                // },
                // {
                //     time: '2019-01-01/12',
                //     code1: '3120',
                //     code2: '3212'
                // }
            ],
            nameObj: {
                dataType: {
                    obj: {
                        'OnTime': '仪表值',
                        'Sum': '用量值'
                    },
                    arr: [
                        {
                            id: 'OnTime',
                            name: '仪表值'
                        },
                        {
                            id: 'Sum',
                            name: '用量值'
                        }
                    ]
                }
            },
            chart: {
                show: false,
                option: {
                    title: {
                        text: '趋势图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [] // ['计量点1号', '计量点2号']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        data: [] // ['2019-01-01/00', '2019-01-01/03', '2019-01-01/06', '2019-01-01/09', '2019-01-01/12']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        // {
                        //     name: '计量点1号',
                        //     type: 'line',
                        //     data: [1230, 2234, 3000, 4500, 3120]
                        // },
                        // {
                        //     name: '计量点2号',
                        //     type: 'line',
                        //     data: [1980, 1200, 3200, 2300, 3212]
                        // }
                    ]
                }
            },
            loading: false,
            tableLoading: false,
            dialog: {
                measuringLocation: {
                    show: false
                }
            }
        }
    },
    created () {
        this.activeMenu = window.localStorage.getItem('activeMenu');
    },
    mounted () {
        let that = this;
        window.PEDataObj = {
            // 将数据绑定到window上，供main页面使用
            vm: that,
            // tableArr：用于导出成Excel的表格的信息
            tableArr: [
                {
                    name: '',
                    id: 'singleTable'
                }
            ]
        };
        that.$nextTick(() => {
            // 立即获取的height有一定偏差，通过setTimeout延迟来解决
            setTimeout(() => {
                that.singleTableHeight = that.getRoleHeight(that.$refs['singleTable'].$el) - 30;
                that.chart.show = true;
            }, 1);
        });
    },
    methods: {
        //  计算树区域高度
        getRoleHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        // 自定义的表格合计方法：只给指定列进行合计
        getSummaries (param) {
            let that = this;
            let prop = [];
            for (let item of that.tableMenu) {
                if (item.code !== 'time') {
                    prop.push(item.code);
                }
            }
            return commonSummaries(param, prop);
        },
        // 获取表格中的数据
        getTableData () {
            let that = this,
                params = {
                    clock: that.filterForm.data.timestart,
                    clocke: that.filterForm.data.timeend,
                    itemid: that.filterForm.data.codes,
                    datatype: that.filterForm.data.dataType
                };
            that.$refs['dialog_form'].validate((valid) => {
                if (valid) {
                    that.filterForm.dataTypeName = that.nameObj.dataType.obj[that.filterForm.data.dataType];
                    that.tableLoading = true;
                    let url = 'pass/ems/v1/trmcalpoints/getRmCalpointVal';
                    that.axios.get(url, {
                        params: params
                    })
                        .then(function (res) {
                            if (res.code === '0') {
                                let tableMenu = []; // 表列名与数据id的对应关系
                                let tableData = []; // 表数据
                                let legend = [], // 图表显示项名
                                    xAxis = [], // 图表x轴名称
                                    series = []; // 图表具体项目数据
                                if (res.data[0]) {
                                    for (let key in res.data[0]) {
                                        if (key.toString() !== 'tim') {
                                            // 获取表列名与数据id的对应关系
                                            tableMenu.push(
                                                {
                                                    name: res.data[0][key].name,
                                                    code: key
                                                }
                                            );
                                            legend.push(res.data[0][key].name);
                                            // 创建图表显示项
                                            series.push(
                                                {
                                                    id: key,
                                                    name: res.data[0][key].name,
                                                    type: 'line',
                                                    data: []
                                                }
                                            );
                                        }
                                    }
                                }
                                for (let item of res.data) {
                                    let obj = {
                                        time: item.tim
                                    };
                                    for (let key in item) {
                                        if (key.toString() !== 'tim') {
                                            obj[key] = item[key].val;
                                            for (let i = 0; i < series.length; i++) {
                                                if (key === series[i].id) {
                                                    series[i].data.push(item[key].val); // 为图表获取详细数值
                                                    break;
                                                }
                                            }
                                        }
                                    }
                                    tableData.push(obj);
                                    xAxis.push(item.tim);
                                }
                                that.tableMenu = tableMenu;
                                that.tableData = tableData;
                                that.chart.option.legend.data = legend;
                                that.chart.option.xAxis.data = xAxis;
                                that.chart.option.series = series;
                                // that.chart.show = false;
                                // setTimeout(() => {
                                //     that.chart.show = true;
                                // }, 100);
                                // that.$refs['graphical'].setGraphical();
                                that.chart.show = false;
                                setTimeout(() => {
                                    that.chart.show = true;
                                }, 100);
                            } else {
                                that.$message.error(res.message);
                            }
                            that.tableLoading = false;
                        }).catch(function () {
                            that.tableLoading = false;
                        });
                }
            });
        },
        // 重置搜索
        tableDataCancel () {
            let that = this;
            that.filterForm.data.timestart = '';
            that.filterForm.data.timeend = '';
            that.filterForm.data.dataType = '';
            that.$refs['measurementPlaceChoose'].empty();
        },
        choosePlace () {
            let that = this;
            that.dialog.measuringLocation.show = true;
        },
        choosePlaceCancel () {
            let that = this;
            that.$refs['measurementPlaceChoose'].but_cancel();
            that.dialog.measuringLocation.show = false;
        },
        choosePlaceSave () {
            let that = this;
            that.$refs['measurementPlaceChoose'].but_save();
            that.dialog.measuringLocation.show = false;
        }
    }
}
</script>

<style lang="less">
.measuringLocationQuery {
    min-width: 700px;
    height: 100%;
    .box {
        height: 100%;
        padding: 15px 15px 0 15px;
        .box-top {
            .box-top-gjl {
                overflow: hidden;
                // margin-top: -7px;
                padding: 7px 0;
                border-top: 1px solid #ccc;
                // border-bottom: 1px solid #ccc;
                // margin-bottom: 6px;
            }
        }
        .box-bottom {
            overflow: hidden;
            .box-left {
                width: 40%;
                float: left;
            }
            .box-right {
                width: 60%;
                float: left;
            }
        }
    }
    .el-table {
        .el-form-item {
            margin-bottom: 0;
        }
    }
    .input-but {
        .el-input-group__append {
            background-color: #409eff;
            color: #fff;
            border-color: #ccc;
        }
    }
    .is-success {
        .input-but {
            .el-input-group__append {
                border-color: #67c23a;
            }
        }
    }
    .is-error {
        .input-but {
            .el-input-group__append {
                border-color: #f56c6c;
            }
        }
    }
}
</style>
