<template>
    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
        <div v-show="flg">
            <el-form :inline="true" :model="formData">
                <el-form-item label="终端等级:">
                    <el-select v-model="formData.lineGrade" placeholder="终端等级" clearable>
                        <el-option
                            v-for="item in terminalClass"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <Timeinterval ref="interval" :interval="3"></Timeinterval>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
                </el-form-item>
            </el-form>
            <el-row>
                <el-col :span="24" :style="'height:' + vh + 'px'">
                    <div id="Statistics">
                        <div id="electr6" ref="fg" :style="`width:100%;height:100%;`"></div>
                    </div>
                </el-col>

                <el-col :span="24">
                    <el-table
                        stripe
                        header-cell-class-name="table_header"
                        :data="datamock"
                        style="width: 100%"
                        :height="vh + 'px'"
                        border
                        :default-sort="{ prop: 'time', order: 'descending' }"
                    >
                        <el-table-column prop="time" label="时间" sortable></el-table-column>
                        <el-table-column prop="deviceAbnormalNum" label="终端异常个数">
                            <template slot-scope="scope">
                                {{ scope.row.deviceAbnormalNum == 3.14159 ? '暂无数据' : scope.row.deviceAbnormalNum }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" min-width="40">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="details(scope.row)" icon="el-icon-view">
                                    终端详情
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        align="right"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="formData.pageNum"
                        :page-sizes="[20, 30, 40, 50, 100]"
                        :page-size="formData.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        class="mt10"
                    ></el-pagination>
                </el-col>
            </el-row>
        </div>
        <TerminalDetails v-if="!flg" @back="onSubmit" :TerminalDetails="tableData" />
    </div>
</template>
<script>
import Timeinterval from '@/views/components/TimePicker/index4'
import { dicData } from '@/assets/commjs/dictypeData'
import yan from '@/assets/commjs/color'
import TerminalDetails from './components/AbnormalStatisticsCild/TerminalDetails.vue'
import { getDailyDeviceAbnormalStatistics, getDailyDeviceAbnormal } from '@/api/integraliy/AbnormalStatistics'
import { onLienRate1, onLienRate2, onLienRate3, Integrity1, Integrity2, Integrity3 } from '@/assets/commjs/color'
export default {
    name: 'abnormalstatistics',
    components: {
        Timeinterval,
        TerminalDetails
    },
    props: {},
    data() {
        return {
            loading: false,
            flg: true,
            zoom: '', //图表焦点校验
            vh: undefined,
            h: undefined,
            formData: {
                lineGrade: '', //终端等级
                searchBeginTime: '', //开始
                searchEndTime: '', //结束
                pageNum: 1,
                pageSize: 20
            },
            item: ['', ''],
            myChartes: '',
            terminalClass: [], //终端等级
            datamock: [],
            tableData: [],
            timeFlag: '',
            total: undefined
        }
    },
    created() {
        this.getclassificationData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.resizeEchart()
        window.addEventListener('resize', () => {
            if (this.myChartes !== '') {
                this.myChartes.resize()
            }
        })

        this.onSubmit()
    },

    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            let heightd = (window.sessionStorage.getItem('appheight') - 95) / 2
            this.h = heightd + 'px'
            this.vh = (window.sessionStorage.getItem('appheight') - 95) / 2
        },

        //获取类型
        getclassificationData() {
            //监测点等级
            this.terminalClass = dicData('Dev_Level', [])
            this.formData.lineGrade = this.terminalClass[0].id
        },
        //查询
        onSubmit() {
            this.loading = true
            this.flg = true
            this.item = this.$refs.interval.timeValue
            this.formData.searchBeginTime = this.item[0]
            this.formData.searchEndTime = this.item[1]
            getDailyDeviceAbnormalStatistics(this.formData).then(res => {
                this.datamock = res.data.records.reverse()
                this.total = res.data.total
                this.loading = false
                this.$nextTick(() => {
                    this.chart()
                })
            })
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.onSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formData.pageNum = val
            this.onSubmit()
        },
        //点击切换
        details(e) {
            // console.log(e);
            this.flg = false
            let data = {
                lineGrade: this.formData.lineGrade,
                searchBeginTime: e.time, //开始
                searchEndTime: e.time //结束
            }
            getDailyDeviceAbnormal(data).then(res => {
                this.tableData = res.data
            })
        },
        chart() {
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr6')
            this.myChartes = echarts.init(domID1, null, { renderer: 'svg' })
            setTimeout(() => {
                domID1.style.width = window.sessionStorage.getItem('Statistics') - 40 + 'px'
                domID1.style.height = (window.sessionStorage.getItem('appheight') - 95) / 2 + 'px'
            }, 0)
            let handle = []
            let time = []
            let echartsData = JSON.parse(JSON.stringify(this.datamock))
            echartsData.forEach(item => {
                handle.push(item.deviceAbnormalNum)
                time.push(item.time)
            })
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            this.myChartes.clear()
            var option = {
                backgroundColor: '#fff', //背景色,
                title: {
                    text: '终端异常个数统计',
                    left: 'center',
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize1,
                        color: echartsColor.WordColor
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    formatter: function (params) {
                        // console.log(params);
                        var tips = ''

                        for (var i = 0; i < params.length; i++) {
                            if (params[i].value == 3.14159) {
                                tips += '时间' + ':' + params[i].name + '<br/>'
                                tips += '终端异常个数' + ':暂无数据<br/>'
                            } else {
                                tips += '时间' + ':' + params[i].name + '<br/>'
                                tips += '终端异常个数' + ':' + params[i].value + '<br/>'
                            }
                        }
                        return tips
                    }
                },
                toolbox: {
                    show: true
                },
                legend: {
                    right: 40,
                    top: 5,
                    data: ['终端异常个数'],
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },
                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                grid: yan.EchartObject.gridk,
                dataZoom: yan.EchartObject.dataZoom,
                xAxis: [
                    {
                        type: 'category',
                        data: time,
                        name: '时间',
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            show: true,
                            // interval: 0,
                            textStyle: {
                                fontFamily: yan.EchartObject.fontFamily,
                                color: echartsColor.WordColor,
                                fontSize: yan.EchartObject.xNamefontSize
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '单位(个)',
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            show: false
                        },
                        // axisLabel: {
                        //   formatter: "{value}M",
                        // },
                        // axisLine: { show: true },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.xNamefontSize
                        }
                    }
                ],
                series: [
                    {
                        name: '终端异常个数',
                        type: 'bar',
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        data: handle
                    }
                ]
            }
            this.myChartes.setOption(option)
            window.echartsArr.push(this.myChartes)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.fg, element => {
                _this.$nextTick(() => {
                    //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
                    ;(domID1.style.width = document.getElementById('Statistics').offsetWidth - 0 + 'px'),
                        _this.myChartes.resize()
                })
            })
        },
        resizeEchart() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('Statistics'), element => {
                let domeId = document.getElementById('Statistics')
                let domeId2 = document.getElementById('electr6')
                domeId2.style.width = domeId.offsetWidth - 0 + 'px'
                // this.$nextTick(() => {
                if (this.myChartes !== '') {
                    this.myChartes.resize()
                }
                // });
            })
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
    height: 32px;
}
.box {
    display: flex;
    .boxR {
        flex: 1;
    }
    .boxL {
        width: 400px;
    }
}
::v-deep .el-table .cell {
    text-align: center;
}
</style>
